get_post() containing gallery is outputting an unmatched closing div at the end of the content

Question

I have created a custom page with fetches content from various posts using get_post(id).

I fetch the posts using this function:-

function get_my_post($id){ 
    $get_post = get_post($id);
    $content = apply_filters('the_content', $get_post->post_content);
    echo $content;
}

However, the output seemed to be breaking the DOM. After some investigation, I realized the posts containing a gallery shortcode had a lone closing div at the end of the content, without a matching opening div. For example, the echoed output from one of the posts containing a gallery looks like this:-

<figure class='gallery-item'>
    <div class='gallery-icon landscape'>
        <img width="700" height="469" src="https://testsite.com/wp-content/uploads/DSC_0668-700x469.jpg" class="attachment-medium size-medium" alt="" srcset="https://testsite.com/wp-content/uploads/DSC_0668-700x469.jpg 700w, https://testsite.com/wp-content/uploads/DSC_0668-768x514.jpg 768w, https://testsite.com/wp-content/uploads/DSC_0668-1000x669.jpg 1000w, https://testsite.com/wp-content/uploads/DSC_0668-400x268.jpg 400w, https://testsite.com/wp-content/uploads/DSC_0668.jpg 1600w" sizes="(max-width: 700px) 100vw, 700px" />
    </div>
</figure>
<figure class='gallery-item'> 
    <div class='gallery-icon landscape'> 
        <img width="700" height="469" src="https://testsite.com/wp-content/uploads/DSC_0251-700x469.jpg" class="attachment-medium size-medium" alt="" srcset="https://testsite.com/wp-content/uploads/DSC_0251-700x469.jpg 700w, https://testsite.com/wp-content/uploads/DSC_0251-768x514.jpg 768w, https://testsite.com/wp-content/uploads/DSC_0251-1000x669.jpg 1000w, https://testsite.com/wp-content/uploads/DSC_0251-400x268.jpg 400w, https://testsite.com/wp-content/uploads/DSC_0251.jpg 1600w" sizes="(max-width: 700px) 100vw, 700px" /> 
    </div>
</figure>
<figure class='gallery-item'> 
    <div class='gallery-icon landscape'> 
        <img width="700" height="469" src="https://testsite.com/wp-content/uploads/DSC_0192-700x469.jpg" class="attachment-medium size-medium" alt="" srcset="https://testsite.com/wp-content/uploads/DSC_0192-700x469.jpg 700w, https://testsite.com/wp-content/uploads/DSC_0192-768x514.jpg 768w, https://testsite.com/wp-content/uploads/DSC_0192-1000x669.jpg 1000w, https://testsite.com/wp-content/uploads/DSC_0192-400x268.jpg 400w, https://testsite.com/wp-content/uploads/DSC_0192.jpg 1600w" sizes="(max-width: 700px) 100vw, 700px" /> 
    </div>
</figure> 
</div>

As you can see, there is an unmatched closing div at the end that shouldn't be there - which messes up the DOM.

Here is the content of the post that outputs the above:-

[gallery link="none" size="medium" columns="3" ids="79,78,75"]

If I remove the gallery shortcodes, all other types of content work fine. And if I echo the content raw without the_content filter, that works - although obviously this echos the gallery shortcode unrendered. But applying the filter to the gallery gives me this lone div.

Does anybody have any ideas as to what might be happening?

Thanks for your time

Answer 1

If you look at the gallery shortcode function the opening div (to match that closer you're missing) looks like this:

$gallery_div = "<div id='$selector' class='gallery galleryid-{$id} gallery-columns-{$columns} gallery-size-{$size_class}'>";

then this filter is run

$output = apply_filters( 'gallery_style', $gallery_style . $gallery_div );

More than likely there's code somewhere in your theme or a plugin that's messing with the gallery_style filter and that's your culprit.

Here's the proper way to remove the gallery styles. Directly above the previous code is this:

/**
     * Filters whether to print default gallery styles.
     *
     * @since 3.1.0
     *
     * @param bool $print Whether to print default gallery styles.
     *                    Defaults to false if the theme supports HTML5 galleries.
     *                    Otherwise, defaults to true.
     */
    if ( apply_filters( 'use_default_gallery_style', ! $html5 ) ) {
        $gallery_style = "

So you just need to force that filter to return false, like so:

add_filter( 'use_default_gallery_style', '__return_false');

then get rid of the filter function your theme is adding that wipes out the styles and the opening div.