Plugin echos text from shortcode function in gutenberg page editor

I'm creating a plugin to load custom posts by custom taxonomy (restaurant menu plugin).. I'm calling the main function (holds everything) by the add_action hook on 'init' and inside it I have another function that is using the new Wp_query to load these custom posts content.

I add a shortcode to this function and placed it in the gutenberg widget editor. The content is loading perfectly in the main restaurant menu page, however I can also see the echos in the gutenberg editor of the menu page....

What am I doing wrong?

    function benito_generate_menu_posts() {

    $args2 = array(
        'taxonomy' => 'item_type',
        'orderby' => 'name',
        'order'   => 'ASC'
    );

    $types = get_categories($args2);

    function load_post_with_tax($tax_type) {
        $args = array(
            'post_type' => 'menu',
            'tax_query' => array(
                array(
                    'taxonomy' => 'item_type',
                    'field' => 'term_id',
                    'terms' => $tax_type,
                )
            )
        );

        $query1 = new WP_query ( $args );
        while($query1->have_posts()) : $query1->the_post();
        echo '<div class="menu-thumb">';
            the_post_thumbnail( );
        echo '</div>';
        echo '<div class="menu-title">';
            the_title( );
            echo '</div>';
        echo '<div class="menu-content">';
            the_content( );
        echo '</div>';

        endwhile; 
        wp_reset_postdata(); // reset the query
    }


    foreach($types as $type) { 
         load_post_with_tax($type);
    } 





}
add_shortcode( 'get_menu_items' , 'benito_generate_menu_posts' );

I'm creating a plugin to load custom posts by custom taxonomy (restaurant menu plugin).. I'm calling the main function (holds everything) by the add_action hook on 'init' and inside it I have another function that is using the new Wp_query to load these custom posts content.

I add a shortcode to this function and placed it in the gutenberg widget editor. The content is loading perfectly in the main restaurant menu page, however I can also see the echos in the gutenberg editor of the menu page....

What am I doing wrong?

    function benito_generate_menu_posts() {

    $args2 = array(
        'taxonomy' => 'item_type',
        'orderby' => 'name',
        'order'   => 'ASC'
    );

    $types = get_categories($args2);

    function load_post_with_tax($tax_type) {
        $args = array(
            'post_type' => 'menu',
            'tax_query' => array(
                array(
                    'taxonomy' => 'item_type',
                    'field' => 'term_id',
                    'terms' => $tax_type,
                )
            )
        );

        $query1 = new WP_query ( $args );
        while($query1->have_posts()) : $query1->the_post();
        echo '<div class="menu-thumb">';
            the_post_thumbnail( );
        echo '</div>';
        echo '<div class="menu-title">';
            the_title( );
            echo '</div>';
        echo '<div class="menu-content">';
            the_content( );
        echo '</div>';

        endwhile; 
        wp_reset_postdata(); // reset the query
    }


    foreach($types as $type) { 
         load_post_with_tax($type);
    } 





}
add_shortcode( 'get_menu_items' , 'benito_generate_menu_posts' );

• plugins
• shortcode
• query
• block-editor

Share Improve this question edited Jan 11, 2019 at 16:40 Silvester Vella asked Jan 11, 2019 at 16:25 Silvester VellaSilvester Vella 1555 bronze badges 7

• Does your shortcode return it’s content? Shortcodes can’t directly produce output. – Milo Commented Jan 11, 2019 at 16:28
• mmm no it has a foreach loop at the end with contains a function call in itself.. foreach($types as $type) { load_post_with_tax($type); } – Silvester Vella Commented Jan 11, 2019 at 16:36
• and what does load_post_with_tax do? – Milo Commented Jan 11, 2019 at 16:38
• edit my post with the code :) – Silvester Vella Commented Jan 11, 2019 at 16:40
• See my first comment. – Milo Commented Jan 11, 2019 at 16:41

 |  Show 2 more comments

1 Answer 1

Sorted by: Reset to default 1

As Milo noticed, shortcodes should return content instead of echoing it. So change

while($query1->have_posts()) : $query1->the_post();
echo '<div class="menu-thumb">';
    the_post_thumbnail( );
echo '</div>';
echo '<div class="menu-title">';
    the_title( );
    echo '</div>';
echo '<div class="menu-content">';
    the_content( );
echo '</div>';

endwhile; 

to

   while($query1->have_posts()) : $query1->the_post();
        $div = '<div class="menu-thumb">';
        $div .= get_the_post_thumbnail( );
        $div .= '</div>';
        $div .= '<div class="menu-title">';
        $div .= get_the_title( );
        $div .= '</div>';
        $div .= '<div class="menu-content">';
        $div .= get_the_content( );
        $div .= '</div>';
        return $div;
   endwhile;

(replace echo with return and also anywhere there is a the_something() replace it with get_the_something() so that at the very end, it returns the whole chunk of output.)