WPBeginner

Beginner's Guide for WordPress

  • Blog
    • Beginners Guide
    • News
    • Opinion
    • Showcase
    • Themes
    • Tutorials
    • WordPress Plugins
  • Start Here
    • How to Start a Blog
    • Create a Website
    • Start an Online Store
    • Best Website Builder
    • Email Marketing
    • WordPress Hosting
    • Business Name Ideas
  • Deals
    • Bluehost Coupon
    • SiteGround Coupon
    • WP Engine Coupon
    • HostGator Coupon
    • Domain.com Coupon
    • Constant Contact
    • View All Deals »
  • Glossary
  • Videos
  • Products
X
☰
Beginner's Guide for WordPress / Start your WordPress Blog in minutes
Choosing the Best
WordPress Hosting
How to Easily
Install WordPress
Recommended
WordPress Plugins
View all Guides

WPBeginner» Blog» Tutorials» How to Create Additional Image Sizes in WordPress

How to Create Additional Image Sizes in WordPress

Last updated on June 22nd, 2012 by Editorial Staff
262 Shares
Share
Tweet
Share
Pin
Free WordPress Video Tutorials on YouTube by WPBeginner
How to Create Additional Image Sizes in WordPress

Last month there was a huge vulnerability spotted in a famous image resizing script known as TimThumb. Since then the community has collaborated and fixed the issues. While TimThumb is a viable option, we believe that WordPress theme developers should focus on using the core functions rather than relying on third party scripts. In this article we will show you how to add additional image sizes in WordPress.

WordPress has a built-in feature Post Thumbnails aka Featured Images. There is also a built-in function add_image_size() which lets you specify image sizes and give you the option to crop. Using these core functions in your theme can essentially eliminate the need of a third party script like TimThumb in most cases.

Registering Additional Image Sizes for your Theme

You will need to start by adding the support of post thumbnails by placing the following code in your theme’s functions.php file:

add_theme_support( 'post-thumbnails' );

Once you enable the support for post thumbnails, you can now use the functionality of registering additional image sizes with the function add_image_size(). The usage of add_image_size function is like this: add_image_size( ‘name-of-size’, width, height, crop mode );

Example code can look like:

add_image_size( 'sidebar-thumb', 120, 120, true ); // Hard Crop Mode
add_image_size( 'homepage-thumb', 220, 180 ); // Soft Crop Mode
add_image_size( 'singlepost-thumb', 590, 9999 ); // Unlimited Height Mode

Now if you notice, we have specified three different sort of image sizes. Each has different modes such as hard crop, soft crop, and unlimited height. So lets cover each example and how you can use them for your benefits.

Hard Crop Mode – As you notice, there is a value “true” added after the height. That true value is telling WordPress to crop the image to the size that we have defined (in this case 120 x 120px). This is the method we use a lot in our theme designs to make sure everything is proportionate and our design is not breaking. This function will automatically crop the image either from the sides or from the top and bottom depending on the size. The downside of hard cropping is that you cannot control which part of the image is displayed.

Correction by Mike Little – When you have uploaded an image and before you insert into post, you can click on ‘edit image’ and from there change the thumbnail or the whole image, scale, rotate, or flip the image , and for the thumbnail select the exact portion of the image you want.

Soft Crop Mode – By default soft cropping mode is turned on this is why you do not see any additional value added after the height. This method resizes the image proportionally without distorting it. So you might not get the dimensions that you wanted. Usually it matches the width dimension and the heights are different based on each image’s proportion. An example display would look like this:

Soft Crop Example

Unlimited Height Mode – There are times when you have super long images that you want to use in your design, but you want to make sure that the width is limited. The main use we find for this sort of image size is on infographic posts. Infographics tend to be very long and full of information. Hard cropping such image on a single post page is not a great idea. But by nature infographics are wider than the content width. So what you can do is specify a width which will not break your design while leaving the height to be unlimited, so all of infographic can be shown without any distortion. An example display would look like this:

Unlimited Height Mode Example

Displaying additional image sizes in your WordPress theme

Now that you have added the functionality for the desired image sizes lets take a look at displaying them in your WordPress theme. Open the theme file where you want to display the image and paste the following code:

