How to load a template partial in Elementor using a shortcode?

  • Resolved jorix

    (@jorix)


    5 years, 9 months ago

    Use case : custom content that needs to be inserted between Elementor content

    Following on this topic: https://www.ads-software.com/support/topic/custom-shortcode-in-wordpress-elementor-not-working-properly-in-editor-mode/

    What if I want to use a shortcode to return a template partial that in it’s turn does need to echo?
    I notice that the echoed content is shown at the place where I put the shortcode (good) but also at the beginning of the Elementor editor (not good). 

    /* Insert a template partial by using a shortcode in Elementor's shortcode widget */
function template_partial($atts) {
	extract(shortcode_atts(array(
		'dir' => 'template-parts',
		'name' => FALSE
	), $atts));
	if ( $name )
		return get_template_part( $dir . '/' . $name );
}
add_shortcode('partial', 'template_partial');

    Example shortcode : [partial name=”mycustomcontent”]

    • This topic was modified 5 years, 9 months ago by jorix.
    • This topic was modified 5 years, 9 months ago by jorix.
Viewing 2 replies - 1 through 2 (of 2 total)

  • I don’t know the answer, but you can try asking on Github if no one else here has an answer for you. https://github.com/elementor/elementor/

    Thread Starter jorix

    (@jorix)

    [SOLVED] The key to solve this was learning when to ‘echo’ en when to ‘return’ in PHP and using output buffering. The code below goes into functions.php

    /* LOAD CUSTOM TEMPLATE PARTIALS WITH SHORTCODE
    Insert a template partial by using a shortcode in Elementor’s shortcode widget
    ——————————————————————————- */
    add_shortcode(‘partial’, ‘template_partial’);
    function template_partial($atts) {
    extract(shortcode_atts(array(
    ‘dir’ => ‘partials’,
    ‘name’ => FALSE
    ), $atts));
    if ( $name ) {
    ob_start();
    get_template_part( $dir . ‘/’ . $name );
    return ob_get_clean();
    }
    }

    /* Then in your Elementor editor, add a shortcode widget on your page

    [partial name=”NAMEOFYOURPARTIAL” dir=”YOURPARTIALSDIRECTORY”]

    e.g. [partial name=”downloads” dir=”parts”]

    */

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘How to load a template partial in Elementor using a shortcode?’ is closed to new replies.

Tags