DEV Community

Cover image for Custom WP Thumbnail Sizes
Simon Lee
Simon Lee

Posted on

Custom WP Thumbnail Sizes

By default, WordPress creates 5 image files when you upload a featured image (the original plus 4 smaller versions). Adding a custom-sized image for featured images is possible by using the add_image_size() function inside your functions.php file.

As an example, let's say you want a 200 x 200 image with the nickname of "my_avatar".

function my_site_features() {
  add_image_size('my_avatar', 200 , 200, true);
}
Enter fullscreen mode Exit fullscreen mode

As you can see, the add_image_size() function accepts 4 arguments: the name, width, height, and a boolean value for whether or not you want to crop the image (true=crop, false=no crop).

Quick side note

To retroactively regenerate "my_avatar"-sized thumbnails for all your existing image uploads, one good option is to use the Regenerate Thumbnails plugin.

As an alternative, you can use Jetpack's Photon Module.

Displaying the "my_avatar"-sized image on a web page

Let's say you want to display that "my_avatar" custom-sized image in your single-event.php template file. All you have to do is add "my_avatar" as an argument for the_post_thumbnail(). For example:

the_post_thumbnail("my_avatar");
Enter fullscreen mode Exit fullscreen mode

Top comments (0)