Columbus, Ohio SEO Expert | Jacob Stoops

Recent Posts With Thumbnails In WordPress Without A Plugin

Post Comments
0 Comments

Today, I wanted to break my focus a little bit from SEO and get into the world of WordPress design—specifically the topic of adding thumbnails to your WordPress blog’s recent posts without the use of a plugin (it can be done). WordPress Plugins are cool, but can be a little temperamental over time as newer versions of WordPress are released.

Executing this is actually fairly simple in my mind, and you can see it in action in my site’s footer.

Step #1: The TimThumb PHP Script

This fancy little script from Darren Hoyt’s blog, and was specifically created by Tim McDaniels, and is what makes thing whole thing work. View the demo.

Once you’ve got the script, save it in your theme file as something like ‘timthumb.php’.

Step #2: Set Up a Div

This may not be totally necessary depending on how you want them to display on your website, but I typically like to set up a div to keep all the stuff in line. In this case, I used the ID #recent-posts.

      <div id="recent-posts">

      Nothing yet...

      </div><!-- End Recent Posts -->

Step #3: Calling the Posts

      <div id="recent-posts">
      <?php $postslist = get_posts('numberposts=10&order=DESC'); foreach ($postslist as $post) : setup_postdata($post); ?>

      Still nothing here yet...

      <?php endforeach; ?>
      </div><!-- End Recent Posts -->

You can see that I’ve used a get_posts method, calling 10 posts, and they’re being ordered in Descending fashion. At the end, there is a php call to end for each post. This basically tells it to stop the attributes for the current post, move on, and apply them to the next post. Until we insert something between the PHP calls, nothing should happen.

Step #4: Making it Work

Now, to insert the magic code between the PHP calls; items to make this thing start working:

<div id="recent-posts">
<?php $postslist = get_posts('numberposts=10&order=DESC'); foreach ($postslist as $post) : setup_postdata($post); ?>

<a href="<?php the_permalink(); ?>"><img src="<?php echo bloginfo('template_url'); ?>/scripts/timthumb.php?src=/<?php
$values = get_post_custom_values("Image"); echo $values[0]; ?>&w=300&h=275&zc=1&q=100"
alt="<?php the_title(); ?>" class="footer-thumb"  width="40px" height="40px"  /></a>

<p><a title="Post: <?php the_title(); ?>" href="<?php the_permalink(); ?>"><?php the_title(); ?> &raquo;</a></p>

<p><?php the_time('F j, Y') ?> : <?php comments_number('0 comments','1 comment','% comments'); ?></p>

<?php endforeach; ?>
</div><!-- End Recent Posts -->

As you can see, the TimThumb script is going to work to add the thumbnail. You can see that it is pulling the thumbnail from a custom field named “Images”. In addition, it is also resizing the thumbnail from 300 x 275 pixels to 40 x 40 pixels. I’ve also given it a class called “footer=thumb” to control some of the style via CSS.

The second area of concern is the Post Title and information relating to date and number of comments. You can customize this area to display how you want.

Step #5: Styling

Now, you’ll need to style the list items a little bit to spit out how you want. As you can see, I’ve added a div class to control the post information, and another div class to control the actual style of the thumbnail:

Here’s the CSS that I used:

#recent-posts {
   width: 269px;
   margin: 0 0 20px 0;
   padding: 10px 20px 10px 0;
}
#recent-posts p {
   margin: 0 0 20px 0;
   font-size: 12px;
}
.footer-thumb {
   width: 40px;
   height: 40px;
   border: 3px solid #555;
   margin: 3px 6px 15px 3px;
   padding: 0;
   float: left;
}

Feel free to style it how you want. So this is how you add recent posts with thumbnails without having to utilize a WordPress Plugin. Hope it helps.

GD Star Rating
loading...
Recent Posts With Thumbnails In WordPress Without A Plugin, 4.8 out of 5 based on 11 ratings

This entry was posted in Web Design, Wordpress and tagged , . Bookmark the permalink.

Jacob Stoops

About the Author

is an SEO professional living in Columbus, Ohio and working for Rosetta Marketing. He's been working in the SEO industry since 2006, and has been blogging since 2009. Learn more about , a Columbus, Ohio SEO Expert.

