WordPress custom shortcode breaks saving process (post.php)

Question

I'm experiencing a strange issue with shortcodes in WordPress. When I save the page while the shortcode is added, it redirects me to wp-admin/post.php and shows me a white page with the results of the shortcode in html format (see screenshot 1). Luckily, all the editing is saved.

The funny thing is that I've done this a dozen times with the exact same method. But for a short while now it doesn't work anymore.

I do hope you see the issue and know what we can do to fix it.

Screenshot 1

The PHP code that I'm using is added to the functions.php

The shortcode that I'm using is [showblog cat="planning" number=4]

function showblog_func( $atts ) {
    $atts = shortcode_atts([
        'number'    => '-1',
        'cat'       => '',
    ], $atts, 'showblog' );

    $numberposts = $atts['number'];
    $categorie = $atts['cat'];

    //args
    $args = array(
        'post_type'         => 'post',
        'posts_per_page'    => $numberposts,
        'order'             => 'ASC',
    );

    if($categorie != ""){
        $args = array(
            'post_type'         => 'post',
            'posts_per_page'    => $numberposts,
            'category_name'     => $categorie,
            'order'             => 'ASC',
        );
    }

    // The Query
    $the_query2 = new WP_Query( $args );

    // The Loop
    if ( $the_query2->have_posts() ) {
        echo '<ul class="blog-list clearfix">';
        while ( $the_query2->have_posts() ) {
            $the_query2->the_post();

            echo '<li class="blog-block">';
            echo '  <div class="blog-info">';
            echo '    <h4>'.get_the_title().'</h4>';
            echo '    <p>'.get_the_excerpt().'</p>';
            echo '    <a href="'.get_the_permalink().'" class="blog-button">Read full post</a>';
            echo '  </div>';
            echo '</li>';
        }
        echo '</ul>';
        /* Restore original Post Data */
        wp_reset_postdata();
    } else {
        // no posts found
    }
}
add_shortcode( 'showblog', 'showblog_func' );

Answer 1

It's solved by adding ob_start(); right after the first <?php tag.

Answer 2

You can't echo the shortcode HTML.

You need to bind HTML in variable and then return this HTML from shortcode..

Please check the code below

function _login_popup() {

    $html = '<form id="user-login-form" method="post" action="#" class="js-form-redirect js-form-action" novalidate="">
               <div class="floating-label form-group">
                  <input id="useremail" name="user_name" required="" value="" type="email">
                  <label for="useremail">Email</label>
               </div>
               <div class="floating-label form-group">
                  <input id="userpassword" name="password" required="" value="" type="password">
                  <label for="userpassword">Password</label>
               </div>
               <div class="o-form__buttons text-right --small-center">
                  <button type="submit" id="submit_login" class="a-button-form --save a-no-before" value="edit">Sign in</button>
               </div>
      </form>';

return $html;
}
add_shortcode('yg-login-popup', '_login_popup');

Answer 3

I had the same and found the way to fix just add ob_start(); before html start and ob_get_clean(); to end like this

function form_creation(){
  ob_start(); 
?>
    <form>
    First name: <input type="text" name="firstname"><br>
    Last name:  <input type="text" name="lastname"><br>
    Message:    <textarea name="message"> Enter text here...</textarea>
    </form>
<?php
  return ob_get_clean();
}
add_shortcode('test', 'form_creation');