skip to Main Content

I assembled a WordPress shortcode but it throws an error in the block editor: "Updating failed. The response is not a valid JSON response." Notwithstanding, the edits are saved. I’ve been told the reason I get the error is my "shortcode handler function is generating output. Such functions must collect all output into a variable which is returned."

Below are (1) the code that works but causes the error message and (2) my pseudo code to fix the problem by assigning the ‘a href’ to a variable $html, but doesn’t.

(1)

function make_header() {
$args = array(
    'posts_per_page' => 1,
    'category_name' => 'headlines',
);
$q = new WP_Query( $args);

if ( $q->have_posts() ) {
    while ( $q->have_posts() ) {
    $q->the_post();        
    $featured_img_url = get_the_post_thumbnail_url(get_the_ID(),'full');
    ?>
    <a href="<?php the_permalink() ?>">
    <div><img src="<?php echo $featured_img_url; ?>" width="100%" /></div>
    <h2>
    <?php the_title(); ?>
    </h2></a>
<?php
    }
    wp_reset_postdata();
}
}
add_shortcode('make_header', 'make_header');

(2)

$html = '
<a href="<?php the_permalink() ?>">
    <div><img src="<?php echo $featured_img_url; ?>" width="100%" /></div>
    <h2>
    <?php
        the_title(); ?> </h2></a>';
    }
    wp_reset_postdata();
    return $html;

Thanks for your help.

2

Answers


  1. Try below code

    $html = ' <a href="'.the_permalink() .'"> <div><img src="'. echo $featured_img_url .'" width="100%" /></div> <h2>'. the_title().' </h2></a>';
    

    the concatenation operator (‘.‘), which returns the concatenation of its right and left arguments. 

    Login or Signup to reply.
  2. You could to use concatenation like so:

    $html = '<a href="' . esc_url(get_the_permalink()) . '">';
    $html .= '<div>';
    $html .= '<img src="' . $featured_img_url . '" width="100%" />';
    $html .= '</div>';
    $html .= '<h2>' . get_the_title() . '</h2></a>';
    

    Also, use get_the_permalink() and get_the_title() as these functions are returning their result instead of outputting it.

    The full code would then look something like this:

    function make_header() {
        $html = '';
        $args = array(
            'posts_per_page' => 1,
            'category_name' => 'headlines',
        );
        $q = new WP_Query( $args);
        
        if ( $q->have_posts() ) {
            while ( $q->have_posts() ) {
                $q->the_post();
                $featured_img_url = esc_url(get_the_post_thumbnail_url(get_the_ID(),'full'));
    
                $html = '<a href="' . esc_url(get_the_permalink()) . '">';
                $html .= '<div>';
                $html .= '<img src="' . $featured_img_url . '" width="100%" />';
                $html .= '</div>';
                $html .= '<h2>' . get_the_title() . '</h2></a>';
            }
            wp_reset_postdata();
        }
    
        return $html;
    }
    add_shortcode('make_header', 'make_header');
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search