Wordpress Recent Posts with Thumbnails (without a plugin)
1069
single,single-post,postid-1069,single-format-standard,et_monarch,ajax_fade,page_not_loaded,,qode-theme-ver-6.1,wpb-js-composer js-comp-ver-4.3.5,vc_responsive
 

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

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.

No Comments

Sorry, the comment form is closed at this time.

Want to learn SEO?

By connecting via email, you’ll get my thoughts from 9+ years
of experience on the latest happenings in SEO, and much more.

Pin It on Pinterest

Like this content?

Why not share it with your friends!