Skip to content

Mstoic

  • Home
  • Start Here!
  • Best Deals
  • Facebook Tricks
  • Privacy
  • Resources
  • TOC
  • Tools
    • Web Tools
      • Stop Watch
      • QR Code Generator
      • Adsense Code Converter
      • Blogger Sitemap Generator
      • Difference Between Two Texts
      • Vacation Checklist
      • Twitter Symbols
      • Count Down
    • Investment
      • SIP Calculator
      • Power of Compounding
      • PPF Calculator
      • FD Calculator
  • About Us

Setting the WordPress Featured Image Size

Editorial Team | June 13, 2013December 27, 2013 | Wordpress |
Wordpress

Featured Images are the images that represent the post or the page or custom post types. It was introduced in WordPress Version 2.9 with the name of “Post Thumbnails” and was later named as “Featured Images” in Version 3.0. These images are useful when each post carries an image. This feature is being used at this blog too.

Related Articles

  • Optimizing Database For WordPress Websites Automatically [Free Plugin]
  • 15 Best SEO Tips for WordPress Blogs
  • Google Authenticator for WordPress
  • Doing Complete SEO Of Your WordPress Website With WordPress SEO By Yoast
  • Turn OFF Autosave In WordPress And Reduce Database Size

A Little Bit Of History

In WordPress Versions prior to 2.9, developers had to write a complex code in functions.php file which would extract the first image from all the images in that particular post. Then they would display it wherever it was required, mostly the index and the archive pages.

Starting With The WordPress Featured Images

WordPress Featured Images are optional and may or may not be available in your theme. Read below to know how to enable them and to change their default size.

ALSO SEE : How To Delete Custom Fields From WordPress

Add the Support for WordPress Featured Images in Your Theme

Theme developers need to add a single line of code which will allow Administrators to give a featured image to any post or page from the WordPress dashboard. It may or may not be present in your theme. For a quick check go to your WordPress dashboard and try to write a new post. If you can see the “Featured image” box as shown in the image below then jump to the next step.

Wordpress-Featured-Image-Size

If you can’t see it, paste the below code in your “functions.php” file within the php tags.

add_theme_support( 'post-thumbnails' );

Now again try to create a new post and you will see the “Featured Image” box.

Change WordPress Featured Image Size

WordPress by default has some standard sizes ( small, medium, large, etc… ) in which it crops your images when you upload them using the standard WordPress Media Uploader.

But WordPress does not confine you to use only these sizes. You can define your own sizes and WordPress will crop the image to your custom sizes as well. We will talk about making your own image sizes later in the article.

set_post_thumbnail_size( 100, 100 );

The code above changes the featured image size to a maximum of 100px in height and width. If your image is not a square then the larger side will be 100px in length and the smaller will be adjusted to keep the image in the same ratio as the original. The code needs to go to the “functions.php” file.

set_post_thumbnail_size( 100, 100, true );

If you add “true” as the third argument then your image will be cropped to the exact size you specify in the code. For example, if your image is 400px by 200px in size, then instead of the cropped image being 100px by 50px in size, as in the former case, it will now be 100px by 100px. That means it will not consider the aspect ratio. The code again will go to “functions.php” file.

Creating a Custom Size for WordPress Images

Till now we have changed the featured image size in our WordPress theme. But we can make any number of different sizes to be used in our WordPress template.

add_image_size( 'smallest', 50, 50 ) ;

The code above will generate a new custom size for our images with a height and width of 50px each. Here, the custom name for your custom image size is the first argument, i.e. “smallest” in our example. You can still use the “true” attribute as the fourth argument to crop the image to the exact dimensions.

Using the Custom Image Size in Your Template

Now that WordPress is creating images with our desired dimensions, we need to make use of them somewhere. “the_post_thumbnail( )” is the function that we can call anywhere to get the image with our custom dimensions.

<?php the_post_thumbnail('smallest'); ?>

The name for the custom size needs to be passed as an argument in the function to tell WordPress which image size we want to retrieve, “smallest” in the above case.

You can create as many image sizes as you want in your theme. This is the beauty of WordPress. And calling them is super easy as you can see above.

You can also add featured image to your RSS feeds.

Further Reading : WordPress Codex

Verdict
WordPress featured image size by default is 150px by 150px, which may or may not go with your design. I at Mstoic use 128px by 128px featured images. You can change it to whatever you want, to make your website look better. Talking about the custom image sizes, these are quite powerful because giving images the height and width attribute with CSS will make the larger version of the image served at the client end, which will result in more bandwidth usage at both the client end and the server.
Previous Post

View Facebook Profile As Others See It

by Editorial Team

Next Post

Search And Replace With phpMyAdmin

by Editorial Team

Tags
  • Wordpress Featured Image Dimensions
  • Wordpress Featured Image Size
  • Wordpress Post Featured Image Size
  • Wordpress Set Featured Image Size
Recommended Next
2 Ways to Edit Functions.php File in WordPress

Your Comment Cancel reply

Follow Us

Like us Follow us Follow us

Categories

  • Tricks (93)
  • Facebook (83)
  • Tips (76)
  • Windows (67)
  • Wordpress (39)
  • Android (38)
  • Internet (33)
  • Antivirus (30)
  • How To (29)
  • Customization (25)
  • Webmasters (25)
  • Downloads (21)
  • Utilities (21)
  • Gmail (20)
  • Windows 7 (19)

Related Articles

  • Reverse a String using StringBuilder