Genesis - Add new image sizes to your theme

Our themes come pre-installed with custom image sizes beyond the normal Small, Medium, and Large default sizes. The custom image sizes are typically used to display your featured images in different shapes/sizes throughout your site. If you need to add a different image size, here's how to do that.

Adding a custom image size

Before making any edits to your Functions.php file, please make sure that you have access to the  File Manager in your cPanel or FTP. The Functions.php file is incredibly sensitive and if a mistake is made, it can cause the "white screen of death" on your site. Having easy access to your File Manager means you can easily upload a fresh copy of the Functions.php file if the need arises.

1. Go to WordPress > Appearance > Editor > Functions.php.

2. Locate this section in the code:

Each 17th Avenue theme has different image sizes, so the specific names and dimensions may look different than this in your theme.

3. Add the following code snippet right below that section:

add_image_size( 'custom-image', 700, 500, TRUE );

4. In the code above, replace the first value (700) with your desired image WIDTH.

5. Replace the second value (500) with your desired image HEIGHT.

6. Click Update File.

7. You'll need to regenerate your thumbnails so that your images will format into your new custom image size. You can check the box that says "Skip regenerating existing correctly sized thumbnails."

Using your custom image size

Your new  custom-image size can be used anywhere that you can select the other theme image sizes. Some examples include:

  • Blog post featured images: go to Genesis > Theme Settings > Content Archives > Image Size.
  • Genesis Featured Posts widget: go to Appearance > Widgets > (widget area) > Genesis Featured Posts > Image Size.