This tutorial answers a question many Genesis users have: “How do I change my ‘Blog’ and ‘Archive’ page image sizes?”
Many of us like to know how to customize things, especially our new website or blog. We all want our sites to have a special, customized look and feel that represents our personality. Typically, images are the things that really catch our attention, before we ever start reading any text! When setting up and customizing your new Genesis theme, one of the first things you’d like to customize is the way images on your blog and archive pages look.
Generally speaking, Genesis themes are pre-configured with a sufficient number of preset image sizes for Blog and Archive pages. You can change these settings by logging into your WordPress Admin area, and navigating to: WordPress Admin -> Genesis -> Theme Settings
Changing Genesis Settings
Scroll down to the Content Archives section as you see below:
The most important settings area in this section will be the Featured Image:
- Include Featured Image? – Make sure this box is ticked
- Set your desired image size (thumbnail 150×150 usually looks best)
- Select your desired image alignment (Left or Right)
The default image sizes you see listed above in the Genesis settings window, are defined in: WordPress Admin -> Settings -> Media. Any additional sizes you see listed in the drop-down box are defined in your themes functions.php file:
Note: Most blogs you see use a left-aligned, thumbnail-sized (150×150 pixels), image on their blog and archive pages, and this usually gives you a very nice, clean layout. However, in order to break away from the crowd, you may wish to choose a right-aligned image, or perhaps another option would be to show much larger images and less content (more like a photo blog).
While most Genesis themes have a great design, and generally look great right out of the box with left-aligned thumbnail images, you may run into problems if you’re attempting to customize your theme beyond it’s original design capabilities.
In order to obtain a completely custom look, you may require either a larger or smaller image than any of the preset sizes. If one of the preset image sizes isn’t working for you, I’ll show you the correct way to get the perfect image size you’re looking for, without using a plugin!
The next section of this tutorial is for users who’ve previously edited their functions.php file, or they are at least familiar with editing PHP code. If you don’t feel confident about editing code, please see the end of this post for more help implementing this tutorial.
Adding Code To Functions.php
To add a custom image size to your blog, please open your functions.php file with an FTP program. The file will be located in your themes folder (E.g. /html_dir/blog/wp-content/themes/mattvaden). Open the file and simply add the following lines near the bottom of the file:
//* Add image sizes
add_image_size( 'mini-thumbnail', 75, 75, TRUE );
The correct syntax for this function is:
add_image_size( ‘your-custom-name’, $width, $height, $crop)
(string) (Required) Image size identifier.
(int) (Required) Image width in pixels.
(int) (Required) Image height in pixels.
(bool|array) (Optional) Whether to crop images to specified width and height or resize. An array can specify positioning of the crop area.
Default value: false
The New Settings
After adding your own, custom image size to your functions.php file, you’ll notice it’s been added to the list in: WordPress Admin -> Genesis -> Theme Settings
Dealing with Existing or Old Images
There is one final point I should let you know about. Simply adding the configuration I just showed you, along with changing your Genesis settings page, will not update any older or existing images you’ve already uploaded to your site. The various image sizes that WordPress creates, are only created once, during the initial image upload to WordPress.
If you wish to update your older, existing images so they display properly with your newly created sizes, you’ll need to download, install, and activate the following WordPress plugin. Force Regenerate Thumbnails. After this plugin has completed it’s run, and you’ve verified the new image sizes are showing, you may delete this plugin from WordPress. You won’t need it any further unless you decide to make a change such as this again in the future. You can of course add it back at anytime.
If you’d like help installing this update, please let me by clicking the button below. Once you’ve filled out the form, and contacted me, I’ll email you with further instructions. I look forward to helping you!Get WordPress Assistance! ›