How to Display Featured Post on Sidebar with Thumbnails

27th Dec 2010 | Posted by Eko S. | 17 Comments

Have a featured post displayed on sidebar has several advantages, such as to increase pageviews. With featured post section, you can display your best articles. So that it can attract visitors to explore your site longer.

Display featured post with thumbnail

In this tutorial we will explain how to show your highlight articles based tag or category.

You may also be interested in the following tutorial related articles:

Before we start this tutorial make sure your theme has supported WordPress post thumbnail feature, you can check this feature in post editor (Posts > Edit) below the categories. Or you can check our previous tutorial, How to make your theme support image thumbnail feature.

The code

Open file sidebar.php (We use twenty ten theme) and insert the following code

<li id="meta" class="widget-container">
				<h3 class="widget-title"><?php _e( 'Featured Post', 'twentyten' ); ?></h3>
				<?php
				$the_query = new WP_Query('showposts=5&orderby=post_date&order=desc&category_name=your_category_name');
				while ($the_query->have_posts()) : $the_query->the_post(); ?>
						<div class="twentyten-featured-post">
							<?php the_post_thumbnail(array(40,40), array ('class' => 'alignleft')); ?>
							<a title="<?php the_title(); ?>" href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a>
							<div class="clear"></div>
						</div>				

				<?php endwhile; ?>
				<?php wp_reset_query(); ?>
</li>

Explanation the code above

The tag
```
<li> 
```
is for the widget container
The tag
```
<h3> 
```
is for the widget title: “Featured Post”
The Code
```
<?php
$the_query = new WP_Query('showposts=5&orderby=post_date&order=desc&category_name=your_category_name');
while ($the_query->have_posts()) : $the_query->the_post(); ?>
```
is for query post to display featured post based category, if you want to change with tag, please change “category_name=…” with “tag_id=…(your tag id number)”. You also can change the number of articles that will appear on “showpost=….”
The Code
```
<?php the_post_thumbnail(array(40,40), array ('class' => 'alignleft')); ?>
```
is to display the post thumbnail, you can set the thumbnail set size too.

The Code

<a title=">?php the_title(); ?>" href=">?php the_permalink() ?>" rel="bookmark">>?php the_title(); ?></a>

is to display the post title and link.

Styling

Now we will style the CSS, so the widget will render correctly. Open the style.css and at the very bottom add:

.twentyten-featured-post {margin-bottom: 2px;}
.twentyten-featured-post a {float: none;}
.twentyten-featured-post img {float: left; margin: 4px 4px 0 0;}
.twentyten-featured-post  .clear {clear: both;}

The Result

If this all goes according to plan, it should look rather nice, something similar to this (with your own content of course):
display featured post with thumbnail

So this is how to display your highlight articles with thumbnails without using a WordPress Plugin. Remember to activate WordPress post thumbnails using our WordPress post thumbnail tutorial. Hope it useful.

This tutorial we made solely to the TwentyTen theme, if you have difficulty in applying this tutorial on your theme. We are willing to provide premium support to you, please contact us via email: dynamicwp[at]gmail[dot]com

12 Comments to “How to Display Featured Post on Sidebar with Thumbnails”

Add Comments (+)

Ulysses says:

December 28, 2010 at 03:57

Thanks for sharing this piece of code. I’m going to have to add this to a couple of my favorite themes. I just need to figure out how to query the most commented post. Thanks once again.

Reply
- reza says:
  
  December 28, 2010 at 08:53
  
  You can read this tutorial for most commented post
  
  http://www.dynamicwp.net/articles-and-tutorials/how-to-display-your-most-popular-posts-with-thumbnails-in-wordpress/
  
  Reply
Josh Vermaire says:

December 29, 2010 at 14:14

Nice post. Another idea is to use sticky posts:

$args = array( ‘posts_per_page’ => 5, ‘post__in’ => get_option(‘sticky_posts’));
$the_query = new WP_query($args);

This way you don’t have to add extra tags or categories.

Reply
Final Cut Studio says:

December 29, 2010 at 21:24

Great article! Thanks for the tutorial! Always looking for ways to spruce up a WordPress template without downloading some plugin.

Reply
Brett Widmann says:

April 6, 2011 at 19:48

This was really helpful. The code snippets were great.

Reply
Som says:

April 22, 2011 at 16:06

Hey..nice info . I have been searching for the info since long time .I saw many websites who show featured posts with thumbnails in the sidebar area . I tried to do it myself .But I was unable to do it .However , I have got the info as you have shared it here . Thanks for keeping this information and sharing this .I would prefer to Appreciate it .

Reply
Bert says:

September 28, 2011 at 09:56

Is there a plugin for this? I’m kinda newbie with wordpress.

Reply
- Ricardo says:
  
  November 18, 2011 at 06:37
  
  http://wordpress.org/extend/plugins/special-recent-posts/screenshots/
  
  Reply
Saturday Update says:

April 12, 2012 at 23:51

do you also have a featured post with thumbnail for blogger?

Reply
- Eko S. says:
  
  April 21, 2012 at 01:14
  
  Hi,
  I apologize, we don’t have it.
  
  Regards,
  
  Reply
sandeeplover2009 says:

September 1, 2012 at 23:16

So in this coding can i able to post my own custom link as a featured post ?

Reply
Nouman Younas says:

March 29, 2013 at 15:16

Need some more customization in title… i want canter alignment text after some padding from top…

secondally , dnt know why when i m using category of more than one word, this script doent work properly , also not working on tag id… but working OK with one word category

Reply