Display Tags and Author image

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.

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

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.

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

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!

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!

• This reply was modified 3 years, 7 months ago by SchweizerSchoggi.

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).

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!

Dear Héctor
I would like to (or better: need to) add some additional info to the existing content but I am currently failing because of my poor PHP knowledge ??

This part of the existing shorttcode
<p class="post_date-created post_cat-icon">{date}</p>

has to be replaced with something like this
<p class="post_date-and-actions"><span class="post_date">'. get_the_time("F j, Y") .'</span><span class="post_actions">'. (int)$post_custom['Likes'][0] .' <i class="fal fa-thumbs-up"></i> '. get_comments_number(get_the_ID()) .' <i class="fal fa-comment"></i></span></p>

How do I write it the correct way? I am really struggeling big way…

Thank you for any hint!
Schoggi

• This reply was modified 3 years, 4 months ago by SchweizerSchoggi.

Hi @schweizerschoggi,

To display the comments count, replace '. get_comments_number(get_the_ID()) .' with {comments}, then add stats_comments=1 to your shortcode.

What’s $post_custom['Likes'][0] exactly? ??

Hi @hcabrera i really need help with your plugin, I want to add a Template Parameter in on my page but I want the themes to appear as the Cardview theme on the widgets. How can this be achieved using the parameter

<?php
$args = array(
  'range' => 'last7days',
  'freshness' => 1
);
wpp_get_mostpopular($args);
?>

Best Regards