How to have two different popular posts widgets and style each differently?

Hi there!

I’m a little bit confused by your choice of words ??

When you say “style”, are you talking about CSS or you mean customizing the HTML output? If it’s CSS, you don’t necessarily need to use WPP’s filters – unless you are also planning to modify WPP’s HTML output.

Yes, sorry, I mean the HTML. For example:

* First widget, I’d to display the post image at a large size on the first story only.
* Second widget, I’d like to display smaller images for each story.

Ah, good question!

I was somehow convinced that the $instance variable included in it the widget ID which would make identifying each instance quite easy. As it turns out, it doesn’t…

Fear not, my friend, as there’s a way to fix that:

1. Go to Plugins > Editor and select WordPress Popular Posts from the dropdown.
2. Find:

   // Allow WP themers / coders access to raw data
   // so they can build their own output
   if ( has_filter( 'wpp_custom_html' ) && !defined('WPP_ADMIN') ) {
     return apply_filters( 'wpp_custom_html', $mostpopular, $instance );
   }

   … and change it to:

   // Allow WP themers / coders access to raw data
   // so they can build their own output
   if ( has_filter( 'wpp_custom_html' ) && !defined('WPP_ADMIN') ) {
     if ( isset($this->id) )
       $instance['widget_id'] = $this->id;
   
     return apply_filters( 'wpp_custom_html', $mostpopular, $instance );
   }

3. Hit the Update file button to save changes.

Now you can use $instance['widget_id'] to tell them apart ??

I’ll make sure to include this change on the next version of the plugin, so thanks for the notice!

Hi Hector, would you be able to explain how I could go about doing this when using template tags? e.g. Where and how do I define the different instances? Inside the functions.php file?

Thanks

Hi @benmjt!

When you say “template tags” you mean the wpp_get_mostpopular() template tag, right? If so, then the workaround above applies only for the widget.

If you’re looking for a way to customize the HTML output for the wpp_get_mostpopular() template tag, use the post_html parameter (check Settings > WordPress Popular Posts > Parameters for more details). If that’s not what you need, please clarify.

Hi Hector, thanks for getting back to me.

Yep, you’re right, i’m using the the ‘wpp_get_mostpopular()’ tag.

I’m currently using the ‘my_custom_popular_posts_html_list’ filter in my functions.php to customise the html output, but I just wondered if it’s possible to have a second instance of popular posts with a different html layout?

Theoretically, yes. I’ve been thinking of possible solutions but between meetings and work projects haven’t really had time to sit down and write code to test them ??

I’ll give it some more thinking and get back here once I have something that works, alright?

That would be great, thanks Hector. It’s not critical by any means, so no need to go crazy, it would just be a ‘nice to have’ for a site i’m working on.

Thanks again.