Display Your Popular Posts In WordPress Without A Plugin

Display Popular Posts In WordPress Without A Plugin

Whilst working on nenuno version 3.0 I have been adding new features across the board! One being able to show which your most commented posts in your sidebar without the need for a plug-in. As a bonus it will grab your featured image to generate a small thumbnail to make it look more attractive.

Before I start this tutorial be sure to check out one of the most visited resources here at nenuno “Adding Post Thumbnails To WordPress 3.0” which will get the ball rolling with working with featured images.

The PHP

[php]<ul id="popular-comments">[/php]

First lets create a WordPress Query! Setting it to look for the posts with the most (rhymes!) comments. I have selected 10 but it can be any number you desire.

[php]<?php
$pc = new WP_Query(‘orderby=comment_count&posts_per_page=10’);
?>[/php]

WordPress will check what posts are most popular.

[php]<?php while ($pc->have_posts()) : $pc->the_post(); ?>
<li>[/php]

The posts with the highest comment count will be displayed, side by side with a small thumbnail taken from the featured image (If no featured image is available it will display nothing)

[php]<a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_post_thumbnail(array(10,10)); ?></a>
<a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a>[/php]

Add a few basic details relating to the article/resource. I have choosen the posts author and the date it was published.

[php]<p>Posted by <strong><?php the_author() ?></strong> on the
<?php the_time(‘F jS, Y’) ?> with
<?php comments_popup_link(‘No Comments;’, ‘1 Comment’, ‘% Comments’); ?></p>
</li>[/php]

Finish off the loop.

[php]<?php endwhile; ?>
</ul>[/php]

Now to bundle it all together and paste into a sidebar widget! Be sure that your widgets are PHP enabled. I use Executable PHP widget, but that is down to personal preference. You can also hard code this feature straight into your theme.

[php]<ul id="popular-comments">

<?php
$pc = new WP_Query(‘orderby=comment_count&posts_per_page=10’); ?>

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

<a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_post_thumbnail(array(10,10)); ?></a>
<a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a>

<p>Posted by <strong><?php the_author() ?></strong> on the
<?php the_time(‘F jS, Y’) ?> with
<?php comments_popup_link(‘No Comments;’, ‘1 Comment’, ‘% Comments’); ?></p>
</li>

<?php endwhile; ?>
</ul>
[/php]

Styling

Some basic CSS is required to make this fit with the rest of your themes design. I have commented which each style does.

[css]#popular-comments { list-style:none; width:360px; } /*Set the width of your popular post*/

#popular-comments li { overflow:auto; margin:10px 0px; border-bottom:1px solid #E6E6E6; padding-bottom:5px; } /*Style your post list, I have opted for a bottom border which is 1 pixel thick.*/

#popular-comments li img { float:left; margin-right:10px; border:4px solid #EEEEEE;} /*Give your thumbnail taken from the featured image a nice border! A thick border adds to the effect.*/

#popular-commentss li a { text-decoration:none; font-weight:bold; color:#1e292b;} /*Give your active links a bit of color.*/

#popular-comments li p { margin-top:10px; }[/css]

End Result

Now your all done! Here is my end result, what does yours look like? Post below!

my-popular-posts

On a side note, we are looking for some of your contributions! Got something creative to share with the community? Now is the perfect time to get involved! Learn more about Contributing.

20 Comments

  1. Great article about Popular Posts, keep up the goo work!

    • thanks vincent we will try and keep on top of the great work we are building upon here!

  2. looks good, I do something similar but I tend to use timthumb and add it that way :)

    • Agreed, but looking at this in Nenuno now it really looks damn good in our sidebar dont you think?

  3. Hi,

    thanks,

    but how to display most popular posts based on number of views ?

  4. Awesome post! Really well done. I am always looking for wonderful WordPress tutorials to share with my readers and your post is one of the clearest I have seen. Again, thank you very much! Really like your blog. Really good!

  5. That’s great article on wordpress Thanks buddy

  6. This is an awesome plugin! I will really benefit from this. Thanks.

  7. could u make tutorial about how to order most viewed posts !!

    • Hi,

      I’m not the only who need help/tutorial to display/order most VIEWED posts.

      AB-track is also interested ! Great !

      thanks in advance.

  8. Excellent! Can you please make a WordPress plugin for this.

  9. This is probably a stupid question, but I’m a total WordPress noob. How do I create a WordPress Query?

    The widget looks great by the way. Looking forward to getting it up on my site!

  10. how would you make the plugin only choose posts from the last month?

Leave a Reply to Bob Cancel reply

Your email address will not be published. Required fields are marked *