Sage theme template usage
get_template_part('partials/content', 'page');### Alternative in Sage 10 (Recommended)
Since Sage 10 uses Blade templates, the recommended approach is to use `@include` or `@includeIf`:
@include('partials.content-page')This loads the file located at `resources/views/partials/content-page.blade.php`.
If you still need to use `get_template_part()`, make sure your file exists in the standard WordPress `theme` directory (`resources/views` won't work with this function). However, using Blade templates in Sage is more in line with its architecture.
use this custom elemetor widget
—
## **Steps to Use Blade in a Custom Elementor Widget**
Elementor widgets in Sage 10 need to use the `AppViewTemplate` helper to render Blade views inside PHP files.
### **1. Load Sage’s Blade Template Engine in Your Widget**
In your custom Elementor widget, use the `sage()` helper to render the Blade view.
#### **Example: Using a Blade Template in an Elementor Widget**
namespace AppElementorWidgets;
use ElementorWidget_Base;
use ElementorControls_Manager;
class Custom_Widget extends Widget_Base {
public function get_name() {
return 'custom-widget';
}
public function get_title() {
return __('Custom Widget', 'sage');
}
public function get_icon() {
return 'eicon-text';
}
public function get_categories() {
return ['general'];
}
protected function _register_controls() {
$this->start_controls_section(
'content_section',
[
'label' => __('Content', 'sage'),
'tab' => ElementorControls_Manager::TAB_CONTENT,
]
);
$this->add_control(
'custom_text',
[
'label' => __('Custom Text', 'sage'),
'type' => ElementorControls_Manager::TEXT,
'default' => __('Hello, Sage!', 'sage'),
]
);
$this->end_controls_section();
}
protected function render() {
$settings = $this->get_settings_for_display();
// Use the Sage template system
echo Rootsview('partials.content-page', ['custom_text' => $settings['custom_text']])->render();
}
}—
### **2. Create the Blade Template for Your Widget**
In `resources/views/partials/content-page.blade.php`, add:
<div class="custom-widget">
<h2>{{ $custom_text }}</h2>
</div>—
## **Why This Works?**
– `Rootsview('partials.content-page')` allows Sage to load the Blade template properly inside an Elementor widget.
– Passing `['custom_text' => $settings['custom_text']]` makes it dynamic.
Now, you can use this Elementor widget and dynamically render the Blade template inside Elementor while keeping the Sage 10 structure intact.
Let me know if you need more tweaks! 🚀
—
### **Updated Code with Blade Integration**
<?php
class Elementor_Locations_Widget extends ElementorWidget_Base
{
public function get_name()
{
return 'locations-section';
}
public function get_title()
{
return esc_html__('Locations', 'sage');
}
public function get_icon()
{
return 'eicon-tabs';
}
public function get_custom_help_url()
{
return 'https://docs.plstr.dev';
}
public function get_categories()
{
return ['autohaus-lange'];
}
public function get_keywords()
{
return ['tabs'];
}
/**
* Register Slider-Controls
*/
protected function register_controls()
{
// You can add Elementor controls here if needed
}
/**
* Render it in frontend
*/
protected function render()
{
$query = new WP_Query([
'post_type' => 'location',
'posts_per_page' => 3,
'orderby' => 'date',
'order' => 'DESC',
'paged' => 1,
]);
// Pass the query to the Blade template
echo Rootsview('partials.locations', ['query' => $query])->render();
}
}—
### **Create the Blade Template for the Locations Widget**
Create a file:
📂 `resources/views/partials/locations.blade.php`
<div class="location_container">
@if ($query->have_posts())
@while ($query->have_posts())
@php $query->the_post(); @endphp
<div class="location-item">
<h3>{{ get_the_title() }}</h3>
<p>{{ get_the_excerpt() }}</p>
<a href="{{ get_permalink() }}">Read More</a>
</div>
@endwhile
@php wp_reset_postdata(); @endphp
@else
<p>No locations found.</p>
@endif
</div>—
### **Why This is Better?**
✅ Uses Sage 10’s Blade templating for cleaner HTML.
✅ Keeps Elementor widget logic separate from the template.
✅ Makes it easier to maintain and update the design.
Now, whenever this widget is used in Elementor, it will fetch and display **Location** posts dynamically using Blade.
Let me know if you need any modifications! 🚀
—
### **Updated Blade Template (`resources/views/partials/locations.blade.php`)**
<div class="location_container">
@if ($query->have_posts())
@while ($query->have_posts())
@php $query->the_post(); @endphp
<div class="location-item">
{{-- Display Featured Image --}}
@if (has_post_thumbnail())
<div class="location-image">
<img src="{{ get_the_post_thumbnail_url(null, 'full') }}" alt="{{ get_the_title() }}">
</div>
@endif
{{-- Display Title and Excerpt --}}
<h3>{{ get_the_title() }}</h3>
<p>{{ get_the_excerpt() }}</p>
{{-- Read More Button --}}
<a href="{{ get_permalink() }}">Read More</a>
</div>
@endwhile
@php wp_reset_postdata(); @endphp
@else
<p>No locations found.</p>
@endif
</div>—
### **Explanation**
✅ **`has_post_thumbnail()`** → Checks if the post has a featured image.
✅ **`get_the_post_thumbnail_url(null, 'full')`** → Retrieves the image URL. You can replace `'full'` with `'medium'`, `'large'`, etc., as needed.
✅ **Proper Blade Syntax** → Clean, readable, and efficient.
Now, each location post will display its **featured image**, title, excerpt, and a "Read More" button in the Elementor widget.
Let me know if you need any more adjustments! 🚀
—
## **🔹 Update Your Blade Template to Include ACF Fields**
Edit your Blade template:
📂 `resources/views/partials/locations.blade.php`
<div class="location_container">
@if ($query->have_posts())
@while ($query->have_posts())
@php
$query->the_post();
$custom_field = get_field('your_acf_field'); // Replace 'your_acf_field' with your ACF field name
@endphp
<div class="location-item">
{{-- Display Featured Image --}}
@if (has_post_thumbnail())
<div class="location-image">
<img src="{{ get_the_post_thumbnail_url(null, 'full') }}" alt="{{ get_the_title() }}">
</div>
@endif
{{-- Display Title and Excerpt --}}
<h3>{{ get_the_title() }}</h3>
<p>{{ get_the_excerpt() }}</p>
{{-- Display ACF Field --}}
@if ($custom_field)
<p><strong>Custom Field:</strong> {{ $custom_field }}</p>
@endif
{{-- Read More Button --}}
<a href="{{ get_permalink() }}">Read More</a>
</div>
@endwhile
@php wp_reset_postdata(); @endphp
@else
<p>No locations found.</p>
@endif
</div>—
## **🔹 How This Works**
✅ **`get_field('your_acf_field')`** → Fetches the ACF field value.
✅ **Conditional Check (`@if ($custom_field)`)** → Only displays the field if it has a value.
✅ **Uses Blade Syntax** → Keeps everything structured and readable.
—
## **🔹 Fetching Different ACF Field Types**
If your ACF field is an **image**, **URL**, or another type, use these:
### **ACF Image Field**
@php
$acf_image = get_field('acf_image_field');
@endphp
@if ($acf_image)
<img src="{{ $acf_image['url'] }}" alt="{{ $acf_image['alt'] }}">
@endif### **ACF URL Field**
@php
$acf_link = get_field('acf_link_field');
@endphp
@if ($acf_link)
<a href="{{ $acf_link }}" target="_blank">Visit Website</a>
@endif—
### **Now your Elementor widget will display ACF fields inside Sage 10 templates!** 🚀
Let me know if you need further modifications. 😊