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.
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!
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!