Issue with updating page after adding shortcode

Question

I'm using WP bakery(visual composer) for building a website for a client. I have created a custom post type and a categories for it. My main goal is to display categories of this post type on a page. I created a shortcode in function.php in a child theme and it works fine but the issues is that every time I click 'Update' button inside dashboard I receive this errors

Warning: Cannot modify header information - headers already sent by (output started at /home/sites/1b/f/f70a404958/public_html/wp-content/themes/salient-child/functions.php:38) in /home/sites/1b/f/f70a404958/public_html/wp-admin/post.php on line 231

Warning: Cannot modify header information - headers already sent by (output started at /home/sites/1b/f/f70a404958/public_html/wp-content/themes/salient-child/functions.php:38) in /home/sites/1b/f/f70a404958/public_html/wp-includes/pluggable.php on line 1416

Warning: Cannot modify header information - headers already sent by (output started at /home/sites/1b/f/f70a404958/public_html/wp-content/themes/salient-child/functions.php:38) in /home/sites/1b/f/f70a404958/public_html/wp-includes/pluggable.php on line 1419

Here is a code that I'm using for shortcode

add_shortcode( 'holiday-taxonomy', 'wpc_shortcode_holiday_taxonomy' );
function wpc_shortcode_holiday_taxonomy(){?>
<section class="holidays__categories">
    <ul class="holidays__categories-list">
        <?php
        $terms = get_terms([
            'taxonomy'   => 'holidays_category',
            'hide_empty' => false,
        ]);
        foreach ($terms as $term) :
            $image_url = get_field('featured_image', $term->taxonomy . '_' . $term->term_id);
            ?>
            <li class="holidays__categories-item" style="background-image: url('<?= $image_url; ?>')">
                <a class="button-yellow" href="<?= get_term_link((int)$term->term_id); ?>"><?= $term->name; ?></a>
            </li>
        <?php
        endforeach;
        ?>
    </ul>
</section>

your shortcode function should *return* the string it outputs, not echo or output it. — IT goldman, Nov 10 '22 at 20:03

OGP_A · Answer 1 · 2022-11-10T20:08:33.450

Your shortcode method should return the HTML content instead of outputing it.

See the official documentation about it : https://codex.wordpress.org/Shortcode_API

There is a working version of your posted code :

<?php
add_shortcode( 'holiday-taxonomy', 'wpc_shortcode_holiday_taxonomy' );
function wpc_shortcode_holiday_taxonomy(){
    ob_start();
?>
<section class="holidays__categories">
    <ul class="holidays__categories-list">
        <?php
        $terms = get_terms([
            'taxonomy'   => 'holidays_category',
            'hide_empty' => false,
        ]);
        foreach ($terms as $term) :
            $image_url = get_field('featured_image', $term->taxonomy . '_' . $term->term_id);
            ?>
            <li class="holidays__categories-item" style="background-image: url('<?= $image_url; ?>')">
                <a class="button-yellow" href="<?= get_term_link((int)$term->term_id); ?>"><?= $term->name; ?></a>
            </li>
        <?php
        endforeach;
        ?>
    </ul>
</section>
<?php
    return ob_get_clean();
}
?>

Issue with updating page after adding shortcode

1 Answers1