If you’re looking to customize the default behavior of WordPress thumbnail cropping to focus on the top part of your images, you’ve come to the right place. By default, WordPress crops thumbnails from the center, which might not always be ideal, especially if you want to emphasize the top section of your images. Here, we’ll walk you through a custom function that will allow you to crop thumbnails from the top part of your images, ensuring your most important content is always visible.

Step-by-Step Guide to Custom Thumbnail Cropping

1. Access Your Theme’s functions.php File:

• Log in to your WordPress admin dashboard.
• Navigate to Appearance > Theme Editor.
• Open your theme’s functions.php file.

2. Add the Custom Cropping Function:

• Insert the following code into your functions.php file to modify the thumbnail cropping behavior:

//**thumbnail crop****//

function custom_thumbnail_crop_top($null, $orig_w, $orig_h, $dest_w, $dest_h, $crop) {
    if (!$crop) {
        return null;
    }

    $aspect_ratio = $orig_w / $orig_h;
    $new_w = $dest_w;
    $new_h = $dest_h;

    if (!$new_w) {
        $new_w = intval($new_h * $aspect_ratio);
    }

    if (!$new_h) {
        $new_h = intval($new_w / $aspect_ratio);
    }

    $size_ratio = max($new_w / $orig_w, $new_h / $orig_h);

    $crop_w = round($new_w / $size_ratio);
    $crop_h = round($new_h / $size_ratio);

    $s_x = floor(($orig_w - $crop_w) / 2);
    $s_y = 0; // Crop from the top

    // Return array with parameters for imagecrop()
    return array(0, $s_y, $crop_w, $crop_h, 0, 0, $dest_w, $dest_h);
}

add_filter('image_resize_dimensions', 'custom_thumbnail_crop_top', 10, 6);

3. Save and Regenerate Thumbnails:

• Save the changes to your functions.php file.
• Use the Regenerate Thumbnails plugin to apply the new cropping settings to all existing images.

How the Custom Thumbnail Cropping Function Works

This custom function adjusts the default behavior of WordPress to crop thumbnails from the top instead of the center. Here’s a detailed explanation of how it works:

• Aspect Ratio Calculation: The function first determines the aspect ratio of the original image.
• New Dimensions: It calculates the new width and height based on the desired dimensions while maintaining the aspect ratio.
• Crop Dimensions: The function then calculates the dimensions for cropping. It ensures that the width and height are adjusted to fit within the desired dimensions.
• Crop Position: Unlike the default center cropping, this function sets the y-coordinate (s_y) to 0, which means the cropping will start from the top of the image.

By implementing this function, your thumbnails will prioritize the top part of the image, ensuring that important content at the top is not cropped out. This is particularly useful for images where the focal point is towards the top.

Conclusion

Customizing the thumbnail cropping in WordPress to focus on the top part of images can significantly improve the visual appeal of your website. This custom function provides a simple yet effective solution to achieve this, ensuring that your most important content is always prominently displayed. Implementing this change is straightforward and can be done by modifying the functions.php file and regenerating the thumbnails.

For any further customization or issues, feel free to reach out or consult the WordPress Codex and support forums.

---

By following the above steps, you can easily customize the thumbnail cropping in WordPress to better suit your needs. Happy customizing!

Update:

New easy method:

function custom_thumbnail_size() {
remove_image_size(‘thumbnail’);

add_image_size('thumbnail', 150, 150, array('center', 'top')); // 

// Debug 
error_log('Custom thumbnail size registered.');

}
add_action(‘init’, ‘custom_thumbnail_size’);