JacobStoops.com

I'm an Associate Director of SEO at Rosetta, a dedicated husband, dad, part-time crooner, lover of mafia movies, eternally tortured Cleveland sports fan, digital marketer, blogger, and WordPress aficionado.

Subscribe


Get my thoughts the latest updates in SEO and other digital marketing topics.

Recent Tweets


"Browns are making plenty of moves, but don't have much to show for them https://t.co/TZT3syuCC9 @jasonlacanfora // Another LCF hit piece."

How To Create WordPress Recent Posts With Thumbnails (Without A Plugin)

Jacob StoopsJacob Stoops

Today, I’d like to get into the world of WordPress blog design—specifically the topic of adding post thumbnails to your WordPress 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 should be fairly simple.

Step #1: 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 #2: 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 #3: 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 title="Post: <?php the_title(); ?>" href="<?php the_permalink(); ?>"><!--?php the_title(); ?--> »</a>

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

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

Step #4: Adding Thumbnails (Optional)

To complete the process of adding the thumbnail, I recommend using WordPress’ native script for pulling in Featured Images on a per-post basis. It’s much less easy to hack that the previously-used TimThumb script.

<div id="recent-posts"><!--?php $postslist = get_posts('numberposts=10&order=DESC'); foreach ($postslist as $post) : setup_postdata($post); ?-->
<div class="recent-post-thumbnail"><!--?php if ( has_post_thumbnail()) : ?--><a title=""<?php" href="<?php the_permalink(); ?>">" > <!--?php the_post_thumbnail(); ?--> </a> <!--?php endif; ?--></div>
<a title="Post: <?php the_title(); ?>" href="<?php the_permalink(); ?>"><!--?php the_title(); ?--> »</a>

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

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

As you can see, the Featured images script is going to work to add the thumbnail. You can see that it is pulling the thumbnail from a custom field named “Images”.

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 – which is controlled by default using the  wp-post-image  class:

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;
}
.recent-post-thumbnail {
   float: left;
   padding: 0;
   margin: 0 6px 15px 0;
}
.wp-post-image {
   width: 40px;
   height: 40px;
   border: 3px solid #555;
}

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

Note: This post was based on a much older version of the site. As such, there is no longer a demo to refer to and the content has been updated.

Want cutting-edge SEO tips?

Want cutting-edge SEO tips?

Join my mailing list to receive basic-to-advanced SEO tips and advice, and take advantage of my 10+ years of SEO experience.

You have Successfully Subscribed!

I'm an Associate Director of SEO at Rosetta, a dedicated husband, dad, part-time crooner, lover of mafia movies, eternally tortured Cleveland sports fan, digital marketer, blogger, and WordPress aficionado.

Email Opt-In

Want cutting-edge SEO advice?

Join my mailing list to receive the latest news and updates on SEO, Google, and more.

You have Successfully Subscribed!

Pin It on Pinterest