How to Display Featured Post on Sidebar with Thumbnails

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 (+)

  1. Ulysses says:

    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.

  2. 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.

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

  4. This was really helpful. The code snippets were great.

  5. Som says:

    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 .

  6. Bert says:

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

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

  8. sandeeplover2009 says:

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

  9. 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

Trackbacks/Pingbacks

  1. wp-popular.com » Blog Archive » How to Display Featured Post on Sidebar with Thumbnails
  2. How to Display Featured Posts on Sidebar with Thumbnails | WebDevKungfu
  3. 40 Best WordPress Tips and Tutorials of December 2010
  4. How to Display Featured Posts on Sidebar with Thumbnails
  5. » Plugin articoli in evidenza con foto nella sidebar

Leave a Reply

 

Amazingly Beautiful WordPress Themes