Display Your 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!

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.