<?php the_post_thumbnail( 'your-specified-image-size' ); ?>

Note: This bit of code must be pasted inside the post loop.

That’s all you really have to do to display the additional image sizes in your WordPress theme. You probably should wrap it around with the styling that fits your need.

Regenerating Additional Image Sizes

If you are not doing this on a brand new site, then you probably will have to regenerate thumbnails. The way add_image_size() function works is that it only generates the sizes from the point it was added into the theme. So any post images that were added prior to the inclusion of this function will not have the new size. So what we need to do is regenerate the new image size for older post images. This is made easy by the plugin called Regenerate Thumbnails. Once you install and activate this plugin, a new option is added under the menu: Tools » Regen. Thumbnails

Regenerate Thumbnail Plugin Screen

Click Regenerate Thumbnail icon and let the plugin do its job.

Another plugin that can do this job is Simple Image Sizes.

Enabling Additional Image Sizes for your Post Content

Even though you have enabled image sizes in your theme, the usage is limited only to your theme which does not makes any sense. All image sizes are being generated regardless, so why not make it available for the post author to use it within the post content. You can do this by using a plugin called Simple Image Sizes.

Once you install and activate this plugin new options will be added on your Settings » Media page. You will see a list of sizes that you defined in your theme. All you have to do is check the box that says “Show in post insertion”.

Post Insertion for Additional Image Sizes

Once you check this box, additional sizes will be available for your author to use in the post content.

Additional Image Sizes for Posts

Notice in the image above, we have all the image sizes that we defined in our theme available for our authors to use in the post content if they desire.

Simple Image Sizes plugin also lets you create custom image sizes directly from the WordPress dashboard.

We believe this method should be added under best practices for all WordPress theme developers. What are your thoughts?

262 Shares
Share
Tweet
Share
Pin
Popular on WPBeginner Right Now!
  • Checklist

    Checklist: 15 Things You MUST DO Before Changing WordPress Themes

  • How to Fix the Error Establishing a Database Connection in WordPress

    How to Fix the Error Establishing a Database Connection in WordPress

  • Revealed: Why Building an Email List is so Important Today (6 Reasons)

    Revealed: Why Building an Email List is so Important Today (6 Reasons)

  • How to Start Your Own Podcast (Step by Step)

    How to Start Your Own Podcast (Step by Step)

About the Editorial Staff

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi. Trusted by over 1.3 million readers worldwide.

The Ultimate WordPress Toolkit

40 Comments

