How to customize the default HTML for WordPress Attachments

3 Views

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:

Read More
<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?

Post Views: 3

Related posts

Leave a Reply

2 comments

  1. 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.. 🙂