The Must Have for WordPress
The Must Have for WordPress
×
  • Home
December 5, 2019
WordPress

Custom image sizes for your WordPress theme

by Martin Jost
No comments
2 min Reading Time
782 Views
5 Score
3 Likes
Share on Facebook Tweet on Twitter Share on Linkedin Pin on Pinterest Send via E-Mail Send via WhatsApp

WordPress has 5 default formats for image sizes, which are automatically created every time after uploading an image file. It will be stored in the media folder ../wp-content/uploads/../. The default image sizes are the following:

  • Thumbnail (150px x 150px max.)
  • Medium resolution (300px x 300px max.)
  • Medium large resolution (768px x 0px max.)
  • Large resolution (1024px x 1024px max.)
  • Original Image-resolution (unbearbeitet)

In the template files of a theme or plugin, you can use the WordPress function the_post_thumbnail() or get_the_post_thumbnail() to get different image sizes. The size of the image must be specified as follows:

Read more about WordPress and the image sizes.

How can I add custom image sizes?

There are some use cases where it makes sense to use user-defined image sizes that deviate from the WordPress default image sizes. For example, if you want to use a large and wide image size for the website header or one or more other resolutions for large image views.

In this case, we have the opportunity to use the WordPress filter image_size_names_choose to create your own individual image sizes. This can be done as follows:

Simply add new image sizes via the add_image_size() function, for example inside the after_setup_theme action of your functions.php file. In the above example I have added several variants of the two new image sizes “Square” and “Wide”.

With each new image upload, your new image sizes are automatically created and are now available in WordPress.

Old pictures have to be regenerated!

Please note: The new image sizes are not automatically created for old images that were previously uploaded. For this, all image sizes must be regenerated. In this case you can use a plugin like Regenerate Thumbnails:

Regenerate Thumbnails

Once the plugin has gone through, your new image sizes are also available for all older WordPress images.

How can I select individual image sizes in WordPress?

By adding new WordPress image sizes, themes and plugins can now access them. However, if you are in the WordPress backend and want to use your new image sizes in a post, they are not automatically available in the image size selection for a particular image.

To make new image formats selectable we use the WordPress filter image_size_names_choose and including the following snippets of code, for example into the functions.php file of the theme:

Make sure the unique names $sizes['image_square_thumbnail'] for the new image sizes are the same as the names we added using the add_image_size('image_square_thumbnail', '…') function.

The new image sizes should now also be available in the WordPress backend inside the image size selection dropdown.

Last updated: December 5, 2019

Custom image sizes for your WordPress theme Score: 5 / 5 (3votes)
Share on Facebook Tweet on Twitter Share on Linkedin Pin on Pinterest Send via E-Mail Send via WhatsApp
The Author
Published by
Martin Jost

View all posts by Martin Jost

Related Posts
U
PHP Use PHP to remove certain characters or words from a string

The default PHP function str_replace(); is a useful tool if we want to remove certain characters ...

Read More
O
WordPress Open Graph in WordPress einbetten, ohne Plugin

Das Open Graph-Protokoll ermöglicht es, dass jede Webseite als “rich object” im &#82 ...

Read More
A
WordPress Add WordPress images to the RSS feed

By default, if you have enabled the WordPress RSS feed, images will not be included in the RSS f ...

Read More
Read more
C
Previous Post
Customize the default WordPress Image Compression
A
Next Post
Add WordPress images to the RSS feed
Leave a Reply Cancel reply

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

  • Imprint
  • Privacy Policy
© 2016-2023 - wphave - The Must Have for WordPress
Login

Lost your password?

RequiredEssential cookies enable basic functions and are necessary for the proper functioning of the website.
  • Name: Cookie Status
  • Provider: Owner of this website
  • Purpose: Is necessary to check whether the user's web browser allows cookies.
  • Privacy Policy: https://wphave.com/privacy-policy/
  • Cookie Name(s): cookie_status
  • Duration: 1 Minute
  • Name: Cookie Consent
  • Provider: Owner of this website
  • Purpose: Is necessary to check whether the user agrees to allow opt-in cookies or not.
  • Privacy Policy: https://wphave.com/privacy-policy/
  • Cookie Name(s): cookieconsent_analytics, cookieconsent_marketing, cookieconsent_status
  • Duration: 1 Year
  • Name: Like Button
  • Provider: Owner of this website
  • Purpose: Is necessary to check whether the user has already gave a like for a specific post.
  • Privacy Policy: https://wphave.com/privacy-policy/
  • Cookie Name(s): like_btn_{POST_ID}
  • Duration: 21 Days
  • Name: Post Rating
  • Provider: Owner of this website
  • Purpose: Is necessary to check whether the user has already rate a specific post.
  • Privacy Policy: https://wphave.com/privacy-policy/
  • Cookie Name(s): rating_{POST_ID}
  • Duration: 7 Days
AnalyticsStatistics cookies collect information anonymously. This information helps us to understand how our visitors use our website.
  • Name: Google Analytics
  • Provider: Google LLC
  • Purpose: Google cookie for website analysis. Generates statistical data on how the visitor uses the website.
  • Privacy Policy: https://policies.google.com/privacy
  • Cookie Name(s): _ga, _gat, _gid
  • Duration: 2 Years