I'm trying to figure how to scale the_post_thumbnail to a specific width? Can you guys help?

Currently I'm using

        //Resize post thumbnail
        $thumbnail = wp_get_attachment_image_src( get_post_thumbnail_id( get_the_ID() ), 'single-post-thumbnail' );
        $thumbnailHeight = $thumbnail[1];
        $thumbnailWidth = $thumbnail[2];
        if($thumbnailHeight != 0){
            $ratio = $thumbnailWidth/$thumbnailHeight;
            $width = 220;
            $height = $width * $ratio;
            $height = $thumbnailHeight;
            $width = $thumbnailWidth;

And printing the thumbnail with

 <img src="<?php echo $thumbnail[0]; ?>" width="<?php echo $width; ?>" height="<?php echo $height; ?>"/>

It works but....


  • What you are asking here ?
    – Amit Kosti
    Commented Aug 4, 2012 at 20:24
  • How to use this function codex.wordpress.org/Function_Reference/the_post_thumbnail to display a scaled thumbnail! Regards Commented Aug 4, 2012 at 20:30
  • I want to scale the image, based on a specific width 220px. I don't know the height! Commented Aug 4, 2012 at 20:39
  • @amit please don't post answers as comments. Commented Aug 4, 2012 at 21:10
  • Joao, if my answer below worked out for you, could you please accept it as correct for future users. Thanks! Commented Aug 9, 2012 at 3:59

3 Answers 3


This should work:

You could use:

add_image_size( 'category-thumb', 220, 9999 ); //220 pixels wide (and unlimited height)

and then to display:

if ( has_post_thumbnail() ) { the_post_thumbnail( 'category-thumb' ); }

This will create a thumbnail size of 220 by "unlimited"... Set the featured image on the post, then use the display code in your theme to show the 220x??? scaled image.

  • Bingo! Note also that, as far as I know, passing an array to the_post_thumbnail() still doesn't work. Adding an image size, and then calling it via the_post_thumbnail() is the best and, really, only way to go. Commented Aug 4, 2012 at 21:09

Pretty new to Wordpress and PHP, so have been cutting and crow-baring code together at the moment. This might be of some help so i thought I would post, basically I have a slider on my front page with a custom thumbnail size, and also a custom thumbnail size on my blog roll page. I also needed to link the images on my blog roll page to the post.

First I created I added theme support for the thumbnails in functions.php

if ( function_exists( 'add_theme_support' ) ) {
add_image_size('nivothumb', 960, 320, true);
add_image_size('postthumb', 690, 230, true);

Then for the nivoslider I used the below code, on my front_page.php along with some loop code.

<a href="<?php the_permalink(); ?>"><?php the_post_thumbnail('nivothumb'); ?></a>

Then for the blog roll thumbnail image I used the following, on my index.php along with the some loop code.

<?php if ( has_post_thumbnail()) : ?>
<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>">
<?php the_post_thumbnail('postthumb');?></a>
<?php endif; ?>

Not sure if this is of some help and if this is not the best way to do it I would be interested to know.




I just wanted to mention timthumb aswell. you can do anything you want with this.

all info

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.