Blog

WordPress

Posted on — Last updated on September 27, 2020

WordPress Popular Posts 5.0: Multiple Taxonomy Support, Themes, Thumbnail Lazy Loading, and more!

WordPress Popular Posts 5 introduces themes, image lazy loading, and some more nice-to-have enhancements!

It feels as if it was yesterday when WordPress Popular Posts 4.0 was first released to the public but actually it’s been two years already. Time flies!

Back in 2017, and with the help of Vince Tikász, the plugin was rewritten based on Devin Vinson’s WordPress Plugin Boilerplate to make the codebase a bit easier to maintain and read. And it did the job marvelously. Fast forward to 2019 and now we have WordPress Popular Posts 5.0, and as you may have already guessed the codebase has been refactored once again.

WordPress Popular Posts 5.0 uses more modern PHP coding practices such as namespaces, closures, a DI Container (largely based on Carl Alexander’s DIC), and more technical stuff I don’t want to bore you all with. All of this to try and improve my coding skills and also to attempt to make WordPress Popular Posts more efficient and easier to maintain/extend.

Thanks to all that work the plugin has evolved quite a bit, allowing me to introduce some new -and long awaited- features along with some minor bug fixes and Quality-of-Life improvements:

Multiple Taxonomy Support

As you’re probably aware of, WordPress Popular Posts has the ability to filter posts by taxonomy. With this feature you could for example list your most popular posts under the Programming category.

But what if you wanted to list your most popular posts under Programming that don’t have a specific tag, say jQuery? Well, you couldn’t (not without tinkering with code at least) because WPP could only filter posts by one taxonomy at a time. Until now.

Multiple Taxonomy fields to selectively filter posts by them

Thanks to the kind contribution of @blackWhitePanda, WordPress Popular Posts can now filter posts by multiple taxonomies.

Oh, and you can do that with the [wpp] shortcode as well:

[[wpp taxonomy='category; post_tag' term_id='85,2; 7,-3]]

Nice!

WordPress Popular Posts 5.0 can lazy load thumbnails!

This might sound like a minor feature but hear me out: page speed has been a ranking factor since 2010 and even more so since 2018 when Google started considering mobile page speed as a ranking factor as well so you definitely want to make sure your website loads as fast as possible for good search ranking positions.

One of the many things you can do to improve page loading times is to make sure that below-the-fold content (that is, content that’s off-screen) doesn’t load assets that won’t be needed right away (images, stylesheets, JS files, fonts, etc.)

Starting version 5.0, WordPress Popular Posts can instruct the browser to not load its post thumbnails unless the WPP widget is on screen (a.k.a. image lazy loading) which helps keeping your site’s initial loading times as low as possible.

Lazy loading is enabled by default with this release. If for some reason you don’t want WPP to lazy load its thumbnail images (eg. your site uses AMP or you have installed another plugin to lazy load images) there’s an option available on Settings > WordPress Popular Posts > Tools that you can use to disable the feature.

Browser support

The Thumbnail Lazy Loading feature is available to all browsers that support the Intersection Observer API. For the browsers that don’t (eg. Internet Explorer) WPP will load its thumbnails normally instead.

New Dashboard Widget: Trending Now!

WordPress Popular Posts version 4.2 introduced a feature called At-a-Glance that allows you to check how many page views have been received within the past hour. This is fine and all but some users also wanted a sneak peek at which posts/pages were seen during that time and so in addition to the At-a-Glace feature with version 5.0 now we have a new dashboard widget called Trending now that does exactly this:

WordPress Popular Posts' "Trending" Dashboard Widget

Themes!

Ever since its inception, the out-of-the-box design of the popular posts list has always been -to put it mildly- a bit lacking. Over the years, several users inquired me about this and my response always was pretty much “creating a single design that looks good and without any visual artifacts/bugs on every single theme out there is just too difficult.” This changes with version 5.0.

WPP Widget: Theme Selector

WordPress Popular Posts 5.0 ships with a total of 10 themes (technically 11 if we include the “stock” design) that you can apply to your popular posts widgets and even further customize them if you wish to do so.

I plan to add more themes on future releases, if you have suggestions feel free to leave a comment below.

Developing Custom Themes

Aside from the themes included out-of-the-box by the plugin, you can create your own themes too. I’ve written a small tutorial to tell you exactly how to do that here: Styling the List: Themes – WordPress Popular Posts Wiki.

Browser support

For all of you fellow geeks out there: these themes are basically Self-Contained Web Components which allows WordPress Popular Posts to style them in a way that won’t affect other components on the web page and, more importantly, the themes themselves won’t be affected by global CSS rules either. Note that this is true for web browsers that support the Shadow DOM: Google Chrome, Mozilla Firefox, Safari, Opera, etc. Microsoft Edge is adopting the Chromium rendering engine this year (the same one Google Chrome uses) which should increase the compatibility of WPP themes with this browser. On January 15, 2020 Microsoft officially launched the new Chromium-based Edge browser!

The above doesn’t mean that themes won’t work at all on older browsers/browsers that don’t support the Shadow DOM. There’s a good chance that the themes will work, however expect some visual artifacts and/or (minor) issues.

Other Quality-of-Life Improvements

  • Previously, only users with the Administrator role had access to the Stats dashboard. Now Editors and Authors also have access to this section so they too can check the statistics!
  • The widget will no longer strip the URL of the current post/page/custom-post-type on the list. Now it can be clicked just like the rest of the posts. This also fixes some usability issues, like for example where right clicking on the link would not allow the user to copy its URL to use it elsewhere as there was no URL to copy.
  • New Content Tags available: {total_items} displays the total number of items on the list; {item_position} displays the position of the post on the list.
  • Thumbnails will attempt to use the original ALT text as set by the user. I say “attempt” because there’s an accessibility / backward compatibility issue in the new Block Editor (a.k.a. Gutenberg) which prevents WPP from retrieving it that hasn’t been resolved yet.
  • The title attribute in links will be added only when necessary to avoid redundancy and for accessibility reasons.