How to customize the default HTML for WordPress Attachments

by

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" />
</a>
<p class="wp-caption-text">Area Map Improvments</p>
</div>

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?

2 s
2

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

Example

add_filter( 'img_caption_shortcode', 'my_caption_html', 10, 3 );
function my_caption_html( $current_html, $attr, $content ) {
    extract(shortcode_atts(array(
        '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.. 🙂

Leave a Comment