Don’t you just love a site with high quality images?
One of the best ways to make sure your images look great is to make sure you resize them properly using the correct aspect ratio.
Then you can add your image sizes to any theme regardless of your themes default image sizes.
There’s different ways to add your own custom image size support to WordPress.
One of the easiest is to use the WordPress add image size function.
Or you can simply install a plugin.
Lets look at adding the code before we use a plugin for the job.
WordPress Add Image Size Function
<?php add_image_size( $name, $width, $height, $crop ); ?>
The above code needs to be edited before you use it because the opening and closing php tags, <?php ?> , are generally already included in your themes functions.php file.
- $name – Create a name for the custom image size
- $width – Add the image width in pixels
- $height – Add the image height in pixels
- $crop – Add True or False to crop your custom image size
Next step. Add custom image size code.
/** Add new image sizes */
add_image_size ( ‘slider’, 600, 300, TRUE );
Simply add this code to your child theme’s functions.php file and change the 4 parameters to your own custom settings.
You’ll need to make sure your theme supports this function or add this code to your theme’s functions.php file.
add_theme_support( 'post-thumbnails' );
If you’re a Genesis theme user, you’ll find this code already included in your Genesis theme frameworks init.php file, not your child’s theme’s functions file.
Note: Adding this function won’t add more image sizes to the standard Media settings.
Nor will it add additional image sizes to your Add media/Insert into post pop up box.
Plugins To Add & Change Images Sizes
To add more image sizes to insert into posts and pages, you’ll need to install a plugin like one of these 3:
- Custom Image Sizes
- Simple Image Sizes (This is the most popular)
- Additional image sizes (zui)
I only tested the 2nd plugin which also enables you to regenerate thumbnail image sizes which i won’t go into in this post.
Once you add custom image sizes in your Media settings after installing the plugin, you’ll find these image sizes available to insert into your posts and pages.
Display Custom Image Sizes On Image Upload Screen
If you don’t want to install another plugin, you can add this code to your child themes functions.php file.
function add_image_sizes() {
add_image_size( 'featured', 285, 100, TRUE );
add_image_size( 'videos', 300, 200, TRUE );
add_image_size( 'slider', 1140, 480, TRUE );
}
add_action( 'init', 'add_image_sizes' );
function display_image_sizes($sizes) {
$sizes['featured'] = __( 'Featured Image' );
$sizes['videos'] = __( 'Video Image' );
$sizes['slider'] = __( 'Slider Image' );
return $sizes;
}
add_filter('image_size_names_choose', 'display_image_sizes');
The names in Blue will appear next to your custom image sizes which will be added to your Add Media upload screen.
You can edit this code with your own names and add more image sizes easily.
Video Tutorial
Adding Custom Sizes for Existing Image Features
WordPress will create additional thumbnail sizes after you add custom size code to your themes functions file. You’ll find any existing features which offer you a selection of image sizes to choose will now include your additional image sizes:
Example:
By default, the Genesis featured post widget offers several image sizes to choose from for displaying featured images in a widget area with a featured post(s). By adding custom image sizes to your child themes functions.php file as shown above, you get to choose from additional sizes when displaying featured posts in any widget area.
You can use this tutorial to add additional custom image sizes for other features already included in the child theme you have active.
Examples are:
- Portfolio image sizes
- Slider image sizes
- Featured pages image sizes
One of the great things about using the Genesis theme framework is that many of the core WordPress functions also work in this theme framework and won’t lock you in if you decide to change themes down the track!
I’ll be posting more simple tips about how to use images in WordPress shortly.
Brad Dalton
@wpsitesdotnet
Latest posts by Brad Dalton (see all)
- How To Make Your Nav Menu Sticky - May 21, 2013
- How To Change Author & Comment Box Gravatar/Avatar Image Size - May 21, 2013
- Create A Custom Meta Box For A Custom Field - May 18, 2013
