WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

I'm using Wordpress 3.0.1 (most recent as of now) and working around the Whiteboard theme.

It seems that for attachments (images, specifically), Wordpress generates the HTML automatically and it looks something like this:

<div id="attachment_12" class="wp-caption alignleft" style="width: 310px">
<a rel="shadowbox" href="http://new.michaellane.com/blog/wp-content/uploads/2010/11/areamapchange.png">
<img class="size-medium wp-image-12 " title="Area Map Improvments" src="http://new.michaellane.com/blog/wp-content/uploads/2010/11/areamapchange-300x179.png" alt="Area Map Improvments" width="300" height="179" />
<p class="wp-caption-text">Area Map Improvments</p>

I understand that some of these attributes can be changed in the editing screen itself - however I want to change the default HTML code structure so that I can insert additional tags, CSS classes etc.

I need a method to achieve this without editing any files outside the wp-content folder - in other words, there must be a template-based way to do this.. any ideas?

share|improve this question

I want to change the default HTML code structure so that I can insert additional tags

Run a filter on img_caption_shortcode, you can find that hook in the source here. http://core.trac.wordpress.org/browser/tags/3.0.1/wp-includes/media.php#L720


add_filter( 'img_caption_shortcode', 'my_caption_html', 10, 3 );
function my_caption_html( $current_html, $attr, $content ) {
        'id'    => '',
        'align' => 'alignnone',
        'width' => '',
        'caption' => ''
    ), $attr));
    if ( 1 > (int) $width || empty($caption) )
        return $content;

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

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

I've basically borrowed most of the code from the original function to use in the filter, but it should give you something to build on top of...

Hope that helps.. :)

share|improve this answer

See also How can I add a URL field to the attachments window? where I’ve posted a small demo plugin.

share|improve this answer

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

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