MENU
POPULAR POSTS
-
Adding Post Thumbnails To WordPress 3.0
Post Thumbnails were first introuduced in the release of WordPress 2.9, but seeing how the...
-
50 Free Premium WordPress Themes Released in 2010
WordPress became one of the most popular CMS platform around the internet, being used by...
-
I Want that T-shirt: Amazing T-shirt Designs From Across the Web
Here I wanted to showcase some real great t-shirts designs, be they illustrative, text art...
-
Can Selling WordPress Themes Online Become A Full Time Job?
The original idea behind nenuno was to offer WordPress conversions from HTML or PSD templates,...
-
Up & Coming Design Blog’s To Follow
As you are aware, there are hundreds of designer related blogs showcasing creative resources, inspiration,...
FRIENDS
Display Your Popular Posts In WordPress Without A Plugin
Posted by Daniel in Wordpress on September 7th, 2010 with 30 Comments
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
<ul id="popular-comments">
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
$pc = new WP_Query('orderby=comment_count&posts_per_page=10');
?>
WordPress will check what posts are most popular.
<?php while ($pc->have_posts()) : $pc->the_post(); ?> <li>
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)
<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>
Add a few basic details relating to the article/resource. I have choosen the posts author and the date it was published.
<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>
Finish off the loop.
<?php endwhile; ?> </ul>
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.
<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>
Styling
Some basic CSS is required to make this fit with the rest of your themes design. I have commented which each style does.
#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; }
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.
WordPress is one of the recognized things these days and people have found ways to customize it, however another way to improve your overall knowledge is getting the 000-105 certification. This and other certifications are known worldwide as they test all the capabilities of the person, the 642-972 is no different in any manner. If at this point you are thinking how will you clear it, then the answer is the 70-290 dumps, which are for the respective certification, however other dumps for all certifications are there, they are not dumps, they are actually a ticket to ace the exam.
Posted in Wordpress using the Tags: Creative Resource, popular, posts, tutorials, Wordpress
Related Posts
- Key WordPress Code Snippets That Will Boost Functionality #1
- Key WordPress Code Snippets That Will Boost Functionality #2
- 5 Resources That Will Make Your WordPress Comments Stand Out
- Adding Post Thumbnails To WordPress 3.0
- 10 WordPress Cheat Sheets That Make Life Easy
- The WordPress Post Thumbnail Explained
I love all things fantasy and you see that within in the content I produce for nenuno creative.
See all posts by Daniel
Network Posts
You can leave a response, or trackback from your own site,
30 Responses to “Display Your Popular Posts In WordPress Without A Plugin”
Trackbacks
- designfloat.com
- designpoke.com
- zabox.net
- pligg.com
- Display Your Popular Posts In WordPress Without A Plugin : Speckyboy Design Magazine
- CSS Brigit | Display Your Popular Posts In WordPress Without A Plugin
- 140+ Highly Useful Articles for Web Designers and Developers — tripwire magazine
- 140+ Highly Useful Articles for Web Designers and Developers | Prabaharan CS Blog
- You are now listed on FAQPAL
- » WPDesignBlog – wordpress wp design blog with apple blog wordpress themes, magazine style websites, affiliate and social media wordpress themes
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!
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?
That’s Great Work , Thanks Daniel !
Hi,
thanks,
but how to display most popular posts based on number of views ?
You may have to check out this article – http://ajaydsouza.com/wordpress/plugins/top-10/
Hi,
thanks for your answer. I did check this article actually.
However I would like to display the most viewed articles: the title + the content (not only the title in )
Any ideas would be very helpful
thanks
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!
That’s great article on wordpress Thanks buddy
thanks for the great info……..
This is an awesome plugin! I will really benefit from this. Thanks.
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.
Excellent! Can you please make a WordPress plugin for this.
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!
Nevermind. I’m an idiot. I didn’t read properly!
how would you make the plugin only choose posts from the last month?
Excellent! it gona be nice
Where I Begin? What is the php I have to modify? (step1)