0

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

2

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.

  • Nice on mrben! You nailed it. My theme was removing the default gallery styling using the gallery_style filter. Once removed, everything is working. Its a shame, as I didn't want to have to battle against the default styling to get it looking the way I want. Do you know of a way to cleanly remove default gallery styling without messing up the output? – Michae Pavlos Michael Jan 21 at 19:15
  • yeah I'll edit the answer for that – mrben522 Jan 21 at 20:44

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.