I am trying to modify the default media names in WordPress to remove the dimensions from the files and replace them with a simple suffix.

For example:

  • imageA-300x300.jpg
  • imageA-480x480.jpg
  • imageA-1024x1024.jpg

Would become

  • imageA-thumb.jpg
  • imageA-medium.jpg
  • imageA-large.jpg

How can I do this? So far, I've tried by adding a filter in wp_handle_upload_prefilter but it seems to only modify the original name...

1 Answer 1


Using my own code from here, i updated the logic to add the name of the image size instead of the suffix, try adding this to your functions.php file:

add_filter("wp_image_editors", "my_wp_image_editors");

function my_wp_image_editors($editors) {
    array_unshift($editors, "WP_Image_Editor_Custom");
    return $editors;

// Include the existing classes first in order to extend them.
require_once ABSPATH . WPINC . "/class-wp-image-editor.php";
require_once ABSPATH . WPINC . "/class-wp-image-editor-gd.php";

class WP_Image_Editor_Custom extends WP_Image_Editor_GD {

    public function generate_filename($suffix = null, $dest_path = null, $extension = null) {
        // $suffix will be appended to the destination filename, just before the extension
        if (!$suffix) {
            $suffix = $this->get_suffix();

        $dir = pathinfo($this->file, PATHINFO_DIRNAME);
        $ext = pathinfo($this->file, PATHINFO_EXTENSION);

        $name = wp_basename($this->file, ".$ext");
        $new_ext = strtolower($extension ? $extension : $ext );

        if (!is_null($dest_path) && $_dest_path = realpath($dest_path)) {
            $dir = $_dest_path;
        //we get the dimensions using explode, we could have used the properties of $this->file[height] but the suffix could have been provided
        $size_from_suffix = explode("x", $suffix);
        //we get the slug_name for this dimension
        $slug_name = $this->get_slug_by_size($size_from_suffix[0], $size_from_suffix[1]);

        return trailingslashit($dir) . "{$name}-{$slug_name}.{$new_ext}";

    function get_slug_by_size($width, $height) {

        // Make thumbnails and other intermediate sizes.
        $_wp_additional_image_sizes = wp_get_additional_image_sizes();

        $image_sizes = array(); //all sizes the default ones and the custom ones in one array
        foreach (get_intermediate_image_sizes() as $s) {
            $image_sizes[$s] = array('width' => '', 'height' => '', 'crop' => false);
            if (isset($_wp_additional_image_sizes[$s]['width'])) {
                // For theme-added sizes
                $image_sizes[$s]['width'] = intval($_wp_additional_image_sizes[$s]['width']);
            } else {
                // For default sizes set in options
                $image_sizes[$s]['width'] = get_option("{$s}_size_w");

            if (isset($_wp_additional_image_sizes[$s]['height'])) {
                // For theme-added sizes
                $image_sizes[$s]['height'] = intval($_wp_additional_image_sizes[$s]['height']);
            } else {
                // For default sizes set in options
                $image_sizes[$s]['height'] = get_option("{$s}_size_h");

            if (isset($_wp_additional_image_sizes[$s]['crop'])) {
                // For theme-added sizes
                $image_sizes[$s]['crop'] = $_wp_additional_image_sizes[$s]['crop'];
            } else {
                // For default sizes set in options
                $image_sizes[$s]['crop'] = get_option("{$s}_crop");
        $slug_name = ""; //the slug name

        if($width >= $height){
          foreach ($image_sizes as $slug => $data) { //we start checking
            if ($data['width'] == $width) {//we use only width because regardless of the height, the width is the one used for resizing in all cases with crop 1 or 0
                $slug_name = $slug;
             * There could be custom added image sizes that have the same width as one of the defaults so we also use height here
             * if there are several image sizes with the same width all of them will override the previous one leaving the last one, here we get also the last one
             * since is looping the entire list, the height is used as a max value for non-hard cropped sizes
             *  */
              if ($data['width'] == $width && $data['height'] == $height) {
                  $slug_name = $slug;
           foreach ($image_sizes as $slug => $data) {
              if ($data['height'] == $height) {
                  $slug_name = $slug;
              if ($data['height'] == $height && $data['width'] == $width ) {
                  $slug_name = $slug;
        return $slug_name;

i also removed the unnecessary code, this will also work with custom image sizes, as can be seen here:

enter image description here

home-bottom is a custom image size i have.

  • Oh wow, it works flawlessly! Now gotta understand all this, thanks A LOT! :D
    – Estarius
    Commented Feb 16, 2017 at 3:45

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.