Support » Plugin: WordPress Popular Posts » Empty paragraphs using shortcode with html output

  • Resolved Ghyslain

    (@ghyslain)


    Hi, I’m using the shortcode with html output, but I’m getting empty paragraphs on publication even if I remove empty spaces between my regular html and my shortcode, this is my code :

    
    <div class="row-fluid">
    <div class="span12">
    [wpp 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" stats_views="0" 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>']
    </div>
    </div>
    

    Is there a way to fix that and to avoid editing functions.php with remove_filter(‘the_content’, ‘wpautop’); ?

Viewing 4 replies - 1 through 4 (of 4 total)
  • Plugin Author Héctor Cabrera

    (@hcabrera)

    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 1 month, 1 week ago by Héctor Cabrera. Reason: Fixed do_shortcode
    • This reply was modified 1 month, 1 week ago by Héctor 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' );
    
    
    Plugin Author Héctor Cabrera

    (@hcabrera)

    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 1 month, 1 week ago by Héctor Cabrera. Reason: Fixed typo

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

Viewing 4 replies - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.