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,


function my_custom_class($class){
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

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>';


Thanks to http://wpalkane.com/hacks/wrap-post-image-inside-div-automatically/


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.


the answers here can be divided into 2 methods:

1) functions, that work in POST EDITOR (back-end) (see posted answers)
2) functions, that work in POST OUTPUT (front-end)

p.s. another methods to change front-end output:


function my_image_class_filter($classes) {
    return $classes . ' another-image-class';
add_filter('get_image_tag_class', 'my_image_class_filter');


function add_post_image_class($content) {
    return preg_replace('/<img(.*?)class="(.*?)"/', '<img $1 class="$2 YOUR_CLASS_NAME"', $content);
add_filter( 'the_content', 'add_post_image_class' );
  • 1
    This is no chat. Please use proper Upper/lower case letters and care a bit about code formatting. Later readers will come and vote on your answer and they also take readability in account. Thanks. – kaiser Jan 24 '13 at 10:44

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.