Leave a Reply
  1. B Toro says:
    Jun 8, 2020 at 12:51 pm

    Very simple and helpfull

    Reply
    • WPBeginner Support says:
      Jun 9, 2020 at 9:18 am

      Glad our guide was helpful :)

      Reply
  2. JKLYN says:
    Jul 14, 2017 at 9:33 am

    Quite helpful tutorial. But how to set class for image??

    Reply
  3. Kim says:
    Apr 23, 2017 at 12:45 pm

    Thanks WPBeginner, this worked a treat!

    Reply
  4. Thiago says:
    Apr 3, 2017 at 6:52 am

    Hi,

    Great article! However, I still do not understand the usefulness of hard crop tool; I uploaded an image with 306×165, and after that I created two custom sizes: 256×148 (Soft Crop) and 256×148 (Hard Crop), however, as you can see in this print taken from the post: [http://prnt.sc/eromp3] both Options remain the same. I created a file in Photoshop containing 256×148 and I dragged the original image without resizing anything, and the result you can see in example 4 of the image above. So, my question is this: should image 2 not look like the image generated by Photoshop?

    Follows below the code used on functions.php:

    //Soft Crop used in example 2
    if ( function_exists( ‘add_image_size’ ) ) {
    add_image_size( ‘new-size8’, 256, 148 );
    }
    add_filter(‘image_size_names_choose’, ‘my_image_sizes8’);
    function my_image_sizes8($sizes) {
    $addsizes = array(
    “new-size8” => __( “New Size8”)
    );
    $newsizes = array_merge($sizes, $addsizes);
    return $newsizes;
    }

    ////Hard Crop used in example 3
    if ( function_exists( ‘add_image_size’ ) ) {
    add_image_size( ‘new-size9’, 256, 148, true, array( ‘center’, ‘center’ ) ); //(cropped)
    }
    add_filter(‘image_size_names_choose’, ‘my_image_sizes9’);
    function my_image_sizes9($sizes) {
    $addsizes = array(
    “new-size9” => __( “New Size9”)
    );
    $newsizes = array_merge($sizes, $addsizes);
    return $newsizes;
    }

    Thanks in advance!

    Reply
  5. Kevin says:
    Mar 2, 2017 at 6:26 pm

    This works great, but on thing that always bothers me is that if someone uploads an image that is smaller than one of your cropped sized then that image will not be created, which ruins the layout if you wanted equal height images

    Reply
    • Matt Rock says:
      May 25, 2017 at 11:08 am

      Struggling with the same issue, Kevin (uploading smaller image does not create cropped size). I understand why this might make sense (system will not produce unnecessary images), but a low/poor resolution would look better than an ill-cropped one…

      Reply
  6. gonza says:
    Jan 9, 2017 at 6:59 pm

    Thanks for the info
    you help me so much!

    Reply
  7. Sakshi says:
    Dec 10, 2015 at 3:03 am

    I write this code can.
    Actually i want to set the post thumbnail size for the banner image.Which i was uploading through featured image in the background please suggest me.

    Reply
  8. Aakash says:
    Mar 24, 2015 at 1:11 pm

    Hi,
    I m new in wordpress,and accept i have many problems,and the first is,i created lot of post in wordpress,suppose A B C D,and when i update this in my website they look like first is D and then c and then b and then a means when i upload first they are show in last.if any solution that first they look in series not DCBA like ABCD…plz help

    Reply
  9. Daniel Knoflicek says:
    Feb 10, 2015 at 11:49 am

    awsome… so helpfull for a lot of gallery plugins…

    Reply
  10. Lavinia Manzanarez says:
    Oct 3, 2014 at 7:23 pm

    Excellent! I read the use of this function on the Codex of WordPress but sometimes I need a step by step thing, thank you!

    Reply
  11. WPBeginner Staff says:
    May 27, 2014 at 9:54 pm

    Yes it is possible.

    Reply
    • Farmer John says:
      Feb 19, 2015 at 5:58 am

      I too want to do the same as Ali Rohan wants to do. can you kindly elaborate pleas.. ‘coz i tried to implement the method explained by you but could not succeed. I can’t understand where I am doing wrong. How do I link the text of resolution to image file?

      Reply
  12. Ali Rohan says:
    May 27, 2014 at 2:03 am

    Thanks for nice article.
    I wanna start a wallpapers website in wordpress so is it possible that when i upload one big wallpaper then it auto resized to many resolutions for users. For example when i upload 1920×1280 wallpaper then it must be resized to 1024×768, 800×600 etc resolution … so users can easily view and download desired size wallpaper ?

    Reply
  13. Aayush says:
    Mar 10, 2014 at 2:25 pm

    Hi Dear. i need your urgent help. i have a problem with the images size. actually i am using a plugin WP Gallery Custom Links. i have uploaded lot of images in a post but every images has a different height and width so they are appearing with different different sizes. i want to set them with the same size which i want to set. please tell me any idea to solve this problem.

    Reply
  14. Here says:
    Dec 15, 2013 at 10:59 am

    I just needed to say thanks for saying this. You’re right on.|

    Reply
  15. Shoaib says:
    Dec 3, 2013 at 3:09 am

    Excellent explanation

    Reply
  16. Andrew says:
    Oct 18, 2013 at 11:20 am

    I’ve set this up and it’s working splendidly minus the suggestion MIKE LITTLE made above – the thumbnail is changed and it shows up that way in the backend in the media gallery – but on the frontend where my loop is – the image thumb is still what WP defaults to – i’ve even run REGEN THUMBS and it still doesn’t fix the issue – anyone else having this problem or know the fix???

    Reply
    • WPBeginner Support says:
      Oct 21, 2013 at 8:30 pm

      Look at your loop and use <?php the_post_thumbnail('your-specified-image-size'); ?> instead of the_post_thumbnail()

      Reply
  17. Tomasz says:
    Oct 15, 2013 at 5:43 pm

    Nice tutorial!
    Please check out the plugin which allows to manually crop the registered image sizes:
    http://wordpress.org/plugins/manual-image-crop

    Reply
    • WPBeginner Support says:
      Oct 21, 2013 at 7:58 pm

      Thanks, looks like a nice plugin. We will look into it.

      Reply
    • Marc C says:
      Dec 30, 2013 at 7:26 am

      Good tutorial – many thanks WPBEGINNER.

      I too was having the problem of not being able to crop the new registered image sizes but the plugin posted by TOMASZ does the job nicely – thanks TOMASZ!

      Reply
  18. Robbe Clerckx says:
    Sep 13, 2013 at 4:46 pm

    Still helpfull after all this time :). Thank you.

    Reply
  19. Danny says:
    Jun 11, 2013 at 11:27 am

    Thank you for this very clear and helpful tutorial. It saved me a lot of time since the WP documentation is very cryptic.

    Reply
  20. lydia karanja says:
    May 28, 2013 at 6:28 am

    I have a wordpress account but I did not know how to manage it but now I know all thanks to this tutorial, thank you very much for helping people understand more on how to create and manage their websites.

    Reply
  21. andy19at says:
    Sep 21, 2011 at 5:35 am

    @jezThomp Great if your images work ;)

    Reply
    • jezThomp says:
      Sep 21, 2011 at 5:36 am

      @andy19at Link…?

      Reply
      • andy19at says:
        Sep 21, 2011 at 5:39 am

        @jezThomp A link? I didn’t post it cos it didn’t work.

        Reply
        • jezThomp says:
          Sep 21, 2011 at 5:41 am

          @andy19at http://t.co/YvmiX9hR

  22. mikelittle says:
    Sep 20, 2011 at 8:25 am

    You say: “The downside of hard cropping is that you cannot control which part of the image is displayed.” Not true.

    When you have uploaded an image and before you insert into post, you can click on ‘edit image’ and from there change the thumbnail or the whole image, scale, rotate, or flip the image , and for the thumbnail select the exact portion of the image you want.

    Reply
    • wpbeginner says:
      Sep 20, 2011 at 12:51 pm

      @mikelittle Thanks for the correction Mike. Just edited the article :)

      Reply
      • clelandillustration says:
        Oct 1, 2011 at 5:31 pm

        I can’s seem to get the custom crop to work for new image sizes. The custom crop will work for the default “thumbnail” size version, but that crop won’t apply to new image sizes. It seems the crop is still uncontrollable for custom image sizes.

        Reply
    • Brent Norris says:
      Apr 15, 2016 at 4:02 am

      good insight into the edit flow…

      Reply
  23. TdGon says:
    Sep 15, 2011 at 8:55 pm

    Good article ..and photos to go along with it too…nice. I saw in a few places how to do this but they did not explain it as well as you do here. I am off to try it out.

    Thanks a lot ! (0.o)

    Reply
  24. PaulDeWoutersd'Oplinter says:
    Sep 14, 2011 at 4:16 pm

    excellent explanation for a confusing topic. and very useful plugin

    Reply
  25. mssbee says:
    Sep 14, 2011 at 9:44 am

    Great tutorial! Thanks for explaining the different crop options. It really helped me to understand how they work.

    Reply
  26. tjhakan says:
    Sep 14, 2011 at 2:27 am

    Nice tutorial. good job

    Reply
  27. defries says:
    Sep 12, 2011 at 12:02 pm

    Nice round up of what can be done with just the default featured image feature. One extra tip: you can also set the width of your content area as a featured image and define that same width in Settings > Media. This way you can select a featured image to use in your theme and it will be automatically the maximum size of the content area.

    Also great having those values in there for <a href=”http://codex.wordpress.org/Embeds”>oEmbed</a>.

    Reply
  28. Ordinary Randomness says:
    Sep 12, 2011 at 11:42 am

    Thanks for this tutorial, I was wondering why sometimes I had images that were not cropping to the size I had coded.

    Reply

