How to Create More Featured Image Sizes for StudioPress Child Themes

Today I wanted to show you how to create more featured image sizes for your StudioPress child WordPress themes.  I am a big lover of what StudioPress is doing with their child WordPress themes and the Genesis framework so recently when I decided that I wanted a few different sizes of featured images on a design I am working on for a website redesign project for one of my other sites.

I went looking for an easy and straightforward way to add this into a child theme and found an easy way to achieve this.  For those of you who don’t know what featured images are or where to find them they are usually located on a standard post page and you can upload images and set them as the featured image.

Modifying the functions.php file

Now its time for the fun stuff.  We are going to modify the functions.php (also known as “Theme Functions” in StudioPress child themes) file in the child WordPress theme to show some different sizes of featured images.  In order to access this file you will need to click on the “Editor” link under the “Appearance” menu section in the backend of your WordPress site and from there you should see some menu options on the right hand side of the page similar to the screenshot below.

Now that we are in the functions.php file we need to modify some code to have different sizes of featured images.  In order to do that we need to locate the lines of code to modify in the functions.php file.

add_image_size('home-top', 400, 270, TRUE);
add_image_size(
'home-bottom', 215, 140, TRUE);

To add some custom sizes for featured images by adding the following.  Please keep in mind that you can change the values for sizing below to suit your needs but test it first to make sure it looks the way you want it to…

add_image_size('home-top', 400, 270, TRUE);
add_image_size(
'home-bottom', 215, 140, TRUE);
add_image_size(
'home-extra', 120, 100, TRUE);

By adding this extra line of code you can make use of additional sizes of featured images on your child themes for WordPress.  Have a look at the transition from how the code influences what you can see in the UI.  I’ve used the “Genesis Featured Grid” plugin for the purposes of this article.

As you can see when you code in the functions.php file you are going to see these additional choices in the front-end of the Widget user interface.  I used the “Genesis Featured Grid” plugin was developed by David Benedetti at Heavy Digital Creative which allows you to create a featured grid in the Genesis Framework for your website.

Get my "Shopify Made Simple" for free

This guide covers the core concepts that you need in order to setup a Shopify ecommerce store for the very first time without any knowledge of coding needed. The guide walks through everything from product creation to selecting a domain name for your Shopify store.

Comments

  1. says

    Hi Luc

    I’ve just added some 250×250 code in which I get in the drop down box in the featured page image size, but its not changing the size of the image. Any thoughts, its not helping that i’m drinking red wine :)

Leave a Reply

Your email address will not be published. Required fields are marked *

WP-SpamFree by Pole Position Marketing