WordPress Custom Shortcode Conflicting with Media Library

The question:

I have written a small function that displays a Custom Post Type called Testimonials (in my case) using a shortcode.

The Shortcode runs properly. But I noticed 1 major problem with that.

My WordPress Media library doesn’t show up/loads once the Shortcode function is called.

As soon as I remove the Shortcode Function it works.

I tried WP_DEBUG to see if there is an error but it does not show anything.

Also, checked php_error log, apache_error log, there is nothing that can help me.

I then went to Site Health option and there I see

“The REST API did not behave correctly” “The REST API did not process
the context query parameter correctly”

Here is the custom shortcode function –

<!-- Shortcode display testimonials-->
<?php

function display_testimonials()
{
    ?><div class="owl-carousel owl-theme">
    <?php
    $args = array(
        'post_type' => 'testimonials',
        'post_status' => 'published',

    );
    $testimonials = new WP_Query($args);

    if($testimonials->have_posts()):while($testimonials->have_posts()):$testimonials->the_post();
    ?>

    <div class="item testimonial_box">
    <div class="testimonial_1box">
        <span class="testimonial_stars"><?php $stars = get_field('stars'); echo $stars;?></span>

        <span class="testimonial_content"><?php the_content();?></span>
        <h4 class="testimonial_title"><?php the_title();?></h4>

    </div>

        <div class="testimonial_2box">
            <figure class="figure_testimonial_image">
                <img class="testimonial_image" src="<?php the_post_thumbnail();?>
            </figure>
        </div>
    </div>



    <?php endwhile; else: ?>

<p>Sorry, there are no posts to display Lavede</p>

<?php endif;?>


</div>
<?php

wp_reset_postdata();


}

function testimonial_shortcode()
{
    add_shortcode('TestimonialITW', 'display_testimonials');
}

add_action('init', 'testimonial_shortcode');

The Solutions:

Below are the methods you can try. The first solution is probably the best. Try others if the first one doesn’t work. Senior developers aren’t just copying/pasting – they read the methods carefully & apply them wisely to each case.

Method 1

First, I’m assuming you put the code in the theme functions.php file, and if so, then there should be no direct output echoed in that file:

  • Good:

    <?php // Assume this is wp-content/themes/your-theme/functions.php
    function some_func() {
        echo 'This is a good output; it's not a direct output coming from the file.';
        echo 'The output is only displayed when you call the function - some_func().';
    }
    
  • Bad:

    <!-- This is a HTML comment and it's a sample direct output. -->
    <?php // Assume this is wp-content/themes/your-theme/functions.php
    function some_func() {
        echo 'This is a good output; it's not a direct output coming from the file.';
        echo 'The output is only displayed when you call the function - some_func().';
    }
    

Secondly, the Site Health performs a test to check if the REST API is accessible (or working good) and if it’s not, which could be because of invalid response, then you’d see the error “The REST API did not behave correctly“. And that’s most likely what’s happening in your case because you got that <!-- Shortcode display testimonials--> at the top of the file (i.e. your functions.php file). So remove that comment and the error should be gone.

Apart from that, another issue in your code is that you need to make sure your shortcode is returning the output and not echoing it. If you echo it, then the output would be displayed at the wrong place (i.e. not where you put the [TestimonialITW] in the post content) and when you update a post having the shortcode, you’d likely see an error that says “Updating failed. Error message: The response is not a valid JSON response.” — because the response contains the output from your shortcode (e.g. HTML tags like the <div class="owl-carousel owl-theme">).

But if you need to echo it, you can use output buffering:

function testimonial_shortcode()
{
    ob_start();             // turn on output buffering
    display_testimonials(); // put the output to the buffer
    return ob_get_clean();  // capture and return the buffer
}
add_shortcode( 'TestimonialITW', 'testimonial_shortcode' );

And that would replace the following:

function testimonial_shortcode()
{
    add_shortcode('TestimonialITW', 'display_testimonials');
}

add_action('init', 'testimonial_shortcode');

Additionally, unless you have registered a custom post status named published, that 'post_status' => 'published' should be 'post_status' => 'publish'.


All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

Leave a Comment