How To Display Most Viewed Posts in WordPress Without a Plugin
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?
Final Result
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.
Prerequisite
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.
<!--
********************************* CODE-4 ************************************
* @Author: Boutros AbiChedid
* @Date: January 22, 2012
* @Websites: http://bacsoftwareconsulting.com/ ; http://blueoliveonline.com/
* @Description: Displays the MOST VIEWED POSTS in the sidebar of Your Blog.
* @Tested on: WordPress version 3.2.1
-->
<div class="box">
<div class="box_title">Most Viewed Posts</div>
<div class="box_content">
<ul>
<?php
query_posts('meta_key=post_views_count&orderby=meta_value_num&posts_per_page=5');
//If there are posts. checks to see if the current query has any results to loop over.
if (have_posts()) :
//loop through the posts and list each until done.
while (have_posts()) :
//Iterate the post index in The Loop.
the_post();
?>
<li><a href="<?php the_permalink() ?>" title="Permanent Link to: <?php the_title_attribute(); ?>"><?php the_title(); ?></a> <?php echo '(' . get_PostViews(get_the_ID()) .')'; ?></li>
<?php
endwhile;
endif;
//Destroy the previous query. This is a MUST.
wp_reset_query();
?>
</ul>
</div>
</div><!-- END OF MOST VIEWED POSTS. -->
CODE-4 Notes:
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.
Note: If you don´t see the horizontal bar, and to scroll within the code, you can also click on the code window and use your keyboard´s arrow keys.
1. If you want to display Most Viewed Posts For a Specific Category, then replace line 14 of CODE-4 with the following line: (Note that the number 76 is one of the category IDs on this blog, you need to replace this number with yours.)
query_posts('meta_key=post_views_count&orderby=meta_value_num&posts_per_page=5&cat=76');2. If you want to display Most Viewed Posts for multiple Categories, then replace line 14 of CODE-4 with the following line: Note that the number 76 and 40, are separated by commas, and are 2 of the category IDs on this blog, you need to replace these 2 numbers with yours.
query_posts('meta_key=post_views_count&orderby=meta_value_num&posts_per_page=5&cat=76,40');3. If you want to display Most Viewed Posts For a Specific Year (let´s say 2011), then replace line 14 of CODE-4 with the following:
query_posts('meta_key=post_views_count&orderby=meta_value_num&posts_per_page=5&year=2011');The Category IDs, specified above, are different in your case. If you don´t know how to find the category ID, read my previous tutorial on How To Find the Category ID.
Hopefully you got the idea how you can manipulate the query_posts() function for your specific needs.
CODE-4 References:
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).
</div>
</div>
<div class="right" id="sidebar">
<div id="sidebar_content">
<!-- part of the sidebar.php code removed for brevity. -->
<!-- MOST VIEWED POSTS Code by BOUTROS ABICHEDID (placed above the start of the widgets) -->
<div class="box">
<div class="box_title">Most Viewed Posts</div>
<div class="box_content">
<ul>
<?php
query_posts('meta_key=post_views_count&orderby=meta_value_num&posts_per_page=5');
//If there are posts. checks to see if the current query has any results to loop over.
if (have_posts()) :
//loop through the posts and list each until done.
while (have_posts()) :
//Iterate the post index in The Loop.
the_post();
?>
<li><a href="<?php the_permalink() ?>" title="Permanent Link to: <?php the_title_attribute(); ?>"><?php the_title(); ?></a> <?php echo '(' . get_PostViews(get_the_ID()) .')'; ?></li>
<?php
endwhile;
endif;
//Destroy the previous query. This is a MUST.
wp_reset_query();
?>
</ul>
</div>
</div><!-- END OF MOST VIEWED POSTS. -->
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar() ) : ?>
<?php the_subpages(); ?>
<?php if ( $recent_posts = get_posts('numberposts=10') ) : ?>
<div class="box">
<div class="box_title">Recent posts</div>
<div class="box_content">
<ul>
<?php foreach ( $recent_posts as $post ) : setup_postdata($post); ?>
<li><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li>
<?php endforeach; ?>
</ul>
</div>
</div>
<?php endif; ?>
<!-- part of the sidebar.php code removed for brevity. -->
<div class="box">
<div class="box_title">Search</div>
<div class="box_content">
<?php @include(TEMPLATEPATH . '/searchform.php'); ?>
</div>
</div>
<?php endif; ?>
</div>
</div>
Notes on Example(1):
Notice How I placed CODE-4 immediately before the start of the dynamic sidebar widgets.
The Emplode theme sidebar´s CSS classes and HTML tags are being used to style and structure the Most Viewed Posts list.
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).
<aside id="sidebar">
<!-- Begin Social Icons -->
<section id="socialIcons">
<!-- part of the sidebar.php code removed for brevity. -->
<?php if(get_option('diary_contact_page')):?>
<a href="<?php echo get_page_link(get_option('diary_contact_page')); ?>" id="butContact">Contact</a>
<?php endif;?>
<!-- part of the sidebar.php code removed for brevity. -->
</section>
<!-- part of the sidebar.php code removed for brevity. -->
<!-- MOST VIEWED POSTS code by BOUTROS ABICHEDID. Placed above the start of the Widgets-->
<div class="sideBox">
<h3>Most Viewed Posts</h3>
<ul>
<?php
query_posts('meta_key=post_views_count&orderby=meta_value_num&posts_per_page=5');
//If there are posts. checks to see if the current query has any results to loop over.
if (have_posts()) :
//loop through the posts and list each until done.
while (have_posts()) :
//Iterate the post index in The Loop.
the_post();
?>
<li><a href="<?php the_permalink() ?>" title="Permanent Link to: <?php the_title_attribute(); ?>"><?php the_title(); ?></a> <?php echo '(' . get_PostViews(get_the_ID()) .')'; ?></li>
<?php
endwhile;
endif;
//Destroy the previous query. This is a MUST.
wp_reset_query();
?>
</ul>
</div><!-- END OF MOST VIEWED POSTS. -->
<?php // Widgetized sidebar
if ( ! dynamic_sidebar( 'sidebar' ) ) :?>
<div class="sideBox">
<h2>WIDGETS NEEDED!</h2>
<p>Go ahead and add some widgets here! Admin > Appearance > Widgets</p>
</div>
<?php endif; ?>
</aside>
Notes On Example(2):
Notice How I placed CODE-4 immediately before the start of the sidebar widgets.
The Diary theme sidebar´s CSS classes and HTML tags are being used to style and structure the Most Viewed Posts list.
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.
Hi, great tutorial!
I need help on dividing the page views per day :)
Any suggestion?
thanks!
Thank you, this very good lesson!
But I need to show the most pages, rather than posts. Possible to realize this?
You want to show the most viewed pages?
Yes it’s possible. What website you want to do this?
Thanks.
Boutros.
At the moment my site on local server and no possibility to show.
But I did it, here is so:
$my_posts = get_posts('meta_key=post_views_count&orderby=meta_value_num&post_type=page&post_parent=41&posts_per_page=5')THANK YOU SO MUCH!
big like Boutros AbiChedid. i show Most Viewed Posts with out numbers hits? for example
13 Best Free Blogging Platforms (93925)
shows as
13 Best Free Blogging Platforms
what is wrong?
Is there a way to display the number of views after the link to each of the most popular pages?
I did not understand what you mean.
Can you show me an example (screen shot?).
Thanks.
Boutros.
I actually figured it out. This page shows what I was trying to achieve, with the number of views added after each link. To make it work, I added this code at the beginning:
function get_PostViews($post_ID){ $count_key = 'post_views_count'; //Returns values of the custom field with the specified key from the specified post. $count = get_post_meta($post_ID, $count_key, true); return $count; }Then, where I wanted the number of views to display, I put:
Now I see what you mean Carol. I already had this functionalityon my Blog, if you look at the “MOST VIEWED POST” widget on the top sidebar.
Actually the ‘get_PostViews()’ function should be added to your theme’s “functions.php” file and the single line of code is added to wherever the you want your post views to appear, within the loop.
I had it explained in this tutorial: http://bacsoftwareconsulting.com/blog/index.php/wordpress-cat/how-to-display-most-viewed-posts-in-wordpress-without-a-plugin/
By the way to add code, just wrap it with (NOTE: REPLACE ‘{‘ with ‘[' and '}' with ']‘):
{php}
your code here
{/php}
For CSS code wrap it between
{css}
your code here
{/css}
These are shortcodes that are mentioned below the comment section.
Thanks.
Boutros.
It was already declared in functions.php. But for some reason, it wasn’t working on the page unless I put the same lines of code there.
And thanks for the tip on how to show php code. I was using the <code> tag, but apparently that wasn’t what I wanted.
The styling is taken from the Engadget Style theme for the nrelate Most Popular plugin. If anyone is interested, the complete code for the page is as follows:
This part goes into style.css
.nrelate_engadget .nr_post_title { font-weight: bold; display: block; } .nrelate_engadget .nr_excerpt { display: block; } /* Remove all bullets */ .nrelate_engadget ul li { list-style-type: none !important; background: none !important; margin: 0 !important; padding: 0 !important; width: 98%; } /* Move rows as far left as possible */ .nrelate_engadget .nr_inner ul { margin-left: 0 !important; padding-left: 0 !important; } /* Text styles */ .nrelate_engadget ul li a { display: block; color: black !important; font-size: 110%; font-weight: normal; line-height: 110%; height: 100% !important; } .nrelate_engadget ul li a:hover { color: white !important; } /* Advertising */ .nrelate_engadget .nr_source { display: block; padding: 1% 0 0 0; } /* = Rows ----------------------------------------------- * background: set to rgba for transparency * width: different for each row */ /* Set padding for rows */ /* * nRelate Text: Engadget Style * * This layout is only for TEN items * You can easily add more by adjusting the * row items below. */ /* = Change nRelate defaults -----------------------------------------------*/ .nrelate_engadget .nr_post_title { font-weight: bold; display: block; } .nrelate_engadget .nr_excerpt { display: block; } /* Remove all bullets */ .nrelate_engadget ul li { list-style-type: none !important; background: none !important; margin: 0 !important; padding: 0 !important; width: 98%; } /* Move rows as far left as possible */ .nrelate_engadget .nr_inner ul { margin-left: 0 !important; padding-left: 0 !important; } /* Text styles */ .nrelate_engadget ul li a { display: block; color: black !important; font-size: 110%; font-weight: normal; line-height: 110%; height: 100% !important; } .nrelate_engadget ul li a:hover { color: white !important; } /* Advertising */ .nrelate_engadget .nr_source { display: block; padding: 1% 0 0 0; } /* = Rows ----------------------------------------------- * background: set to rgba for transparency * width: different for each row */ /* Set padding for rows */ .nrelate_engadget li a { padding: 3% 2% 3% 4%; } /* Widget padding should be different */ .nrelate-popular-widget .nrelate_engadget li a { padding: 5% 2% 5% 4%; } .nrelate_engadget li a.nr_row_1 { background: rgb(238, 83, 28); /* ie6 & ie7 */ background: rgba(238, 83, 28, 0.8); margin: 7px 0 0; width: 96%; } .nrelate_engadget li a.nr_row_2 { background: rgb(238, 107, 29); /* ie6 & ie7 */ background: rgba(238, 107, 29, 0.7); margin: -5px 0 0; width: 90%; } .nrelate_engadget li a.nr_row_3 { background: rgb(247, 188, 9); /* ie6 & ie7 */ background: rgba(247, 188, 9, 0.7); margin: -5px 0 0; width: 85%; } .nrelate_engadget li a.nr_row_4 { background: rgb(239, 227, 26); /* ie6 & ie7 */ background: rgba(239, 227, 26, 0.8); margin: -5px 0 0; width: 80%; } .nrelate_engadget li a.nr_row_5 { background: rgb(131, 211, 17); /* ie6 & ie7 */ background: rgba(131, 211, 17, 0.8); margin: -5px 0 0; width: 75%; } .nrelate_engadget li a.nr_row_6 { background: rgb(18, 237, 186); /* ie6 & ie7 */ background: rgba(18, 237, 186, 0.8); margin: -5px 0 0; width: 70%; } .nrelate_engadget li a.nr_row_7 { background: rgb(137, 158, 235); /* ie6 & ie7 */ background: rgba(137, 158, 235, 0.8); margin: -5px 0 0; width: 65%; } .nrelate_engadget li a.nr_row_8 { background: rgb(135,206,235); /* ie6 & ie7 */ background: rgba(135,206,235, 0.9); margin: -5px 0 0; width: 60%; } .nrelate_engadget li a.nr_row_9 { background: rgb(203,75,241); /* ie6 & ie7 */ background: rgba(203,75,241, 0.4); margin: -5px 0 0; width: 55%; } .nrelate_engadget li a.nr_row_10 { background: rgb(203,75,241); /* ie6 & ie7 */ background: rgba(203,75,241, 0.2); margin: -5px 0 0; width: 50%; } /* = Most Popular plugin - "Views" area ----------------------------------------------- * http://wordpress.org/extend/plugins/nrelate-most-popular/ */ .nrelate_popular.nrelate_engadget .nr_post_title, .nrelate_popular.nrelate_engadget .nr_excerpt { width: 80%; font-size: 110%; line-height: 120%; } .nrelate_popular.nrelate_engadget .nr_showviews { font-style: italic; background: black; color: white; float: right; font-size: 110%; font-weight: bold; margin-top: -7%; margin-right: -5%; padding: 2%; line-height: 100% !important; } .nrelate_popular.nrelate_engadget .nr_showviews_txt { display: none !important; }well, I am using wp super cache and it look lacked. do you have any suggest code regarding post view function used in caching blogs e.g how if implement using javacript
thanx
The code does not work with a caching plugin (like in your case super cache plugin). See the “Disadvantage of the Code” section.
This is a WordPress/PHP tutorial. I am sure you can implement it using Javascript, but how is beyond the scope of this tutorial.
Thanks.
Awesome tip ! Thx for sharing. A little more help needed though :
Is it possible to reset the post views count after a certain period (week or month) so the post views count restart from zero again ?
Nice one a litle bit of coding hahaha thanks.
Hey,
Was looking for a way to do this without plugin.
this one was excellent and the previous (code 1 and 2 and 3) are very useful.
Works perfectly with wordpress 3.5
thanks
Thanks to this tip.Great job this links and HTML code is very useful.Post more useful tips and tricks.I waiting your updates.Thanks again.
Hmm what about say for search results? Or for each category, is that possible?
Last question, what is popularity based on? Comment count or view count? If its comment count, is it possible to do one with view count as well?
In case anyone is still looking to get this to work with custom post types, here’s the snippet: (Tested & working)
the_permalink() " title="
" rel="nofollow">
echo '(' . getPostViews(get_the_ID()) .')';