Leave a Reply Cancel reply

Thanks for choosing to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and your email address will NOT be published. Please Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.

Over 1,320,000+ Readers

Get fresh content from WPBeginner

Featured WordPress Plugin
All in One SEO logo
All in One SEO
Improve website SEO rankings with AIOSEO plugin. Learn More »
How to Start a Blog How to Start a Blog
I need help with ...
Starting a
Blog
WordPress
Performance
WordPress
Security
WordPress
SEO
WordPress
Errors
Building an
Online Store
Useful WordPress Guides
    • 7 Best WordPress Backup Plugins Compared (Pros and Cons)
    • How to Fix the Error Establishing a Database Connection in WordPress
    • Why You Need a CDN for your WordPress Blog? [Infographic]
    • 30 Legit Ways to Make Money Online Blogging with WordPress
    • Self Hosted WordPress.org vs. Free WordPress.com [Infograph]
    • Free Recording: WordPress Workshop for Beginners
    • 24 Must Have WordPress Plugins for Business Websites
    • How to Properly Move Your Blog from WordPress.com to WordPress.org
    • 5 Best Contact Form Plugins for WordPress Compared
    • Which is the Best WordPress Popup Plugin? (Comparison)
    • Best WooCommerce Hosting in 2020 (Comparison)
    • How to Fix the Internal Server Error in WordPress
    • How to Install WordPress - Complete WordPress Installation Tutorial
    • Why You Should Start Building an Email List Right Away
    • How to Properly Move WordPress to a New Domain Without Losing SEO
    • How to Choose the Best WordPress Hosting for Your Website
    • How to Choose the Best Blogging Platform (Comparison)
    • WordPress Tutorials - 200+ Step by Step WordPress Tutorials
    • 5 Best WordPress Ecommerce Plugins Compared
    • 5 Best WordPress Membership Plugins (Compared)
    • 7 Best Email Marketing Services for Small Business (2020)
    • How to Choose the Best Domain Registrar (Compared)
    • The Truth About Shared WordPress Web Hosting
    • When Do You Really Need Managed WordPress Hosting?
    • 5 Best Drag and Drop WordPress Page Builders Compared
    • How to Switch from Blogger to WordPress without Losing Google Rankings
    • How to Properly Switch From Wix to WordPress (Step by Step)
    • How to Properly Move from Weebly to WordPress (Step by Step)
    • Do You Really Need a VPS? Best WordPress VPS Hosting Compared
    • How to Properly Move from Squarespace to WordPress
    • How to Register a Domain Name (+ tip to get it for FREE)
    • HostGator Review - An Honest Look at Speed & Uptime (2020)
    • SiteGround Reviews from 4196 Users & Our Experts (2020)
    • Bluehost Review from Real Users + Performance Stats (2020)
    • How Much Does It Really Cost to Build a WordPress Website?
    • How to Create an Email Newsletter the RIGHT WAY (Step by Step)
    • Free Business Name Generator (A.I Powered)
    • How to Create a Free Business Email Address in 5 Minutes (Step by Step)
    • How to Install Google Analytics in WordPress for Beginners
    • How to Move WordPress to a New Host or Server With No Downtime
    • Why is WordPress Free? What are the Costs? What is the Catch?
    • How to Make a Website in 2020 – Step by Step Guide
Deals & Coupons (view all)
PanKogut
PanKogut Coupon
Get 20% OFF on PanKogut's premium WordPress themes collection.
OptinMonster
OptinMonster Coupon
Save 10% off on OptinMonster, the best lead generation plugin for WordPress.
Featured In
About WPBeginner®

WPBeginner is a free WordPress resource site for Beginners. WPBeginner was founded in July 2009 by Syed Balkhi. The main goal of this site is to provide quality tips, tricks, hacks, and other WordPress resources that allows WordPress beginners to improve their site(s).
Join our team: We are Hiring!

Site Links
  • About Us
  • Contact Us
  • FTC Disclosure
  • Privacy Policy
  • Terms of Service
  • Free Blog Setup
  • Free Business Tools
Our Sites
  • OptinMonster
  • MonsterInsights
  • WPForms
  • SeedProd
  • Nameboy
  • RafflePress
  • Smash Balloon

Copyright © 2009 - 2021 WPBeginner LLC. All Rights Reserved. WPBeginner® is a registered trademark.

Managed by Awesome Motive | WordPress hosting by SiteGround | WordPress CDN by MaxCDN | WordPress Security by Sucuri.