Automatic Image Resizing & Cropping for WordPress Theme Development

Whenever I create a new WordPress theme, I like to make image management as easy as possible for the end user, including myself on my niche sites. Here’s what I use that enables me to upload a single image to the WordPress media library, and automatically display web optimized versions in different sizes throughout my theme.

Mathew Ruddy has a great addon for WordPress that does just this. It is an image resizing function that provides WordPress users with an alternative to Timthumb, which is another popular image resizing function but has been know to have some security issues. Now that WordPress has image resizing and cropping built right in, we can utilize that native resizing functionality and mimick the Timthumb resizing functionality.

Mathew Ruddy’s function is also compatible with older and newer versions of WordPress. I also use this new function in conjunction with the WP Retina 2x plugin.

Here’s how I use this resizing function

You can download the code here. (Look for the “Download ZIP” button on the bottom right of the page).

First, I take the resize.php file from the package and add it to my includes folder in my theme. I have it set up like this /my_custom_theme/includes/resize.php

Second, I include the resize.php file in my functions.php file.


include_once(TEMPLATEPATH.'/includes/resize.php');

Third, I add this custom function to my functions.php file.


// generate thumbnail 
if (!function_exists('thumb')) { 
    if (function_exists('matthewruddy_image_resize')) { 
        function thumb($url, $width = NULL, $height = NULL, $crop = true, $retina = false) { 
            $image = matthewruddy_image_resize($url, $width, $height, $crop, $retina); 
            if ( is_wp_error( $image ) ) return array('url' => $url); 
            return $image; 
        } 
    } else { 
        function thumb() { 
            return false; 
        } 
    } 
}

Fourth, I add the thumbnail image sizes that I will use throughout my site to my functions.php file. This is necessary in order to use the WP Retina 2x plugin on the new files the resize function creates.


// Add Thumbnail Theme Support 
add_theme_support('post-thumbnails'); 
add_image_size('large', 700, '', true); // Large Thumbnail 
add_image_size('medium', 250, '', true); // Medium Thumbnail 
add_image_size('small', 120, '', true); // Small Thumbnail 
//add_image_size('custom-size', 700, 200, true); // Custom Thumbnail Size call using the_post_thumbnail('custom-size');

Now that I have everything set up, I can go ahead and use the new function to display images of different sizes in my WordPress custom theme.

To display an image of a certain size, I call the function like this:


$image_url = get_an_image_url_somehow();
$image = thumb($image_url, 500, 500);
echo $image['url'];

$image will contain 4 values, $image[‘url’], $image[‘width’], $image[‘height’] and $image[‘type’] that you can use in your theme. If you are going to use the WP Retina 2x plugin with this, just make sure to add any thumbnail sizes to your functions.php file like explained above so that the Retina plugin can access them.

For more information about Mathew Ruddy’s resize function, check this out.

Leave a Reply

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