WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

I am attempting to change the name format that Wordpress uses to rename uploaded files. For example, when I upload an image with filename "cat-picture.jpg" Wordpress will create scaled versions and rename the filename to variations of "cat-picture-{WIDTHxHEIGHT}.jpg". Is there a way I am able to move this width & height attribute to the beginning of the filename so instead I get variations of "{WIDTHxHEIGHT}-cat-picture.jpg"? So, in the context of this example, I'd like the filename to be renamed to "600x400-cat-picture.jpg". Thoughts?

I've looked at this post and this post, but I am unable to come up with a working solution. Here's my code:

add_filter( 'wp_handle_upload_prefilter', 'modify_uploaded_file_names', 20);
function modify_uploaded_file_names( $image ) {
    // Get default name of uploaded file and set to variable
    $imagename = $image['name'];
    // Case switch for multiple file extensions
    switch ( $image['type'] ) {
        case 'image/jpeg' :
            $suffix = 'jpg';
        case 'image/png' :
            $suffix = 'png';
        case 'image/gif' :
            $suffix = 'gif';
    // Get size of uploaded image and assign to variable
    $imagesize = getimagesize($image);
    // Re-structure uploaded image name
    $image['name'] = "{$imagesize[0]}x{$imagesize[1]}-{$imagename}.{$suffix}";

    return $image;

Any help would GREATLY be appreciated. Thanks!

share|improve this question
I'm not quite sure I can answer your question, but please make sure that you include what you're actually trying to do. it's possible that people can suggest a different solution to the initial problem you're trying to solve. (This is sometimes called the XY problem) – mrwweb Jan 18 '13 at 18:57
up vote 3 down vote accepted

I've managed to do it with the filter image_make_intermediate_size.

Probably all the path/filename.extension dismembering and remaking could be optimized or made in a single stroke fashion, but alas, I'll let that to the reader:

// The filter runs when resizing an image to make a thumbnail or intermediate size.
add_filter( 'image_make_intermediate_size', 'rename_intermediates_wpse_82193' );

function rename_intermediates_wpse_82193( $image ) 
    // Split the $image path into directory/extension/name
    $info = pathinfo($image);
    $dir = $info['dirname'] . '/';
    $ext = '.' . $info['extension'];
    $name = wp_basename( $image, "$ext" );

    // Build our new image name
    $name_prefix = substr( $name, 0, strrpos( $name, '-' ) );
    $size_extension = substr( $name, strrpos( $name, '-' ) + 1 );
    $new_name = $dir . $size_extension . '-' . $name_prefix . $ext;

    // Rename the intermediate size
    $did_it = rename( $image, $new_name );

    // Renaming successful, return new name
    if( $did_it )
        return $new_name;

    return $image;
share|improve this answer
PS: I did only basic tests of uploading in a post and inserting intermediates in content, so far so good... – brasofilo Jan 18 '13 at 21:23
Thank you so much for your response!! So just to clarify, this function will run every time a file is uploaded, correct? Trying to fully understand, but this function will rename every intermediate file created on upload? Also, I'm curious if there would be a way to instead format the renamed file so that instead, only the width would be in the filename. ie like: "600-cat-picture.jpg" instead of "600x400-cat-picture.jpg". This format would work better with my responsive image script. Any thoughts/help you could share? Thank you. – kaffolder Jan 23 '13 at 7:20
@kaffolder, I've added comments to the code, so it's clear what each part is doing. Yes, it's possible to use only the width, you need to do this to the $size_extension string ;) – brasofilo Jan 23 '13 at 13:20
Thanks so much @brasofilo! Spot on!! This will help immensely with the responsive foresight.js image plugin I'm working on. Cheers! – kaffolder Jan 23 '13 at 16:21
Glad to know, @kaffolder! Ping us the link to the plugin here when it's finished ;) – brasofilo Jan 23 '13 at 16:25

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

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