WP Snippet #001 Adding custom images sizes to your WordPress theme.
Tags: wordpress, webdev, tutorial
Published: 2020-01-02 18:52:48

---
title: WP Snippet #001 Adding custom images sizes to your WordPress theme.
published: true
description: How th add custom images sizes to your WordPress theme and show the new sizes in the size selector in the editor and media dialog.
canonical_url: https://since1979.dev/snippet-001-adding-custom-images-sizes/
cover_image: https://since1979.dev/wp-content/uploads/2020/01/snippet-001-adding-custom-images-sizes-to-your-theme.jpg
tags: wordpress, webdev, tutorial
---
[Originally posted on my website on January 2th 2020](https://since1979.dev/snippet-001-adding-custom-images-sizes/)

## Introduction
For the new year I thought it would be nice to start a new weekly-ish series of posts each discussing a useful WordPress code snippet. I will document the code as much as posible so you can quickly find more information and adjust the code to you specific need.

So... here is the first one...

### How to add custom image sizes to your WordPress theme.

With this code snippet we are going to register some custom images sizes with WordPress, and then add these new sizes to the size selector in the editor and media dialog so users can actually select these sizes for their posts or pages.

{% gist https://gist.github.com/vanaf1979/ecf9c744c5b0f60a0a7438af63aa3954 %}

With the code above we add an action to the *[Init](https://developer.wordpress.org/reference/hooks/init/)* hook and register a callback function called *register_thumbnail_sizes*.

Inside the *register_thumbnail_sizes* function we first use the *[add_theme_support](https://developer.wordpress.org/reference/functions/add_theme_support/)* function to add support for *'Post-Thumbnails'*. This will show the *'Featured image'* option on the sidebar inside the editor so users can set a featured image for their posts and pages. This is not mandatory but very useful in a lot of cases.

Then we use the *[add_image_size](https://developer.wordpress.org/reference/functions/add_image_size/)* function to actually add our custom images sizes. the *add_image_size* function takes the following parameters:

-   **$name**: A unique name/handle for the image size.
-   **$width**: The desired width.
-   **$height**: The desired height.
-   **$crop**: Image cropping behavior.

For the cropping of the image their are a couple of options. If set to *false* the image will be resized to fit the given dimension. If set to *true* the image will be proportionally cropped and centered inside the given dimensions. And lastly you can pass an array indicating a custom crop behavior. For this last option check out the [documentation](https://developer.wordpress.org/reference/functions/add_image_size/).

### Add custom image sizes to the images size selectors

Next we'll add our custom sizes to the various image size selectors so users can select these images sizes from the Gutenberg image block, media upload dialog etc...

{% gist https://gist.github.com/vanaf1979/c8a010f5e5033226b31af8d6463fe39b %}

Here we add a filter to the *[image_size_names_choose](https://developer.wordpress.org/reference/hooks/image_size_names_choose/)* hook and register a callback function called *custom_image_sizes_in_select*.

The callback function receives a *$sizes* array containing the images sizes already shown in the select option. To add our own sizes we use the *[array_merge](https://www.php.net/manual/en/function.array-merge.php)* function to merge the existing array with a new array containing the sizes we want added.

In the new array we need a *key/value* pairs for each size we want to add, where the *key* is the *name/handle* of the size we registered, and the value is the name that is displayed inside the select. Note that we use the *__()* function for the value to make the displayed text translatable.

#### Commetn and Follow
Please let me know what you think of this new post series and what you like to see discussed. Also let me know if I made any mistakes :p

Follow me on twitter [@Vanaf1979](https://twitter.com/Vanaf1979) or here on Dev.to [@Vanaf1979](https://dev.to/vanaf1979) to be notified about new articles, and other WordPress development related resources.

**Thanks for reading**