Skip to main content
Easily create better & faster websites with the Total WordPress Theme Learn More
(opens a new tab)
Tutorials

How to Manually Change WordPress Thumbnail Crop Location

Note: This guide will show you how to edit Core WordPress files, I don’t really recommend it. Only use it if you know what you are doing. The guide was written a long time ago when you couldn’t define custom crop locations, you can now set your crop location when using the add_image_size function so this guide isn’t applicable anymore.

I’ve been using the new WordPress post thumbnails function a lot lately in theme development. I’ve turned away from the slower, less efficient and less secure method of using the TimThumb script for resizing images on WordPress powered sites.

And while it’s a great function to have built into WordPress, it does have it’s “flaws”, such as the fact that there isn’t any parameter for defining the cropping location/position of the image when re-sized.

Cropping Location

When working on my site the other day I noticed that when the WordPress theme thumbnails were being cropped the whole top half was being cut off not really giving people a good idea of what the theme would actually look like.

Below is just a funny picture I found showing you another reason why you may want to choose different cropping locations for your images as opposed to always using the default “center” cropping.

Change The Default Center Cropping For Thumbnails

Unfortunately to change the cropping location for thumbnails you will have to get your hands a bit dirty with the Core WordPress files. Simply follow the steps below for changing the crop location of your Thumbnails (not this will change it for ALL thumbnails defined in your functions.php and media settings).

  • Step 1: Browse to your wp-includes folder
  • Step 2: Find and open the media.php file
  • Step 3: Locate the following code (around line 3.61 in WordPress 3.1.1)
$s_x = floor( ($orig_w - $crop_w) / 2 );<br />
$s_y = floor( ($orig_h - $crop_h) / 2 );<br />
  • Step 4: Edit The code to suit your needs (see explanation below)

Changing The Cropping Values

Those two lines you found are in charge of cropping your thumbnails. The default is to take the original width and height and crop them equally towards the center. However you can easily change it to crop to the top, left, top left…etc

Crop From The Top
To crop from the top you simply need to make the y value equal to 0, so change the second line of code to look like this:

$s_y = 0; // floor( ($orig_h - $crop_h) / 2 );<br />

Crop From The Center Left
To crop from the left you need to make the x value equal to 0, so change the first line of code to look like this:

$s_x = 0; // floor( ($orig_w - $crop_w) / 2 );<br />

Crop From The Top Left
Combine the last two samples to crop an image from the top left.

$s_y = 0; // floor( ($orig_h - $crop_h) / 2 );<br />
$s_x = 0; // floor( ($orig_w - $crop_w) / 2 );<br />

Re-Generate WordPress Thumbnails

Don’t forget that if you change the cropping location for your thumbnails you will have to re-crop them all. You can do this easily with either of the following two plugins: AJAX Thumbnail Rebuild or Regenerate Thumbnails.

4 Comments
  1. Mike · 12 years ago

    Hi,
    and next time you upgrade WordPress again adjustments will be deleted. This is not a good solution. It would take something like a direct entry into the functions.php file or so …

    • AJ Clarke | WPExplorer · 12 years ago

      That is correct.

      It is a good solution, but maybe not for everyone. For me at the time when I wrote the post it was the best solution for my needs and it proved to be a very fast and convenient way.

      Editing core WP files isn’t for everyone (and I don’t really recommend it). But for someone like me that knows their way around and am not making changes for someone else, it’s fine 😉 Especially in this case, where it’s not going to cause vulnerability issues.

  2. Harmeet · 11 years ago

    Its not working i have just change the lines. i want to cut the image from center. Please help me to sort this problem i am using twenty eleven theme.

    • AJ Clarke | WPExplorer · 11 years ago

      After editing the core (this post is really old so I’m sure in WP 3.6 its on different lines, make sure you are editing correctly) you will have to regenerate your thumbnails.

      Why don’t you just use the built-in cropping tools? Image Editing In WordPress

Leave a Reply

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

Learn how your comment data is processed by viewing our privacy policy here.