orthopedic pain management

Flashuser

  • Pin It

Show Popular Posts in WordPress without a Plugin

In this tutorial, I’ll show you how to display your popular posts without the use of a WordPress plugin. This feature is very useful because it increases the time spend by a user on your website. Also to many plugins will slow down your blog, so it’s go to keep it as simple as possible and install only the neccesary plugins for running the website. The end result will have the look of the popular posts displayed on my sidebar.

For this tutorial we’ll be using the post thumbnails feature introduced in WordPress 3.0. Make sure you have it installed for your theme.

The code

1. We’ll create a custom WordPress Query that will order your posts by comments count and will display the first 10 posts.

<ul id="popular-posts">

<?php
$popular_posts = new WP_Query('orderby=comment_count&posts_per_page=10'); ?>

2. After that will create the loop with our custom query and display the most commented posts. Also will check if a post has a thumbnail assign to it, if not available, no image will be displayed.

<?php while ($popular_posts->have_posts()) : $popular_posts->the_post(); ?>
<li>
<?php 
if ( has_post_thumbnail() ) { // check if the post has a Post Thumbnail assigned to it.
?>
<a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_post_thumbnail('thumb', array('alt' => ''.get_the_title().'', 'title' => ''.get_the_title().'')); ?></a>
<a class="popular-post-title" href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a>
<?php } else {?> <a class="popular-post-title" href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a> 

<?php } ?>

3. To finish it up, we’ll display the category for each post.

<p>in <span class="popular-categ"><?php $category = get_the_category(); $categLink = get_category_link($category[0]->cat_ID); ?> <a href="<?php echo $categLink; ?>" title="<?php $category[0]->cat_name; ?>"><?php echo $category[0]->cat_name; ?></a></span></p>
</li>

<?php endwhile; ?>
</ul>

4. Here’s all the code. Copy it in your sidebar.

<ul id="popular-posts">

<?php
$popular_posts = new WP_Query('orderby=comment_count&posts_per_page=10'); ?>

<?php while ($popular_posts->have_posts()) : $popular_posts->the_post(); ?>
<li>

<?php 
if ( has_post_thumbnail() ) { // check if the post has a Post Thumbnail assigned to it.
?>
<a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_post_thumbnail('thumb', array('alt' => ''.get_the_title().'', 'title' => ''.get_the_title().'')); ?></a>
<a class="popular-post-title" href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a>
<?php } else {?> <a class="popular-post-title" href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a> 

<?php } ?>

<p>in <span class="popular-categ"><?php $category = get_the_category(); $categLink = get_category_link($category[0]->cat_ID); ?> <a href="<?php echo $categLink; ?>" title="<?php $category[0]->cat_name; ?>"><?php echo $category[0]->cat_name; ?></a></span></p>
</li>

<?php endwhile; ?>
</ul>

The CSS style

The css I used to fit with my design theme. Copy and adapt it to your theme.

#popular-posts li { overflow:auto; margin:20px 0px;}
#popular-posts li img { float:left; margin-right:10px; border:3px solid #798295;}
.popular-post-title { text-decoration:none; font-weight:bold; color:#798295;}
.popular-post-title:hover{color:#6eaebe;}
#popular-posts li p { margin-top:10px; }
.popular-categ{padding:5px;background:#6eaebe;}
.popular-categ a{ font-weight:normal;color:#464b56;}
.popular-categ a:hover{color:#545b68;}

Author: Alin

Passionate about web and graphic design, photography and climbing. Follow me at Twitter , Facebook and Google+

  • Sebastian Dalipi

    Thanks,
    very nice 🙂

  • Pingback: Show Popular Posts in WordPress without a Plugin | EnterDays | Daily Forex and Stock()

  • I went looking for this page because a similar code I found was having a display problem. Because this code is doing the same thing, I think the problem is not with the code, but with my database.

    I’m only asking for input here because you seem to understand how this works better than I do. If your code is only displaying one post, and it’s a post that was deleted two weeks ago, and I know that other posts have multiple page views, what could be going wrong here?

    • It works well for me. Take a look at the sidebar – Popular Posts section.The popular posts are displayed by comment count. So more comments for a post, more exposure gain for that post.

      Make sure you got the latest WordPress version.

  • been looking this kind of wphack code for long time and finally find the finest in this post. Works like a charm!

    thankkkkkk youuuu soooo muucchhhh!!!!….

  • I have applied it to my website, thanks again. Sorry, a silly question, it can affect the speed of the website?

  • Really helpful for use this in my site without a plugin. I don’t have much technical knowledge. but this article gives easy guidance to create a popular post tab.

  • Hey,
    One problem, where I add the 1,2 and 3 code?