Adding Custom Image Sizes to WordPress 3.5 Media Manager

The new media manager in WordPress 3.5 is totally awesome and out-of-the-box allows you to insert three different sizes of image uploads into your posts.

Sometimes however you may need to add images with a specific size into your posts or pages.

Here’s how to add some custom image sizes for use with the WordPress 3.5 Media Manager.

How WordPress Works with Images and Thumbnails

By default WordPress will create a maximum of four copies of every image you upload to the Media Library, in different sizes.

Three of these files (called thumbnails) are sized at 150×150, 300×300, 640×640 pixels respectively with the fourth being the original image you uploaded.

WordPress does this to help serve up images quickly, rather than using processor intensive scripts to dynamically resize a single image.

Yes it can lead to a lot of duplication and addition disk space but space is so cheap nowadays it’s hardly an issue at all.

Thumbnails will be created only up to the size of the original image as there’s no point having a 25×25 icon being blown up to 640×640.

Adding Custom Image Sizes

Enough waffle and onto the juice!

To add custom image sizes to your WordPress website you will need to place the following code in your functions.php file.

[gist id=42bf52b56fc1f58cd48e3351155daffd file=code-snippet-1.php]

Lines 20-27

We start at the bottom of the code and I’ll work my way back up.

Here we set up a function that will add four new thumbnail sizes to our WordPress website.

The function [codelet]add_image_size()[/codelet] is the one that’s doing the work.  Have a look at the linked codex for an explanation of the parameters and to see how you can configure the way the thumbnails are cropped.

Line 26
Adds a WordPress filter to the filter hook [codelet]image_size_names_choose[/codelet] which outputs the list of available thumbnail sizes to choose from.

I suggest reading up on WordPress filters if you’ve never heard about them before.

Essentially they allow you to alter the way WordPress outputs something to the screen.

The second parameter to [codelet]add_filter()[/codelet] is the name of our custom function that we apply to the filter [codelet]zpd_insert_custom_image_sizes()[/codelet].  More on that in a bit.

Line 28
Calls our [codelet]zpd_custom_image_setup()[/codelet] function on the [codelet]after_setup_theme[/codelet] hook.

This lets WordPress get all of the theme processing done and out of the way before you start badgering around with the user interface (UI).

Lines 2 – 18
Defines our filter function [codelet]zpd_insert_custom_image_sizes()[/codelet].

The code is commented so I won’t run through it line by line here.

Essentially it looks to see if there are any additional thumbnail sizes to add (from [codelet]add_image_size()[/codelet]) and then appends them to the default list.

Behold – New Image Sizes!

And the result of our hard work is that we get new custom image sizes in our WordPress 3.5 Media Manager (this is our own Media Manager hence the different sizes from the code above in case you were wondering!)