Elementor Project Slider Widget
User
Assistant
You can add a taxonomy selection control to your Elementor widget by modifying the `register_controls()` method. Here’s how you can add an option to choose the taxonomy (`leistung`) for filtering `projekte`:
### Updated Code:
<?php
class Elementor_ProjectSliderWidget_Widget extends ElementorWidget_Base {
public function get_name() {
return 'project_slider';
}
public function get_title() {
return esc_html__( 'Project slider', 'solaron' );
}
public function get_icon() {
return 'eicon-post-slider';
}
public function get_custom_help_url() {
return 'https://docs.abart-digital.com';
}
public function get_categories() {
return [ 'general' ];
}
public function get_keywords() {
return [ 'project' ];
}
protected function register_controls() {
$this->start_controls_section(
'content_section',
[
'label' => esc_html__( 'Settings', 'solaron' ),
'tab' => ElementorControls_Manager::TAB_CONTENT,
]
);
// Taxonomy Dropdown (Leistung)
$this->add_control(
'selected_taxonomy',
[
'label' => esc_html__( 'Select Leistung', 'solaron' ),
'type' => ElementorControls_Manager::SELECT2,
'options' => $this->get_taxonomy_options(),
'multiple' => false,
'label_block' => true,
]
);
$this->end_controls_section();
}
private function get_taxonomy_options() {
$options = [];
$terms = get_terms([
'taxonomy' => 'leistung',
'hide_empty' => false,
]);
if (!empty($terms) && !is_wp_error($terms)) {
foreach ($terms as $term) {
$options[$term->slug] = $term->name;
}
}
return $options;
}
protected function render() {
wp_reset_query();
$settings = $this->get_settings_for_display();
$selected_taxonomy = !empty($settings['selected_taxonomy']) ? $settings['selected_taxonomy'] : '';
$args = [
'post_type' => 'projekte',
'orderby' => 'date',
'order' => 'DESC',
'posts_per_page' => 9,
'post_status' => 'publish',
'paged' => 1,
'meta_query' => [
[
'key' => '_highlight',
'value' => 'yes',
'compare' => '='
]
],
];
// Add taxonomy filter if selected
if (!empty($selected_taxonomy)) {
$args['tax_query'] = [
[
'taxonomy' => 'leistung',
'field' => 'slug',
'terms' => $selected_taxonomy,
],
];
}
$query = new WP_Query($args);
if ($query->have_posts()) :
?>
<div class="swiper swiperslides">
<div class="swiper-wrapper">
<?php
while ($query->have_posts()) :
$query->the_post();
$project_id = get_the_ID();
$thumbnail_url = has_post_thumbnail() ? get_the_post_thumbnail_url(get_the_ID(), 'full') : '';
$intro_text = get_post_meta($project_id, '_intro_text', true) ?? get_the_excerpt($project_id);
?>
<div class="swiper-slide">
<div class="image-content-wrapper">
<img src="<?php echo esc_url($thumbnail_url); ?>" alt="<?php the_title(); ?>">
<div class="slide-content">
<h3><?php the_title(); ?></h3>
<p><?php echo wp_trim_words($intro_text, 15, '...'); ?></p>
<a class="project-slider-button" href="<?php the_permalink(); ?>"><?php echo __('More information', 'solaron'); ?></a>
</div>
</div>
</div>
<?php
endwhile;
?>
</div>
<div class="swiper-pagination"></div>
</div>
<?php
endif;
wp_reset_postdata();
}
}### Changes and Features:
1. **Taxonomy Dropdown (`Leistung`)**
– Added a control to allow users to select a taxonomy term (`leistung`).
– Uses `SELECT2` for better usability.
2. **Dynamic Query Filtering**
– If a user selects a `leistung` term, the projects displayed will be filtered by that taxonomy.
3. **Helper Method (`get_taxonomy_options`)**
– Fetches terms from `leistung` taxonomy and populates the dropdown.
### Result:
Now, when editing the widget in Elementor, users can select a taxonomy term (`leistung`) to filter projects accordingly. 🚀
User
also number of projects
Assistant
You can add a control to allow users to select the number of projects to display. Below is the updated code with an additional control for setting the number of projects (`posts_per_page`).
—
### **Updated Code:**
<?php
class Elementor_ProjectSliderWidget_Widget extends ElementorWidget_Base {
public function get_name() {
return 'project_slider';
}
public function get_title() {
return esc_html__( 'Project slider', 'solaron' );
}
public function get_icon() {
return 'eicon-post-slider';
}
public function get_custom_help_url() {
return 'https://docs.abart-digital.com';
}
public function get_categories() {
return [ 'general' ];
}
public function get_keywords() {
return [ 'project' ];
}
protected function register_controls() {
$this->start_controls_section(
'content_section',
[
'label' => esc_html__( 'Settings', 'solaron' ),
'tab' => ElementorControls_Manager::TAB_CONTENT,
]
);
// Number of Projects
$this->add_control(
'number_of_projects',
[
'label' => esc_html__( 'Number of Projects', 'solaron' ),
'type' => ElementorControls_Manager::NUMBER,
'min' => 1,
'max' => 20,
'step' => 1,
'default' => 9,
]
);
// Taxonomy Dropdown (Leistung)
$this->add_control(
'selected_taxonomy',
[
'label' => esc_html__( 'Select Leistung', 'solaron' ),
'type' => ElementorControls_Manager::SELECT2,
'options' => $this->get_taxonomy_options(),
'multiple' => false,
'label_block' => true,
]
);
$this->end_controls_section();
}
private function get_taxonomy_options() {
$options = [];
$terms = get_terms([
'taxonomy' => 'leistung',
'hide_empty' => false,
]);
if (!empty($terms) && !is_wp_error($terms)) {
foreach ($terms as $term) {
$options[$term->slug] = $term->name;
}
}
return $options;
}
protected function render() {
wp_reset_query();
$settings = $this->get_settings_for_display();
$selected_taxonomy = !empty($settings['selected_taxonomy']) ? $settings['selected_taxonomy'] : '';
$number_of_projects = !empty($settings['number_of_projects']) ? intval($settings['number_of_projects']) : 9;
$args = [
'post_type' => 'projekte',
'orderby' => 'date',
'order' => 'DESC',
'posts_per_page' => $number_of_projects,
'post_status' => 'publish',
'paged' => 1,
'meta_query' => [
[
'key' => '_highlight',
'value' => 'yes',
'compare' => '='
]
],
];
// Add taxonomy filter if selected
if (!empty($selected_taxonomy)) {
$args['tax_query'] = [
[
'taxonomy' => 'leistung',
'field' => 'slug',
'terms' => $selected_taxonomy,
],
];
}
$query = new WP_Query($args);
if ($query->have_posts()) :
?>
<div class="swiper swiperslides">
<div class="swiper-wrapper">
<?php
while ($query->have_posts()) :
$query->the_post();
$project_id = get_the_ID();
$thumbnail_url = has_post_thumbnail() ? get_the_post_thumbnail_url(get_the_ID(), 'full') : '';
$intro_text = get_post_meta($project_id, '_intro_text', true) ?? get_the_excerpt($project_id);
?>
<div class="swiper-slide">
<div class="image-content-wrapper">
<img src="<?php echo esc_url($thumbnail_url); ?>" alt="<?php the_title(); ?>">
<div class="slide-content">
<h3><?php the_title(); ?></h3>
<p><?php echo wp_trim_words($intro_text, 15, '...'); ?></p>
<a class="project-slider-button" href="<?php the_permalink(); ?>"><?php echo __('More information', 'solaron'); ?></a>
</div>
</div>
</div>
<?php
endwhile;
?>
</div>
<div class="swiper-pagination"></div>
</div>
<?php
endif;
wp_reset_postdata();
}
}—
### **New Features Added:**
✅ **Number of Projects Selector**:
– Users can choose how many projects they want to display (between 1 and 20).
– Default is set to **9 projects**.
✅ **Taxonomy (`Leistung`) Selection**:
– Users can filter projects by the selected taxonomy term.
✅ **Improved Query Handling**:
– The widget now dynamically applies filters based on the user's settings.
—
### **Final Result in Elementor Panel**
– Users can now **choose the number of projects** to display.
– Users can **filter projects** by taxonomy (`leistung`).
– The Swiper slider updates accordingly.
🚀 **Now your Elementor widget is fully customizable!** Let me know if you need any more tweaks. 😊
Assistant
You can add a control for the number of projects to display. Here’s an updated version of your Elementor widget with an option to select
Assistant
I've updated your Elementor widget to include a control for selecting the **number of projects** to display. Now, users can specify how many projects they want to show in the slider.
User
also number of projects
Assistant
I've updated your Elementor widget to include a control for selecting the **number of projects** to display. Now, users can specify how many projects they want to show in the slider.
### Updated Code:
<?php
class Elementor_ProjectSliderWidget_Widget extends ElementorWidget_Base {
public function get_name() {
return 'project_slider';
}
public function get_title() {
return esc_html__( 'Project slider', 'solaron' );
}
public function get_icon() {
return 'eicon-post-slider';
}
public function get_custom_help_url() {
return 'https://docs.abart-digital.com';
}
public function get_categories() {
return [ 'general' ];
}
public function get_keywords() {
return [ 'project', 'slider' ];
}
protected function register_controls() {
$this->start_controls_section(
'content_section',
[
'label' => esc_html__( 'Settings', 'solaron' ),
'tab' => ElementorControls_Manager::TAB_CONTENT,
]
);
// Taxonomy Dropdown (Leistung)
$this->add_control(
'selected_taxonomy',
[
'label' => esc_html__( 'Select Leistung', 'solaron' ),
'type' => ElementorControls_Manager::SELECT2,
'options' => $this->get_taxonomy_options(),
'multiple' => false,
'label_block' => true,
]
);
// Number of Projects Control
$this->add_control(
'posts_per_page',
[
'label' => esc_html__( 'Number of Projects', 'solaron' ),
'type' => ElementorControls_Manager::NUMBER,
'min' => 1,
'max' => 20,
'step' => 1,
'default' => 9,
]
);
$this->end_controls_section();
}
private function get_taxonomy_options() {
$options = [];
$terms = get_terms([
'taxonomy' => 'leistung',
'hide_empty' => false,
]);
if (!empty($terms) && !is_wp_error($terms)) {
foreach ($terms as $term) {
$options[$term->slug] = $term->name;
}
}
return $options;
}
protected function render() {
wp_reset_query();
$settings = $this->get_settings_for_display();
$selected_taxonomy = !empty($settings['selected_taxonomy']) ? $settings['selected_taxonomy'] : '';
$posts_per_page = !empty($settings['posts_per_page']) ? intval($settings['posts_per_page']) : 9;
$args = [
'post_type' => 'projekte',
'orderby' => 'date',
'order' => 'DESC',
'posts_per_page' => $posts_per_page,
'post_status' => 'publish',
'paged' => 1,
'meta_query' => [
[
'key' => '_highlight',
'value' => 'yes',
'compare' => '='
]
],
];
// Add taxonomy filter if selected
if (!empty($selected_taxonomy)) {
$args['tax_query'] = [
[
'taxonomy' => 'leistung',
'field' => 'slug',
'terms' => $selected_taxonomy,
],
];
}
$query = new WP_Query($args);
if ($query->have_posts()) :
?>
<div class="swiper swiperslides">
<div class="swiper-wrapper">
<?php
while ($query->have_posts()) :
$query->the_post();
$project_id = get_the_ID();
$thumbnail_url = has_post_thumbnail() ? get_the_post_thumbnail_url(get_the_ID(), 'full') : '';
$intro_text = get_post_meta($project_id, '_intro_text', true) ?? get_the_excerpt($project_id);
?>
<div class="swiper-slide">
<div class="image-content-wrapper">
<img src="<?php echo esc_url($thumbnail_url); ?>" alt="<?php the_title(); ?>">
<div class="slide-content">
<h3><?php the_title(); ?></h3>
<p><?php echo wp_trim_words($intro_text, 15, '...'); ?></p>
<a class="project-slider-button" href="<?php the_permalink(); ?>"><?php echo __('More information', 'solaron'); ?></a>
</div>
</div>
</div>
<?php
endwhile;
?>
</div>
<div class="swiper-pagination"></div>
</div>
<?php
endif;
wp_reset_postdata();
}
}### Changes and Features:
1. **Added Control for Number of Projects**
– Users can now set the number of projects displayed in the slider using Elementor settings.
– Minimum: 1, Maximum: 20, Default: 9.
2. **Dynamic Query Filtering**
– Filters projects by the selected taxonomy (`leistung`).
– Displays the specified number of projects.
Now, your Elementor widget allows users to control both the **taxonomy filter** and the **number of projects displayed**. 🚀 Let me know if you need further tweaks!
User
also for meta query
'meta_query' =>array(
array('key' => '_highlight',
'value' => 'yes',
'compare' => '=')
'meta_query' =>array(
array('key' => '_highlight',
'value' => 'yes',
'compare' => '=')
)
give option to select highlifght yes or no
Assistant
I've updated your Elementor widget to include an option for selecting whether to filter projects by the `_highlight` meta field (`yes` or `no`). Now, users can control this filter directly from the Elementor settings.
—
### **Updated Code:**
<?php
class Elementor_ProjectSliderWidget_Widget extends ElementorWidget_Base {
public function get_name() {
return 'project_slider';
}
public function get_title() {
return esc_html__( 'Project slider', 'solaron' );
}
public function get_icon() {
return 'eicon-post-slider';
}
public function get_custom_help_url() {
return 'https://docs.abart-digital.com';
}
public function get_categories() {
return [ 'general' ];
}
public function get_keywords() {
return [ 'project', 'slider' ];
}
protected function register_controls() {
$this->start_controls_section(
'content_section',
[
'label' => esc_html__( 'Settings', 'solaron' ),
'tab' => ElementorControls_Manager::TAB_CONTENT,
]
);
// Taxonomy Dropdown (Leistung)
$this->add_control(
'selected_taxonomy',
[
'label' => esc_html__( 'Select Leistung', 'solaron' ),
'type' => ElementorControls_Manager::SELECT2,
'options' => $this->get_taxonomy_options(),
'multiple' => false,
'label_block' => true,
]
);
// Number of Projects Control
$this->add_control(
'posts_per_page',
[
'label' => esc_html__( 'Number of Projects', 'solaron' ),
'type' => ElementorControls_Manager::NUMBER,
'min' => 1,
'max' => 20,
'step' => 1,
'default' => 9,
]
);
// Highlight Filter Control
$this->add_control(
'highlight_filter',
[
'label' => esc_html__( 'Filter by Highlight', 'solaron' ),
'type' => ElementorControls_Manager::SELECT,
'options' => [
'' => esc_html__( 'Show All', 'solaron' ),
'yes' => esc_html__( 'Only Highlighted', 'solaron' ),
'no' => esc_html__( 'Only Non-Highlighted', 'solaron' ),
],
'default' => '',
]
);
$this->end_controls_section();
}
private function get_taxonomy_options() {
$options = [];
$terms = get_terms([
'taxonomy' => 'leistung',
'hide_empty' => false,
]);
if (!empty($terms) && !is_wp_error($terms)) {
foreach ($terms as $term) {
$options[$term->slug] = $term->name;
}
}
return $options;
}
protected function render() {
wp_reset_query();
$settings = $this->get_settings_for_display();
$selected_taxonomy = !empty($settings['selected_taxonomy']) ? $settings['selected_taxonomy'] : '';
$posts_per_page = !empty($settings['posts_per_page']) ? intval($settings['posts_per_page']) : 9;
$highlight_filter = !empty($settings['highlight_filter']) ? $settings['highlight_filter'] : '';
$args = [
'post_type' => 'projekte',
'orderby' => 'date',
'order' => 'DESC',
'posts_per_page' => $posts_per_page,
'post_status' => 'publish',
'paged' => 1,
];
// Add taxonomy filter if selected
if (!empty($selected_taxonomy)) {
$args['tax_query'] = [
[
'taxonomy' => 'leistung',
'field' => 'slug',
'terms' => $selected_taxonomy,
],
];
}
// Add meta query for highlighting
if ($highlight_filter === 'yes' || $highlight_filter === 'no') {
$args['meta_query'] = [
[
'key' => '_highlight',
'value' => $highlight_filter,
'compare' => '=',
],
];
}
$query = new WP_Query($args);
if ($query->have_posts()) :
?>
<div class="swiper swiperslides">
<div class="swiper-wrapper">
<?php
while ($query->have_posts()) :
$query->the_post();
$project_id = get_the_ID();
$thumbnail_url = has_post_thumbnail() ? get_the_post_thumbnail_url(get_the_ID(), 'full') : '';
$intro_text = get_post_meta($project_id, '_intro_text', true) ?? get_the_excerpt($project_id);
?>
<div class="swiper-slide">
<div class="image-content-wrapper">
<img src="<?php echo esc_url($thumbnail_url); ?>" alt="<?php the_title(); ?>">
<div class="slide-content">
<h3><?php the_title(); ?></h3>
<p><?php echo wp_trim_words($intro_text, 15, '...'); ?></p>
<a class="project-slider-button" href="<?php the_permalink(); ?>"><?php echo __('More information', 'solaron'); ?></a>
</div>
</div>
</div>
<?php
endwhile;
?>
</div>
<div class="swiper-pagination"></div>
</div>
<?php
endif;
wp_reset_postdata();
}
}—
### **New Features & Changes:**
1. **Added `Filter by Highlight` Option**
– Users can now filter projects based on the `_highlight` meta field.
– Options:
– **Show All** (default): No filtering applied.
– **Only Highlighted**: Shows only projects where `_highlight` is set to `yes`.
– **Only Non-Highlighted**: Shows only projects where `_highlight` is set to `no`.
2. **Meta Query Implementation**
– The `_highlight` meta query is added dynamically based on the selected option.
3. **Fully Customizable Elementor Widget**
– Users can control:
– The **taxonomy** (Leistung) filter.
– The **number of projects** displayed.
– The **highlight filter** (Yes/No).
—
Now, your Elementor widget is **fully flexible**, allowing users to filter projects dynamically via Elementor's settings. 🚀 Let me know if you need further improvements!