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

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

Top comments (0)

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay