Monthly Archives: February 2014

Add Markup To Images In WordPress

WordPress developers are finally starting to embrace markup in themes and plugins, and that’s a good thing. I’ve been implementing schema markup in the websites I’ve been building for a few years now, and it has definitely helped the overall performance of these websites.

However, one area that I haven’t seen any development in is in automating the insertion of markup for images that you add to your posts and pages. This is an important part of content microformatting that can pay huge dividends in image search traffic. for images for images

Some time ago I worked up a little bit of code that I use in some of the websites I build that automatically adds the proper schema markup for images added in through the content editor. This code snippet that you can use automatically adds the three main elements to the images in your posts, which are:

1. This is an image
2. This is where the image is located (URL)
3. This is the name of the image

To automatically add markup to the images in your posts, simply add the following to your WordPress theme’s functions.php file:

add_filter('image_send_to_editor', 'wrap_my_div', 10, 8);

  function wrap_my_div($html, $id, $caption, $title, $align, $url, $size, $alt){

  $html2 = get_image_tag($id, $alt, $title, $align, $size);

    if ( $url )
		$html = '<a itemprop="contentURL" href="' . esc_attr($url) . "\"$rel>$html2</a>";
    return '<span itemscope itemtype="">'.$html.'</span>';

function custom_img_caption_shortcode( $a , $attr, $content = null) {

        'id'    => '',
        'align' => 'alignnone',
        'width' => '',
        'caption' => ''
    ), $attr));

    if ( 1 > (int) $width || empty($caption) )
        return $content;

    $caption = html_entity_decode( $caption );

    if ( $id ) $id = 'id="' . esc_attr($id) . '" ';

    return '<div ' . $id . 'class="wp-caption ' . esc_attr($align) . '" style="width: ' . (10 + (int) $width) . 'px"><span itemscope itemtype="">'
    . do_shortcode( $content ) . '<p class="wp-caption-text" itemprop="name">' . $caption . '</p></span></div><p>';

add_filter( 'img_caption_shortcode', 'custom_img_caption_shortcode', 10, 3 );

To fully enable this feature, there are two things you must do when adding images in the future:

1. Make sure you fill out the “caption” field when adding an image. The caption is used as the image’s “name” in the markup.

2. Make sure you link the image to its source URL. The above function uses this as the location of the image in the markup.

And that’s all there is to it!

One thing I will point out is that this function does not automatically add markup to the images in posts or pages you’ve already created, it only adds the markup to the content you create from this point forward.

I have used this successfully in numerous WordPress themes I’ve built. In some instances I’ve modified this function to add the markup differently, or used special styling to to make the caption text disappear. Hopefully this works well in the theme you’re building or using.