I am making a Wordpress theme and want to change the default image html. For example if you upload an image using Wordpress uploader it generates the following html for your images

<a href="image_url_goes_here">
    <img class="aligncenter size-full wp-image-100" src="your_src"/>

I want to change it to something like this

<div class="image-container">
    <img class="aligncenter size-full wp-image-100" src="your_src"/>

This will do:

 * This filter only works with images, for all kind of media check: media_send_to_editor
 * The priority is set to 20 and it takes 8 arguments
add_filter('image_send_to_editor', 'wpse_53577_img_wrapper', 20, 8);

// We are only working with the $html argument, but you can play with all of them 
function wpse_53577_img_wrapper($html, $id, $caption, $title, $align, $url, $size, $alt) 
    // If Link URL is set to "File URL" or "Attachment Post URL", the anchor tag gets replaced with the div tag
    $new_html = preg_replace("/\<a(.*)\>(.*)\<\/a\>/iU", "<div class=\"image-container\">$2</div>", $html);

    // If no replacement was done (Link URL == None), wrap the image tag with the div tag
    $html = ($new_html == $html) ? '<div class="image-container">'. $html . '</div>' : $new_html; 

    return $html;

Reference snapshot:

The replacement of the anchor tag is done with a Regular Expression (RegEx), which I'm not versed with... Found it doing this search.

  • Thanks dude you are a legend. Would it be possible if you could tell me how the code works. May 30 '12 at 5:25
  • That was Will Smith, wasn't it :?) - Answer updated with extra references. Cheers!
    – brasofilo
    May 30 '12 at 9:46

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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