thumbnail

Working with wordpress is a breeze, mainly because the architecture of the content management system is rock-solid and easy to understand but most importantly because the community is so big and can offer you solutions for all your needs, through themes and plugins. Those who run websites built on WordPress, are using a series of plugin which can make their life easier and more productive, but some things really don`t require the need of a plugin.

We all understand the importance of wp plugins, but because the wordpress development is moving at speed, there might be some nasty issues between them and system. This is happening when wordpress is updating to a new version and some of the plugins become incompatible with the new code.

Therefore, there must be a balance between the plugins you use and the ones which can be replaced with pieces of code which are making the same thing as the plugin. Of course, you can`t replace a plugin which is dealing with page cache, unless you`re a programming machine, but you can, for example, create some code which displays your latest posts. Speaking about that, this is exactly what I want to show you: How to display your recent posts, with thumbnails, without using a plugin.

The file which deals with custom code is called functions.php. If you don`t have one yet in your theme, that`s very bad, because you`re limited to using latest wordpress features, such as custom menus, widgetized areas, post thumbnails, shortcodes, and the list continues…

Okay, let`s get started. Open functions.php or create it in case you don`t have one. To make use of the thumbnails, firstly we need to activate them using the next piece of code:

<?php
if ( function_exists( 'add_theme_support' ) ) { 
        add_theme_support( 'post-thumbnails' ); } //Adds thumbnails compatibility to the theme
set_post_thumbnail_size( 200, 170, true ); // Sets the Post Main Thumbnails
	add_image_size( 'recent-thumbnails', 55, 55, true ); // Sets Recent Posts Thumbnails
?>

What I`ve written here sounds like this: If the wp theme doesn`t support thumbnails, then enable the support for post thumbnails (add_theme_support). Once the theme supports thumbnails, create a thumbnail pattern called post-thumbnails with dimensions of 200x170px and the ability to be cropped(true). This set of thumbnails should be used for the post thumbnails only. For any purposes, create a new thumbnail pattern by using add_image_size. So in my example, I created another thumbnail pattern of 55x55px, called related-thumbnails, which will be used for generating the thumbnails of recent posts.

“recent-thumbnails” can`t be displayed, unless the posts have thumbnails, set through the “Set featured image” panel, from the post admin page. This panel has been activated when we enabled the post-thumbnails feature.

For more info about wordpress thumbnails, check out wordpress codex.

Now that we`ve enabled post thumbnails, let`s write the function, inside the same functions.php file.

<ul>
<?php
function recentPosts() {
	$rPosts = new WP_Query();
	$rPosts->query('showposts=3');
		while ($rPosts->have_posts()) : $rPosts->the_post(); ?>
			<li>
				<a href="<?php the_permalink();?>"><?php the_post_thumbnail('recent-thumbnails'); ?></a>
				<h2><a href="<?php the_permalink(); ?>"><?php the_title();?></a></h2>
			</li>	
		<?php endwhile; 
	wp_reset_query();
}
?>
</ul>

The code is easy to understand. We assigned a new wp query to the rPosts variable which acts exactly like a wordpress loop, but for the things we asked it to use(showposts=3). So, as long as the query finds posts, generates a list of items which displays the latest 3 posts with thumbnail() and title().

The piece of code is written in a minimal manner, but you can add divs and classes to stylize the widget.

In order to make it work, you have to call the function anywhere in your wordpress theme(single.php, footer.php, sidebar.php, etc), with the next line of code. Most of the people are using it inside the sidebar.

<?php echo recentPosts(); ?>

If you want to see an example of the recent posts widget, check out my sidebar, especially the “Recent” tab of the tabbed widget.

I thank you for your time and hope you`ve learned something today. If you have any questions or feedback, don`t hesitate to leave a comment below.

Written by Madalin Tudose

Madalin Tudose is a web designer and developer who loves to inspect websites for new designing techniques and trends. He`s the founder of Ourtuts, where he blogs about anything related to web development.

  • Akex

    Worked like a charm. Thanks

  • http://www.tofakie.de Tilo

    Thanks for the snippets. Works just great with the html/php widget I’m using.

    • http://www.OurTuts.com Madalin Tudose

      I`m glad it works for you! Cheers!

  • Fernando

    Hi! I tried to add your code, but there’s seem to be a problem with a plugin in i recently installed called wordpress editor, do you have any idea why could it be?

    Thanks :)