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(); ?> »</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.
loading...
Pingback: 20 WordPress Theme Hacks to replace the need for Plugins | JC
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