Empty paragraphs using shortcode with html output

Hi @ghyslain,

Yeah, that’s WordPress’ doing and disabling wpautop seems the only way to prevent it from happening. The problem is, basically, that WordPress sees the HTML tags you’re using in the shortcode and for some reason tries to add paragraphs in there.

When disabling wpautop is not an option for whatever reason(s), one kinda “hackish” workaround (and I call it that because it’s not very elegant but it works) is to create a new custom shortcode that internally renders WPP’s shortcode. For example (untested):

function wp875542_custom_wpp_shortcode( $atts ) {
    $atts = shortcode_atts( array(
        'range'             => 'last30days',
        'post_type'         => 'post',
        'taxonomy'          => 'post_tag',
        'term_id'           => 53,
        'stats_views'       => 1,
        'order_by'          => 'views',
        'limit'             => 3,
        'thumbnail_width'   => 350,
        'thumbnail_height'  => 188
    ), $atts, 'wpp_custom' );

    return do_shortcode('[wpp range="' . $atts['range'] . '" post_type="' . $atts['post_type'] . '" taxonomy="' . $atts['taxonomy'] . '" term_id=' . $atts['term_id'] . ' stats_views=' . $atts['stats_views'] . ' order_by="' . $atts['order_by'] . '" limit=' . $atts['limit'] . ' thumbnail_width=' . $atts['thumbnail_width'] . ' thumbnail_height=' . $atts['thumbnail_height'] . ' wpp_start="<div class=\'autogrid has-gutter\'>" wpp_end="</div>" post_html=\'<div class="embed-guide"><h3 class="su-post-title"><a href="{url}">{text_title}</a></h3><div class="su-post-excerpt"><a href="{url}">{thumb}</a></div></div>\']');
}
add_shortcode( 'wpp_custom', 'wp875542_custom_wpp_shortcode' );

Usage:

[wpp_custom]

[wpp_custom range="last7days"]

[wpp_custom range="last7days" stats_views=0]

[wpp_custom range="last7days" stats_views=0 taxonomy="category" term_id="64"]

All of your parameters -except for the HTML-related ones, wpp_start, wpp_end and post_html– remain customizable from the post/page edit screen. With this we lose the ability to edit the HTML markup of the popular posts list from the post/page edit screen but in exchange we don’t get those pesky empty p tags.

• This reply was modified 4 years, 11 months ago by Hector Cabrera. Reason: Fixed do_shortcode
• This reply was modified 4 years, 11 months ago by Hector Cabrera. Reason: Improved wording for clarity

Hi Héctor, thank you so much for replying that fast! Your solution looks good, before I try it what do you think of that instead ? (I’m using the shortcode in a tag description that’s why I’m using term_description in add_filter below), but so far no luck, it doesn’t see to work … Am I getting close ?

function shortcode_empty_paragraph_fix( $content ) {

    // define your shortcodes to filter, '' filters all shortcodes
    $shortcodes = array('wpp');

    foreach ( $shortcodes as $shortcode ) {

        $array = array (
            '<p>[' . $shortcode => '[' .$shortcode,
            '<p>[/' . $shortcode => '[/' .$shortcode,
            $shortcode . ']</p>' => $shortcode . ']',
            $shortcode . ']<br />' => $shortcode . ']'
        );

        $content = strtr( $content, $array );
    }

    return $content;
}

add_filter( 'term_description', 'shortcode_empty_paragraph_fix' );

I would do it this way instead (untested):

function remove_all_empty_paragraphs( $content ) {

    // See: https://stackoverflow.com/a/14261024/9131961
    $content = preg_replace(
        "#<p>(\s|&nbsp;|</?\s?br\s?/?>)*</?p>#",
        "",
        $content
    );

    return $content;
}
add_filter( 'term_description', 'remove_all_empty_paragraphs' );

You could also just use CSS for this (although I’m not a big fan of this solution):

p:empty {
    display: none;
}

• This reply was modified 4 years, 11 months ago by Hector Cabrera. Reason: Fixed typo

After several attempts, I opted for remove_filter(‘term_description’, ‘wpautop’);
?? thanks for your help again !