How to override Elementor Essentials Addons template render output
Problem
Add an Elementor field to an existing section and change the output of the Elementor Essentials Addon output, depending on the value of the field.
Case
My client asked me to add an extra field so he can choose to enable or disable the link to the Post Carousel element of the Elementor Essentials Addon Pro widget.
Solution
Step 1
We will need to hook to elementor/element/before_section_end
to add the field as a first step. Thus, we need to add some code to our child theme or custom plugin (never edit directly on a commercial or free plugin)
More info at: https://www.nitroweb.gr/how-to-override-elementor-essentials-addons-template-render-output/ | |
*/ | |
add_action( 'elementor/element/before_section_end', function( $element, $section_id, $args ) { | |
/** @var \Elementor\Element_Base $element */ | |
// put the field in the right place | |
if ( 'eael-post-carousel' === $element->get_name() && 'eael_section_post_timeline_layout' == $section_id ) { | |
$element->add_control( | |
'nitro_carousel_link_title', | |
[ | |
'type' => \Elementor\Controls_Manager::SWITCHER, // https://code.elementor.com/classes/elementor-controls_manager/ | |
'label' => __( 'Link title' ), | |
'label_on' => __( 'Yes' ), | |
'label_off' => __( 'No' ), | |
'return_value' => 'yes', | |
'default' => 'yes', | |
] | |
); |
On the above code, I am adding a “switcher” field (it’s actually a fancy checkbox) in the eael-post-carousel
element and its eael_section_post_timeline_layout
sections, by using the add_control
method.
It should look like this:
Step 2
We then need to tweak the output of the Widget, in order to add or remove the link from the title of the slide.
We can use the elementor/widget/render_content
hook for this, but we also need to use the method eael_get_query_args
of the \Essential_Addons_Elementor\Traits\Helper
trait. Thus, we need to create a class in order to use it.
}, 10, 3 ); | |
class nitro_elementor_hooks { | |
use \Essential_Addons_Elementor\Traits\Helper; | |
function __construct() { | |
// check if the eael_get_query_args Helper method exists | |
if( !method_exists( $this, 'eael_get_query_args') ) { | |
return; | |
} | |
add_action( 'elementor/widget/render_content', array( $this, 'nitro_carousel_render' ), 10, 2 ); | |
} | |
public function nitro_carousel_render( $content, $widget ) { | |
if ( 'eael-post-carousel' === $widget->get_name() ) { | |
$settings = $widget->get_settings(); | |
$args = $this->eael_get_query_args($settings); | |
if ( isset( $settings['nitro_carousel_link_title'] ) && $settings['nitro_carousel_link_title'] != 'yes' ) { | |
$query = new \WP_Query($args); | |
if ($query->have_posts()) { | |
while ($query->have_posts()) { | |
$query->the_post(); | |
$title_link = ''; | |
$title_text = ''; | |
if ($settings['eael_show_title']) { | |
$title_link .= '<a class="eael-grid-post-link" href="' . get_permalink() . '" title="' . get_the_title() . '">'; | |
if(empty($settings['eael_title_length'])) { | |
$title_text .= get_the_title(); | |
}else { | |
$title_text .= implode(" ", array_slice(explode(" ", get_the_title() ), 0, $settings['eael_title_length'])); | |
} | |
$title_link .= $title_text; | |
$title_link .= '</a>'; | |
} | |
$content = str_replace( $title_link, $title_text, $content ); | |
} | |
} | |
wp_reset_postdata(); | |
} | |
} | |
return $content; | |
} | |
} |
On the above code, I am “getting” the helper trait, add the Elementor hook, and then tweak the output to serve my needs. You can, of course, override the whole output of the widget. Finally, I call the class.
The full code via Gist:
<?php | |
/* | |
an example of how to add an extra field to an elementor section | |
and then override the ouput of the Elementor Essentials Addons template render | |
this should go to your child theme functions.php | |
More info at: https://www.nitroweb.gr/how-to-override-elementor-essentials-addons-template-render-output/ | |
*/ | |
add_action( 'elementor/element/before_section_end', function( $element, $section_id, $args ) { | |
/** @var \Elementor\Element_Base $element */ | |
// put the field in the right place | |
if ( 'eael-post-carousel' === $element->get_name() && 'eael_section_post_timeline_layout' == $section_id ) { | |
$element->add_control( | |
'nitro_carousel_link_title', | |
[ | |
'type' => \Elementor\Controls_Manager::SWITCHER, // https://code.elementor.com/classes/elementor-controls_manager/ | |
'label' => __( 'Link title' ), | |
'label_on' => __( 'Yes' ), | |
'label_off' => __( 'No' ), | |
'return_value' => 'yes', | |
'default' => 'yes', | |
] | |
); | |
} | |
}, 10, 3 ); | |
class nitro_elementor_hooks { | |
use \Essential_Addons_Elementor\Traits\Helper; | |
function __construct() { | |
// check if the eael_get_query_args Helper method exists | |
if( !method_exists( $this, 'eael_get_query_args') ) { | |
return; | |
} | |
add_action( 'elementor/widget/render_content', array( $this, 'nitro_carousel_render' ), 10, 2 ); | |
} | |
public function nitro_carousel_render( $content, $widget ) { | |
if ( 'eael-post-carousel' === $widget->get_name() ) { | |
$settings = $widget->get_settings(); | |
$args = $this->eael_get_query_args($settings); | |
if ( isset( $settings['nitro_carousel_link_title'] ) && $settings['nitro_carousel_link_title'] != 'yes' ) { | |
$query = new \WP_Query($args); | |
if ($query->have_posts()) { | |
while ($query->have_posts()) { | |
$query->the_post(); | |
$title_link = ''; | |
$title_text = ''; | |
if ($settings['eael_show_title']) { | |
$title_link .= '<a class="eael-grid-post-link" href="' . get_permalink() . '" title="' . get_the_title() . '">'; | |
if(empty($settings['eael_title_length'])) { | |
$title_text .= get_the_title(); | |
}else { | |
$title_text .= implode(" ", array_slice(explode(" ", get_the_title() ), 0, $settings['eael_title_length'])); | |
} | |
$title_link .= $title_text; | |
$title_link .= '</a>'; | |
} | |
$content = str_replace( $title_link, $title_text, $content ); | |
} | |
} | |
wp_reset_postdata(); | |
} | |
} | |
return $content; | |
} | |
} | |
new nitro_elementor_hooks(); |
- WooCommerce Products List Pro - 18 Σεπτεμβρίου, 2021
- How to override Elementor Essentials Addons template render output - 2 Ιουνίου, 2020
- Woocommerce Variations to Table – Grid - 21 Φεβρουαρίου, 2015