Support » Plugin: WordPress Popular Posts » Display Tags and Author image

  • Resolved SchweizerSchoggi

    (@schweizerschoggi)


    Good morning!

    I have just installed your amazing plugin yesterday and it’s more or less ready to go live. I would just need to have two more details to be displayed in the result set.
    Maybe these are already available and I just didn’t find them in the description. Or these are not available at the moment and there could be an easy addition to function.php or whatever (I am not very familar with PHP and WP development at all, so please excuse my if I am asking or describing something stupid…).

    One thing that’s missing for our page is to display the tags that are associated with the post. I would have guessed that this information is something that is already accessible somehow?

    The other thing I am hoping for is to display the authors avatar image.
    In our template files I am doing it with this code:
    get_avatar( get_the_author_meta( ‘ID’ ), ”, ”, ”, [ ‘extra_attr’ => ‘itemprop=”image”‘ ] )

    Is there a chance to display this image as well (from inside the shortcode, which ich important for us to use)?

    Thanks for reviewing and I would be very glad if one can help with these remaining problems.

    Regards
    Schoggi

    PS: Let me add my current shortcode
    [wpp stats_views=0 stats_date=1 stats_author=1 limit=3 cat='-3' excerpt_by_words=1 excerpt_length=20 thumbnail_width=350 thumbnail_height=250 wpp_start='<div class="brick_list">' wpp_end='</div>' post_html='<div class="brick_item" onclick="location.href={url}"><div class="brick_item-image">{thumb_img}</div><div class="brick_item-header text-left"><p class="post_date-created post_cat-icon">{date}</p><h4><a href="{url}">{text_title}</a></h4></div><div class="brick_item-body"><span class="wpp-excerpt">{summary}</span></div><div class="brick_item-footer"><div class="author_infobox"><span class="author_name d-inline-block">{author}</span></div></div></div>']

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

    (@hcabrera)

    Hi @schweizerschoggi,

    In your specific case I think the best way to go about it is to register custom Content Tags via the wpp_parse_custom_content_tags filter hook (I know you’re not an experienced developer, don’t worry, I’ll explain things next).

    In WordPress, a filter hook is a function that allows you to change the value of something (eg. a variable) before it gets used somewhere (this is a very simple explanation, check The Beginner’s Guide to WordPress Actions and Filters to learn more about it if you’re curious). That’s what the wpp_parse_custom_content_tags filter hook does: it allows you to register new Content Tags so you can use them later on somewhere in your custom HTML code.

    Oh, Content Tags are a WordPress Popular Posts exclusive thing by the way. It’s not a WordPress feature. Content Tags, like {url}, {thumb_img}, etc. are pretty much WPP’s own shortcodes: the plugin will replace these tags with actual content when rendering the popular posts list on the screen.

    Anyways, back on topic: we’re going to leverage on the power of WPP’s wpp_parse_custom_content_tags filter hook to create two new Content Tags:

    • One to render post tags (eg. {tags}).
    • One to render the author’s profile picture (eg. {avatar}).

    Without further ado:

    /**
     * Parses custom content tags in WordPress Popular Posts.
     *
     * @param  string  $html    The HTML markup from the plugin.
     * @param  integer $post_id The post/page ID.
     * @return string
     */
    function wpp_parse_tags_in_popular_posts( $html, $post_id ){
    
        // Replace custom content tag {tags} with a actual
        // post tags
        if ( false !== strpos($html, '{tags}') ) {
            $tags = '';
            $tags_separator = ', ';
    
            // Get the post tags
            $tags_arr = get_the_tags( $post_id );
    
            if ( $tags_arr ) {
                foreach ( $tags_arr as $tag ) {
                    $tags .= '<a href="' . esc_attr( get_tag_link( $tag->term_id ) ) . '">' . __( $tag->name ) . '</a>' . $tags_separator;
                }
    
                $tags = trim( $tags, $tags_separator );
            }
    
            // Replace {tags} with the value of $tags
            $html = str_replace( '{tags}', $tags, $html );
        }
    
        // Replace custom content tag {avatar} with a actual
        // author avatar
        if ( false !== strpos($html, '{avatar}') ) {
            // Get the author ID
            $author_id = get_post_field( 'post_author', $post_id );
            // Get the avatar
            $avatar = get_avatar( $author_id, '', '', '', [ 'extra_attr' => 'itemprop="image"' ] );
    
            // Replace {avatar} with the value of $avatar
            $html = str_replace( '{avatar}', $avatar, $html );
        }
    
        return $html;
    
    }
    add_filter( "wpp_parse_custom_content_tags", "wpp_parse_tags_in_popular_posts", 10, 2 );

    Add the above code to your theme’s functions.php file and you’ll be able to use {tags} and {avatar} in your HTML code.

    Thread Starter SchweizerSchoggi

    (@schweizerschoggi)

    Your help is awesome @hcabrera !! Thank you so far, I will definitly pay you a few coffees for this!

    Your description is great, although I don’t understand that much of php I was able to follow and adjust the code to my needs.

    Now there is only one question left on this topic:
    can I hide tags that have a specific id? It just came to my mind when I tested the code.
    Sample: I would like to hide the tag “Test 1”, its ID is 1.
    Sample

    Plugin Author Héctor Cabrera

    (@hcabrera)

    Thank you so far, I will definitly pay you a few coffees for this!

    You’re welcome, and thank you for the donation! I really appreciate it!

    can I hide tags that have a specific id?

    To exclude a specific tag ID you can change the foreach loop to something like this:

    foreach ( $tags_arr as $tag ) {
        // Exclude tag ID 1
        if ( 1 == $tag->term_id )
            continue;
    
        $tags .= '<a href="' . esc_attr( get_tag_link( $tag->term_id ) ) . '">' . __( $tag->name ) . '</a>' . $tags_separator;
    }

    When we use continue; in a foreach loop it will skip executing the code below and jump to the next item, effectively excluding the tag ID 1 from being rendered on screen.

    Thread Starter SchweizerSchoggi

    (@schweizerschoggi)

    Amazing, works like a charm now!

    Btw.. still impressed about your outstanding support.
    Not only offering a quick solution, but also describing what you’re doing and why!

    Don’t you offer WP lessons or better “PHP for WP” lessons at Udemy or somewhere else?
    I would go and book directly!

    Have a wonderful evening – you definitly saved my day when I was stuck!
    Schoggi

    Plugin Author Héctor Cabrera

    (@hcabrera)

    Amazing, works like a charm now!

    Glad you were able to sort it out!

    Btw.. still impressed about your outstanding support.
    Not only offering a quick solution, but also describing what you’re doing and why!

    Thank you!

    Don’t you offer WP lessons or better “PHP for WP” lessons at Udemy or somewhere else?
    I would go and book directly!

    I have considered the idea, yes, but since I’m a full time developer I hardly have the time to even complete the Udemy courses I have bought haha. I might start uploading courses someday though, who knows?

    Have a wonderful evening – you definitly saved my day when I was stuck!

    It’s still mid-day over here but thanks anyways 😛 Have a great evening!

    Thread Starter SchweizerSchoggi

    (@schweizerschoggi)

    Good morning Héctor
    May I add one more question?

    post_html='<div class=”brick_item” onclick=”window.location.href={url}”> … content … </div>’

    This does not seem to work for me. I already tried to escape the sequence =>
    post_html='<div class=”brick_item” onclick=”window.location.href=\'{url}\'”> … content … </div>’

    but no success. It is not even displaying the onclick part at all. Everything behind that tag (also content that is included in that div) is being displayed fine. But the onclick notation does not appear.

    Any idea why this is happening?

    Have a great day!

    Plugin Author Héctor Cabrera

    (@hcabrera)

    Any idea why this is happening?

    Yep, the plugin is actively removing all inline JavaScript code (including onclick attributes) from the shortcode for security reasons.

    You can either wrap the div tag with a link tag, like this for example:

    post_html='<a href="{url}"><div class="brick_item"> … content … </div></a>'

    … or you can handle the “onclick” event in a JavaScript file (eg. main.js), like this for example:

    jQuery(function(){
        jQuery('.brick-item').on('click', function(e) {
            e.preventDefault();
    
            let url = $(this).data('url');
            window.location.href = url;
        });
    });

    and then you change post_html to:

    post_html='<div class="brick_item" data-url="{url}"> … content … </div>'

    If your theme already uses a JavaScript file to handle events then you can put the code from above there. Otherwise you’d need to add this JavaScript file to your theme, like this for example: How to correctly enqueue stylesheets and script files in WordPress (a bit of a long read but if you’re unfamiliar with enqueueing files in WordPress then it’ll definitely help).

    Thread Starter SchweizerSchoggi

    (@schweizerschoggi)

    Yep, the plugin is actively removing all inline JavaScript code (including onclick attributes) from the shortcode for security reasons.

    Ahh, I see! No problem, just good to know. I’m using the data- attribute now, that’s the best option in my opinion. Thx!

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