Comments & Social Reactions

  • http://www.1blogger1.com Mark

    I see in the image for this post you've also shown a popular posts with image. Can you show how to do that as well?

    Many thanks for this and even more thanks if you can show me how to do it for popular posts too.

    GD Star Rating
    loading...
    • jacobstoops

      I'll put it on my list!

      GD Star Rating
      loading...
      • http://www.1blogger1.com Mark

        Thanks. Yours is on mine too. Enjoying reading away at all your stuff.

        Mark

        GD Star Rating
        loading...
  • http://www.1blogger1.com Mark

    Thanks so much for this tutorial. I just need a little bit of help with it.

    My images don't display but it displays a white box where the image is supposed to be.

    Then also the alt text as it is obivuosly noticing that there is no image to display.

    See here: techiezine.com Will be grateful for response to both my comments. Extremely grateful.

    Thanks.

    GD Star Rating
    loading...
    • jacobstoops

      I checked it…looks like you've got it all worked out. Hope my article helped :-)

      GD Star Rating
      loading...
      • http://www.1blogger1.com Mark

        I used a different way of doing things as the timthumb script was playing up. But it di help on my journey to getting it done. Thanks.

        GD Star Rating
        loading...
        • Pet

          thanks for this! very nice
          just having the same issue of the image not displaying:
          1. added the php file to theme folder. same root as index.html (where I am adding the code)
          2. added the custom field called Image to the post with the url address of the image; updated the post
          3. took out the /scripts directory in line 4, since I don't have that folder

          any help will be appreciatted,
          p.

          GD Star Rating
          loading...
  • http://lapadeh.com cascd

    sir.how about if we want this recent post on sidebar?
    not on the footer..plz help me….i realy appreciate it……..

    GD Star Rating
    loading...
    • jacobstoops

      You can absolutely move it anywhere you want. It is simply utilizing the tim thumb script and a little php, which should make it nice n easy…

      GD Star Rating
      loading...
      • http://lapadeh.com cascd

        tenkiu2!!=)

        GD Star Rating
        loading...
  • http://www.newsbythepeople.com/ Taylor Thompson

    Sooo close.

    I managed to get the setup to display horizontally, but I can't get any images to display in the boxes. If the OP is willing to help, that would be much appreciated.

    Site linked to in my name.

    GD Star Rating
    loading...
  • Pepin Ordona

    Hi there!

    What if I just want to display a specific category? Which line should I modify?

    Thanks!

    GD Star Rating
    loading...
    • Nicole

      Did you ever find a solution to this? I am also looking to use this script for a specific category.

      GD Star Rating
      loading...
  • http://www.omdhani.com Omdhani

    Thanks sir,i've been searching for this script, your code works like a charm :)

    GD Star Rating
    loading...
  • http://www.sqlsteps.com SQL Training

    Thanks a lot for this tutorial, I too needed to add something like this to my blog. Thanks a lot

    GD Star Rating
    loading...
  • Pingback: 20 WordPress Theme Hacks to replace the need for Plugins | JC

  • Marten

    Excellent script, thank you! But I wonder, is there a simple way to force WordPress to show recent posts in two columns. I found a great piece of code here – http://perishablepress.com/press/2008/08/04/two-column-horizontal-sequence-wordpress-post-order/ , but I can’t get it working with your script. Do you have any tips for doing so?nnRegards,nMarten

    GD Star Rating
    loading...
    • Anonymous

      Thanks for the comment. My script as it is now is pretty much based on a one-column layout. I’m sure that you could style it in such a way to make it appear on two columns. Maybe using an unordered list with display: block to make it move to the next line, of course the widths of each element would have to work out that way though.

      GD Star Rating
      loading...
  • Pingback: Recent Posts With Thumbnails In Thesis

  • Pingback: Membuat Recent Post dengan Image Tanpa Plugin | Rudy Susanto Blog No 1 di Medan

  • Pingback: Display Thumbnails For Popular & Recent Posts In Sidebar From Flickr

  • Pingback: wordpress by insomniacdeziner - Pearltrees

My Work
Agent SEO Portfolio | Ohio SEO

Connect with Me

803 Subscribers & Followers
  • Subscribe to the Agent SEO RSS Feed
  • Follow Jacob Stoops on Twitter
  • Follow Jacob Stoops on Facebook