Featured images are used within WordPress in a number of different ways, depending on the theme you are using. Most themes use featured images as a thumbnail preview of one of the images in a post or page that is typically displayed on the homepage and archive pages.

This functionality was introduced with WordPress 2.9 and was originally known as “post thumbnails.” Most WordPress themes (including our very own) now use featured images for many other purposes such as in image galleries, feature sliders and page header images. For example, in our Full Frame theme, the featured image becomes the background image of the post.

Featured images are of course very important for creatives and anyone creating a WordPress site that contains a lot of images. To make use of featured images in any Graph Paper Press theme, all you need to do is select a featured image from the link on the right hand side of the screen in the post editor.

If the default featured image size that’s set in your theme works for your purposes, great. If not, it’s possible to change the size with a little code editing.

Why would you want to change the featured image size? Apart from making thumbnail galleries bigger or smaller, you may want to change the aspect ratio of the dimensions. Say for example you’re a landscape photographer and your portfolio is made up of sweeping panoramas. In this case, if the default featured image of the theme is square, it will end up cropping out most of your image. You can fix this by adjusting the dimensions manually to something more suitable.

Changing The Featured Image Size In functions.php

To edit the featured images sizes from the default, you’ll need to change some code in the functions.php file. This file can either be accessed via FTP or you can edit it directly in the WordPress dashboard under Appearance > Editor. I would always recommend the former approach over the latter.

Before you make any changes to this file, it’s always worth making sure you have a backup of the original version in case something goes wrong. If you don’t have the original theme files on your computer already, make sure you download at least the functions.php file and save it to a backup folder.

There are two different ways of resizing a featured image. To resize it proportionally (i.e. to avoid stretching or compressing the image) use the following code:

set_post_thumbnail_size( 50, 50 ); // 50 pixels wide by 50 pixels tall, resize mode

you can also choose to resize the image by cropping it with this code:

set_post_thumbnail_size( 50, 50, true ); // 50 pixels wide by 50 pixels tall, crop mode

This sets the default size of featured images.

Adding Additional Image Sizes

It’s also possible to add as many additional image sizes as you need by adding an extra line of code for each image size:

add_image_size( 'category-thumb', 300, 9999 ); // 300 pixels wide (and unlimited height)

You can then use this new size in your theme template with the following code:

<?php the_post_thumbnail( 'category-thumb' ); ?>

This feature is handy if you want to display featured images in a number of different ways. For example, you may want to set a thumbnail size for your image galleries and a larger size for your post header.

Remember that the images you upload must be at least as big as the dimensions you have set for your featured images. If you upload smaller images, they will be scaled up and will end up looking pixelated and blurry.

Rebuilding Your Featured Images

Changing the featured image size will only affect uploads from the time the code is changed. Any previous uploads will have been saved at the original dimensions, so you’ll need to re-generate them.

If you only have a few images to resize, you can upload them again manually. If you have more than a handful, it’s best to use a plugin like Regenerate Thumbnails to do all the hard work for you. This plugin can be accessed via your Tools menu and will resize one or more of the images in your media gallery that you select.

Future-Proof Your Edits With A Child Theme

The problem with making edits directly to your functions.php file is that they will be lost if a new version of the theme is released and you need to upgrade it. You can make a note of the code you’ve added and insert it into the new functions.php file but this can become tedious, particularly if you are making a lot of edits or there are new versions of the theme coming out frequently.

Using a child theme solves this problem, as when the parent theme is updated, the child theme is left intact. If you’re making any edits to the code of a theme, either in the functions.php file, or in the stylesheets or any other files, it’s always best practice to use a child theme.

We’ve already got a full guide to creating a child theme on the blog, but here’s what you need to know for our purposes.

To create a child theme, connect to your site via FTP and create a new folder in /wp-content/themes/ for your new child theme. It’s common practice to name the folder the same as the theme you are wishing to edit, with “-child” appended to it. For example: “awesome-child” if you are making a child theme of the Awesome theme.

You must create a stylesheet within your child theme folder, even if you do not intend to edit the CSS. Create a new file called style.css and paste in the following code:

/*
Theme Name: Awesome Child
Theme URI: http://example.com/awesome-child/
Description: Awesome Child Theme
Author: Graph Paper Press
Author URI: http://example.com
Template: Awesome
Version: 1.0.0
Tags: light, dark, responsive-layout, accessibility-ready
Text Domain: awesome-child
*/

@import url("../awesome/style.css");

/* =Theme customization starts here
-------------------------------------------------------------- */

Change the theme name and other details as appropriate.

To add the functionality to change the featured image into your child theme, you’ll need to create a new functions.php file, so go ahead and do this in the child theme directory. This  file will be loaded in addition to the parent theme’s functions.php.

The template for functions.php looks like this:

<?php //Opening PHP tag

// functions

?> // Closing PHP tag

You can then add your image resizing code between the PHP tags, so you’ll end up with something like this:

<?php // Opening PHP tag

if ( function_exists( 'add_theme_support' ) ) {
add_theme_support( 'post-thumbnails' );
set_post_thumbnail_size( 150, 150, true ); // default Post Thumbnail dimensions (cropped)

// additional image sizes
// delete the next line if you do not need additional image sizes
add_image_size( 'category-thumb', 300, 9999 ); //300 pixels wide (and unlimited height)
}

?> // Closing PHP tag

Once you’ve finished creating the code of your child theme, you’ll need to activate it. You can do this via the site dashboard, under Administration Panels > Appearance > Themes. Find your child theme in the list and click Activate.

Admire Your New Resized Featured Images

Changing the size of featured images and adding new image sizes is a pretty simple task but does require some code editing. Because of this, some users prefer to use a plugin to handle image resizing, but adding additional plugins is always a security risk. Getting under the hood and making some simple changes to the code like this can really help to build your confidence with using WordPress and will make it easier for you to customize themes and really make them your own.