Tarik Hamilton

A web developer actively writing about Vue.js, Laravel, WordPress, and more.

Get Good Square Thumbnails From Wide Featured Images in WordPress

Gross! Not the look.

Do you like your featured images wide to match your text width, but thin enough to let the user start reading without scrolling? Do you like to make your featured images double as thumbnails? I mean, WordPress must want you to with the featured image being summoned by a function named the_post_thumbnail().

I don’t know the full story behind that, but I do know that selecting images that work for square thumbnails as well as wide banner-type images, without cropping or using separate images, is an impossibly hard and annoying task no matter what CSS voodoo you try.


function blog_list_thumbs() {
    add_image_size( 'featured-thumb-left', 101, 200, array( 'left', 'center' ) );
    add_image_size( 'featured-thumb-center', 102, 200, array( 'center', 'center' ) );
    add_image_size( 'featured-thumb-right', 103, 200, array( 'right', 'center' ) );
add_action( 'after_setup_theme', 'blog_list_thumbs' );

The above code goes in your functions.php file.

add_image_size lets you add new image sizes that you can also crop. When an image is uploaded, WordPress by default makes a “thumbnail”, “medium”, “large”, and “full” size, with only the thumbnail being cropped.

You can crop in different directions, like “left” and “center”, so pixel dimensions aren’t necessary to get good crops. Since most images are going to be wide, I designed this script to add three new sizes, each with a different crop region. Essentially, your uploaded image split into thirds: “left”, “center”, “right”. That gives us three images to choose from that has our subject in it.


The crop regions are determined by array( 'left', 'center' ). The first parameter uses the x-axis, the latter uses the y-axis.

You can slice and dice in anyway you find convenient for your blog’s design.

Potential Problems

These additional sizes are created only when an image is uploaded. If you add this, your old photos are not going to get new thumbnails. There’s a plugin that will “refresh” your images called Regenerate Thumbnails, so these new sizes can be generated.

To use any of these sizes of your featured image, add a custom field that lets the user select ‘left’, ‘center’, or ‘right’, on the post. and pass the name into the size parameter for images.

// Inside a query loop
$thumbnail_position = get_post_meta( get_the_ID(), 'thumbnail_position', true );
the_post_thumbnail( $thumbnail_position );

WordPress Bug or Semantics?

You may have noticed that the new sizes created from add_image_size were all different by a pixel. If you have two sizes that are the same dimensions, you will only get one crop.

You cannot have two identical image sizes, even if they have a different name and crop settings. I understand semantically that it is “add image size,” but I believe the name should be the unique identifier, not the pixel dimensions.

I’ll have to explore this more some day, but for now, this rocks!

  • Whitney

    Would you mind posting the entire fields.js file somewhere (i.e. GitHub)?

    The rich text editor still isn’t loading, but I’m getting an additional error.

    I think I might have an older version somehow, but strangely I can’t find a newer version anywhere online to compare with.

    I’d appreciate the help 🙂 Thanks.