Do you want to show your Most Viewed Posts on your Blog? In this tutorial, I will show you how to display your most popular posts (based on Views) in WordPress Without a Plugin. Probably you already have seen Blogs displaying the Most Viewed Posts and you wonder how it is done.
This tutorial is a natural progression from my previous tutorial: How To Track & Display Post Views Count in WordPress Without a Plugin. Now after we tracked the most popular posts by number of views, it is time to display them on the Blog.
What About a Plugin?
Yes, there are plugins that display the most popular posts on your blog, but they all tend to do a lot more than you need. Also I encourage you to read my previous post about unnecessarily adding plugins to your theme. Personally, I am not a fan of plugins, I prefer to use code snippets rather than using Plugins. Also, aren´t you eager to learn?
The 2 images below show an example of the Most Viewed Posts displayed at the top right sidebar of this blog, for 2 of the 4 themes I have available. The numbers between parenthesis represent how many times the post have been viewed so far.
To display Most Viewed Posts in your Blog, you need to add the view counter for every post. In other words, you need to add to your theme: (CODE-1 and CODE-2 and CODE-3) or (CODE-1 and CODE-2a and CODE-3) from my previous tutorial. Implementing my previous tutorial is a must.
If you want to show Most Viewed Posts, but you don´t want to show the Post Views Column in your admin area (dashboard), then you can remove CODE-3 with the exception of the get_PostViews() function (line 12 to 19 of CODE-3), in addition to CODE-1 and CODE-2, of my previous tutorial.
Display Most Viewed Posts | sidebar.php
Open the sidebar.php file located in your theme´s folder, and add (copy and paste) the following CODE-4 where you want your Most Viewed Posts list to appear. Save the file and upload it to the server.
CODE-4 :: Displays Most Viewed Posts
Note: To scroll within the code: You can also click on the code window and use your keyboard´s arrow keys.
The most important part of the code are lines 13 to 28, these Lines should not be modified. The HTML tags can be changed or removed depending on your theme. Also CSS classes should be modified to fit your theme´s style.
On line 14 of the code: I set the posts_per_page parameter to 5, meaning that the five Most Viewed posts will be displayed. You can change this number to whatever you like. Also, if you totally removed posts_per_page parameter (if you removed
&posts_per_page=5), then the Most displayed posts will default to whatever number you set it in your dashboard (Administration > Settings > Reading).
This code requires (CODE-1 AND CODE-2 AND CODE-3) or (CODE-1 AND CODE-2a AND CODE-3) of my previous tutorial.
If you want to show Most Viewed Posts, but you don´t want to show the Post Views Column in your admin area (dashboard), then you can remove CODE-3 with the exception of get_PostViews() function, (line 12 to 19 of CODE-3) of my previous tutorial.
Some themes have more variations of the sidebar.php file, so look at their documentation and see where best to add the code. For instance, for the “Clear Line” theme I added the code in “layouts/right-sidebar.php” file.
If your theme is not widegetized, then you can add the code anywhere you like in the sidebar. However, if your theme is widget ready, meaning that your theme supports a dynamic sidebar, then there is a limitation to where you can place the code. In this case, the code is placed at the top before the start of your dynamic widgets.
Even though I talk about placing the code in the sidebar. However; you can add the code anywhere you like on your WordPress Blog (left, right, header, footer).
CODE-4 works on WordPress 2.3.0 and newer. But I hope that you will upgrade to the latest version.
Real Example(1) | Where to Add CODE-4 | Emplode Theme
This is where I added CODE-4 for the “Emplode Theme” of this Blog (in the sidebar.php file).
Notes on Example(1):
Notice How I placed CODE-4 immediately before the start of the dynamic sidebar widgets.
CODE-4 is added to the sidebar.php file located in the theme folder.
Real Example(2) | Where to Add CODE-4 | Diary Theme
This is where I added CODE-4 for the “Diary Theme” of this Blog (in the sidebar.php file).
Notes On Example(2):
Notice How I placed CODE-4 immediately before the start of the sidebar widgets.
CODE-4 is added to the sidebar.php file located in the theme directory.
Styling Most Viewed Posts (CODE-4) | style.css
To style CODE-4 with CSS: Use the same styling as your sidebar´s Widgets (or your sidebar only in case your theme does not support widgets). You don´t have to do anything extra here unless you want to. Style it with what´s available for your theme. Same applies to the HTML tags, use the same layout available for your sidebar.
For instance if you are using Google Chrome browser use the “Inspect element” feature to know which CSS classes you need to use or you could inspect the source code. For Mozilla Firefox browser, you could either check the source code or install the Firebug Add-on. Also be aware that HTML tags for CODE-4 can also be changed or removed depending on your theme.
Disadvantage of the Code (CODE-4)
As I mentioned, CODE-4 is dependent on my previous tutorial´s Post View Counter codes which does not work with a caching plugin. Therefore, CODE-4 will not work with a caching plugin either. For instance, if you have W3 Total Cache or Quick Cache installed, the Post View Counter will not update and thus the Most Viewed Posts list can´t be accurately generated.
With all that said, if your WordPress Website is lightweight and your images are compressed and optimized for the Web, then by disabling the caching plugin, you might not notice a significant increase in page load time. You could also flush the buffer as I discussed in Tip8 in a past tutorial (as well you could implement other significant tips): 14 Tips for Maximum WordPress Performance & Speed.
For this blog, I am not using any caching plugin since I have multiple WordPress themes for my visitors to choose from.
To Recap! In case You are Confused
To display the Most Popular Posts Based on Views, first you need to add to your theme (CODE-1 and CODE-2) from my previous tutorial and then add CODE-4 of this tutorial.
How This Code Could be Improved
The code in this tutorial could be made as a customizable widget, so that non-technical users can easily integrate it into their blog from the WordPress dashboard (Appearance > Widgets panel). In this case you can place the Most Viewed Posts list anywhere you like on the sidebar. Widgets require no code expertise. They can be added, removed, and rearranged from the WordPress dashboard.
Your Turn to Talk
You now have the choice to Display the most Popular Posts (Based on Views) in your WordPress blog and without a plugin. This will hopefully entice your visitors to read more of your posts, thus reducing your blog´s bounce rate by viewing other pages and keeping your visitors longer on your Blog.
How easy did you find this tutorial to implement? Do you have something to add or anything else to say? If so, please share your opinion in the Comment section. Your opinion matters, unless it is a Spam.