Filter's used to add a little SMACSS to WordPress captions and gallery short codes.

_note.md

Refer slides on Speaker Deck at https://speakerdeck.com/peterwilsoncc/specificity-smacss-and-wordpress

functions.php

<?php

add_filter( 'img_caption_shortcode', 'pwcc_filter_img_caption_shortcode', 10, 3 );
add_filter( 'post_gallery', 'pwcc_filter_post_gallery', 10, 2 );

function pwcc_filter_img_caption_shortcode( $output, $attr, $content ) {
	extract( shortcode_atts( array(
		'id'	=> '',
		'align'	=> 'alignnone',
		'width'	=> '',
		'caption' => ''
	), $attr ) );
	
	if ( 1 > (int) $width )
		return $content;

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

	$output .= '<div ' . $id . 'class="caption caption--inline ' . esc_attr($align) . '" style="max-width: ' . (int) $width . 'px">'
	. do_shortcode( $content );
	
	if (empty($caption) == false) {
		$output .= '<p class="caption__text">' . $caption . '</p>';
	}
	$output .= '</div>';
	
	return $output;
}


function pwcc_filter_post_gallery( $output, $attr ) {
	global $post;

	static $instance = 0;
	$instance++;
	
	if ( isset( $attr['orderby'] ) ) {
		$attr['orderby'] = sanitize_sql_orderby( $attr['orderby'] );
		if ( !$attr['orderby'] )
			unset( $attr['orderby'] );
	}
	
	extract( shortcode_atts( array(
		'order'      => 'ASC',
		'orderby'    => 'menu_order ID',
		'id'         => $post->ID,
		'itemtag'    => 'dl',
		'icontag'    => 'dt',
		'captiontag' => 'dd',
		'columns'    => 3,
		'size'       => 'thumbnail',
		'include'    => '',
		'exclude'    => ''
	), $attr ) );
	
	$id = intval( $id );
	if ( 'RAND' == $order )
		$orderby = 'none';
	
	if ( !empty( $include ) ) {
		$include = preg_replace( '/[^0-9,]+/', '', $include );
		$_attachments = get_posts( array(
			'include'        => $include, 
			'post_status'    => 'inherit', 
			'post_type'      => 'attachment', 
			'post_mime_type' => 'image', 
			'order'          => $order, 
			'orderby'        => $orderby
		) );

		$attachments = array();
		foreach ( $_attachments as $key => $val ) {
			$attachments[$val->ID] = $_attachments[$key];
		}
	} elseif ( !empty( $exclude ) ) {
		$exclude = preg_replace( '/[^0-9,]+/', '', $exclude );
		$attachments = get_children( array(
			'post_parent'    => $id, 
			'exclude'        => $exclude, 
			'post_status'    => 'inherit', 
			'post_type'      => 'attachment', 
			'post_mime_type' => 'image', 
			'order'          => $order, 
			'orderby'        => $orderby
		) );
	} else {
		$attachments = get_children( array(
			'post_parent'    => $id, 
			'post_status'    => 'inherit', 
			'post_type'      => 'attachment', 
			'post_mime_type' => 'image', 
			'order'          => $order, 
			'orderby'        => $orderby
		) );
	}

	if ( empty( $attachments ) )
		return '';

	if ( is_feed() ) {
		$output = "\n";
		foreach ( $attachments as $att_id => $attachment )
			$output .= wp_get_attachment_link( $att_id, $size, true ) . "\n";
			return $output;
	}

	$itemtag = tag_escape( $itemtag );
	$captiontag = tag_escape( $captiontag );
	$columns = intval( $columns );
	$itemwidth = $columns > 0 ? floor( 100/$columns ) : 100;
	$float = is_rtl() ? 'right' : 'left';
	
	$gallery_style = $gallery_div = '';
	
	$size_class = sanitize_html_class( $size );
	$selector = '';
	$selector .= "gallery ";
	$selector .= "gallery--{$instance} ";
	$selector .= "gallery--columns-{$columns} ";
	$selector .= "gallery--size-{$size_class} ";
	
	$output = "<div class='{$selector}'><div class='in'>";


	$i = 0;
	foreach ( $attachments as $id => $attachment ) {
		$link = isset( $attr['link'] ) && 'file' == $attr['link'] ? wp_get_attachment_link( $id, $size, false, false ) : wp_get_attachment_link( $id, $size, true, false );
		
		$max_caption_width = wp_get_attachment_image_src( $id, $size );
		$max_caption_width = $max_caption_width[1];

		$output .= "<div class='gallery__item'><div class='caption' style='max-width:{$max_caption_width}px;'>";
		$output .= $link;

		if ( $captiontag && trim( $attachment->post_excerpt ) ) {
			$output .= "
				<p class='caption__text gallery__caption'>
				" . wptexturize($attachment->post_excerpt) . "
				</p>";
		}
		$output .= "</div></div>";
		if ( $columns > 0 && ++$i % $columns == 0 ) {
			// $output .= '<br style="clear: both" />';
		}
	}

	$output .= "</div></div>\n";

	
	// $output = '';
	return $output;
}

html-produced.html

<!-- caption -->

<div id="attachment_544" class="caption caption--inline aligncenter" style="max-width: 300px">
	<a href="boat.jpg"><img src="boat.jpg?w=300" alt="" width="300" height="198" class="size-medium wp-image-544"></a>
	<p class="caption__text">
		A picture is worth a thousand words
	</p>
</div>


<!-- gallery -->
<div class='gallery gallery--1 gallery--columns-3 gallery--size-thumbnail'>
	<div class='in'>
	
		<div class='gallery__item'>
			
			<div class='caption' style='max-width:150px;'>
				<a href='boat.jpg' title='boat'><img width="150" height="150" src="boat-150x150.jpg" class="attachment-thumbnail" alt="canola"></a>
				<p class='caption__text gallery__caption'>
					A picture is worth a thousand words
				</p>
			</div>
			
		</div>
	
	</div>
</div>