There’s not a day that goes by that I don’t wish I had a chunk of time to totally revamp myuntangledlife.com. Oh…and I always want to tear up myuntangledmedia.com too. But the reality is, my calendar says none of that is a reality right now. And so I mope.

I was recently moping about it while staring at the screen and then it occurred to me there is actually a pretty simple way to address one of my major pet peeves on this blog, these little icon thingies that we’ve been using for years as the WordPress Featured Images (often referred to as Post Thumbnails) for posts, archives and on the homepage.

Old Homepage Thumbnail

My dog is really cute, but all the bloggers agreed they had to go. Times have changed in the years since we rolled out this most recent blog design, and pictures are everything on the web now. Not cute little pictures, bigger beautiful pictures. We wanted Featured Images more like we have now!

MyUntangledLife.com Featured Image and Excerpt

You’ll notice we also decided we wanted to add some more info to the homepage like WordPress Categories and Tags. So how does it all work? A few minutes and a few simple steps under the hood is really all it takes to switch up your WordPress theme, here’s how we did it.

First Stop: Functions.php

The functions.php file is located under the Appearance > Editor menu (on the left-hand side of the WordPress Admin screen) and is the place where you tell your theme to enable the Featured Image with this code:

add_theme_support( 'post-thumbnails' );

This next set of code is what I recently changed in order to increase the size of the images. (The 400, 200 numbers represent the new Featured Image size of 400px wide by 200px high.)

set_post_thumbnail_size( 400, 200, true );

Next Stop: Homepage.php

Now that you’ve told your theme to create 400 by 200px Featured Images, you need to tell your pages and posts where and how to display them. I started with the homepage and also made a few tweaks to the archives.php and single.php. These are all located under the same Appearance > Editor menu. Wherever you want the images to appear, add the following code:

<?php the_post_thumbnail(); ?>

Wrap it up in a bit of styling like this:
</p>
<div class="thumb"><?php the_post_thumbnail(); ?></div>
<p>

Add in your post title, author, tags, categories, etc to finish off the new look and you’re done! Unless…

Final Stop: Regenerating Thumbnails

If you’re just starting out you can skip this step! But if you’re like us and changing sizes of your already existing thumbnail images, you won’t get any love from your new code without regenerating your thumbnails. I used a great plugin aptly named Regenerate Thumbnails and it did just that with ease.

Take it a step further and include these images in your MailChimp RSS to Email Campaigns. There is so much flexibility in WordPress and this is just a minuscule example of a way to make a big change to your website layout. Thumbs up to the_post_thumbnail!

Get to know Jacob Clayton (91 Posts)

My name is Jacob but my friends call me Jake. Due to some strange cosmic alignment, a high percentage of the rest of the world calls me Jason. So I answer to all three. By day, I'm Chief Geek at MyUntangled Media, LLC, and co-founder of animal charity, Friends of Ruby. By night, I am part struggling musician, frustrated writer, wanna-be chef, and obsessed dog lover. I started this blog mainly to test out new stuff in WordPress, work on my design and writing skills, and showcase some folks with all kinds of talents and great stuff to say. Thanks for getting untangled with us!


Tagged with →