When I add images to a post via the TinyMCE editor I’d like WP to add a wrapping div around the <img> tag like <div class="img-wrapper"><img src="url-to-image" alt="image" /></div>. Is that somehow possible?


I think it is a better idea, if you filter the output, the the_content and add the div on all images. It is better for feature, if you will remove this markup, it is not inside the database.

add_filter( 'the_content', 'fb_add_div_to_img' );
function ( $content ) {

    // find img and add markup
    return $content;

To find and replace the img in content use a regex, like this

If you use the regex preg_match_all( '/\<img [^>]*src=\"([^\"]+)\"[^>]*>/', $content, $arr, PREG_PATTERN_ORDER); then you get a array. Inside this array you find the img tag with all values, $arr[0]. Enhance this var with your markup and return to the var $content. Also here a example from the web. Additional hint for a regex tester, there I like: Regex Test Tool

But it is also possible to add markup on insert images in the editor:

add_filter( 'image_send_to_editor', 'fb_give_linked_images_class', 10, 8 );
function fb_give_linked_images_class( $html, $id, $caption, $title, $align, $url, $size, $alt = '' ){

    $html; //contains the string you need to edit, you might want to consider to rebuild the complete string.

    return $html;
  • Can you give me an advice how to add the regex to the function? Never heard of that before. – Betsy Jan 20 '13 at 15:14
  • Maybe the enhancement help you; current I dont on a machine to test regex and source. – bueltge Jan 20 '13 at 19:07

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.