[Version 0.5] HTML5 Boilerplate 4.0.1 and fix for caption shortcode

Since WordPress 3.4, the caption shortcode with figure and figcaption has to be fixed because a deliberate change in WordPress 3.4. Instead of having caption=”” as an attribute of the “caption” shortcode, WordPress inserts the caption into the main content of the shortcode, after the image and in between the caption tag of the shortcode. This change in 3.4 was necessary to allow for HTML in captions. Meanwhile, HTML5 Boilerplate 4.0.1 was issued since a few days. Two good raisons to make some updates to Basics and Beyond Basics! For those about to rock, fire!

HTML5 Boilerplate

HTML5 boilerplate comes with some improvments relative to the latest version (3.0.2) that I have implemented within Basics.

4.0.1 (20 October, 2012)

  • Update to jQuery 1.8.2.
  • Update to Modernizr 2.6.2.

4.0.0 (28 August, 2012)

  • Add a HiDPI example media query (#1127).
  • Update to Normalize.css 1.0.1.
  • Separate Normalize.css from the rest of the CSS (#1160).
  • Improve console.log protection (#1107).
  • Replace hot pink text selection color with a neutral color.
  • Change image replacement technique (#1149).
  • Code format and consistency changes (#1112).v
  • Rename CSS file and rename JS files and subdirectories.

→ See more detailed changelog from Basics.

Fix for caption shortcode

In short, the image and its caption was always here, but naked, without the semantic figure and figcaption tags… To fix this issue, the former function hooked by the add_shortcode('wp_caption', 'basics_img_caption_shortcode'); and add_shortcode('caption', 'basics_img_caption_shortcode'); doesn’t work properly. We must use add_filter('img_caption_shortcode', 'basics_caption_shortcode_filter',10,3); instead.

image with caption

Hooray! my caption is now captioning! Hooray! my caption is now captioning! Hooray! my caption is now captioning! Hooray! my caption is now captioning!

Here comes the code :


/**
 * The Caption shortcode with figure and figcaption
 * fix based on http://wordpress.org/support/topic/caption-broken-in-new-34-posts
 * Thanks @regisrob
 */
add_filter( 'img_caption_shortcode', 'basics_caption_shortcode_filter',10,3 );
if ( ! function_exists( 'basics_caption_shortcode_filter' ) ) :
function basics_caption_shortcode_filter( $val, $attr, $content = null ) {
	extract(shortcode_atts(
		array(
		'id' => '',
		'align' => '',
		'width' => '',
		'caption' => ''
		), 
		$attr )
	);
	if ( 1 > ( int ) $width || empty( $caption ) )
	    return $val;
	$capid = '';
	if ( $id ) {
	    $id = esc_attr( $id );
	    $capid = 'id="figcaption_'. $id . '" ';
	    $id = 'id="' . $id . '" aria-labelledby="figcaption_' . $id . '" ';
	}
	return '
' . do_shortcode( $content ) . '
' . $caption . '
'; } endif;

Thanks to @regisrob to alert me on this issue and suggests me this interesting thead.

Hey! Don’t forget: Basics and Beyond Basics are now on Github!

We salute you.