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.

About Luc Arnold

I am a Web Consultant and Blogger with over 8 years of experience deploying, customizing and working with various web technologies. I am based out of Canada and have a wife and daughter. I love learning new web technologies and techniques and blogging about it all. I also love a good cup of coffee, hanging out with my wife and daughter, reading the latest tech books and newspapers and listening to music.

Comments

  1. Straight forward and easy to follow. Thank you!

  2. You’re welcome Oscar! Glad you liked it!

  3. Nice post, just wanted to thank you for the shout out :-)

  4. Very welcome David! Thanks for building this!!!

  5. Quick and too the point. We like it that way! Thanks.

  6. Glad you like it Mitch!

    Luc

  7. 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 :)

Speak Your Mind

*

WP-SpamFree by Pole Position Marketing