# How to wrap every image in a post with a div?

When I add an image to a post I want it to be in a div e.g. , and I want that to be done automatically, so I don't have to do that in HTML editor. I don't want to use js to accomplish this and by the way I want to know how to automatically add custom classes to a image in a post. Cheers!

-
Search for image_send_to_editor, that would be a good filter to look at for what you're asking, search and you'll find info(sorry not got enough spare time to prepare an answer for you right now). –  t31os Jun 29 '11 at 22:53
Can I ask why you want this? –  Tom J Nowell Jan 24 '13 at 10:18

By default images already have unique class's but this depends on your theme. Use firebug and hover over the images and you should see stuff like class="aligncenter size-full wp-image-1525".

If you want to change the class or id or alter any attributes of the image you can use the get_image_tag filter. For example,

add_filter('get_image_tag_class','my_custom_class');

function my_custom_class($class){$class='my_custom_name';
return $class; }  - OK thanks for that but what if I want to wrap every single image with a div e.g. #imagecontainer so I can tweak the design the way I want? – vanjadjurdjevic Jun 29 '11 at 21:08 Then you use the filter I put above. – Wyck Jun 30 '11 at 0:21 You answer was close but not enough because the hook checkpoint for get_image_tag_class() only changes the class attribute. So I was playing around and find out that the right thing for wrapping each image is get_image_tag() so the code goes like this : function my_image_tag($html, $id ,$alt, $title){$html = "<div class='**wrap-div**'>" . $html . "</div>"; return$html;
}



You answer was partially right so it's the best one ;) Cheers mate and thanks for your help.

-

I have found the following code while making some research. You can easily wrap a Post image in a Div by using the built-in filter of WordPress i.e image_send_to_editor. Here is an example,

if( is_admin() ) {

add_filter( 'image_send_to_editor', 'wp_image_wrap_init', 10, 8 );
function wp_image_wrap_init( $html,$id, $caption,$title, align,url, $size,$alt ) {
return '<div id="wp-image-wrap-'. $id .'" class="wp-image-wrap">'.$html .'</div>';
}

}

-

i cant tell how to place img inside div automatically, but if you want to attach any specific div class to your image:

<img class="MyImgClass"


then do what you want to the ".MyImgClass" class in your style.css.

at first, you should insert this code into your functions.php (but if the current theme has another auto-giving class to images, then they will be overgone and only MyImg1 class will be given to your images):

function give_linked_images_class($html,$id, $caption,$title, align,url, $size,$alt = '' ){
$classes = 'MyImgClass'; // separated by spaces, e.g. 'img image-link' // check if there are already classes assigned to the anchor if ( preg_match('/<img.*? class=".*?">/',$html) ) {
$html = preg_replace('/(<img.*? class=".*?)(".*?>)/', '$1 ' . $classes . '$2', $html); } else {$html = preg_replace('/(<img.*?)>/', '$1 class="' .$classes . '" >', $html); } return$html;
}