Since WordPress is updated to 3.4, many people encounter problems with their figure captions in HTML5 themes. HTML5 themes are nice, but many still use the old way of implementing figure captions. There is however a solution which is fairly easy, and this will be explained in this article.

Now the reason that I share it here is that I first had to delve through some WordPress Support Forum posts, Stackoverflow and websites promoting the wrong solution before finding the solution somewhere hidden in the haystack. Hence, I give  props to Andidas for implementing figure captions the right way.

The broken WordPress figcaption solution:

Now, many people and themes used the ‘add_shortcode’ approach, for example here. Basically, it inserts some code to the existing WordPress image caption shortcode like below:

add_shortcode('wp_caption', 'custom_img_caption_shortcode_function');
add_shortcode('caption', 'custom_img_caption_shortcode_function');

This replaces the existing caption shortcodes with a custom written build, but it is better to filter the existing function for displaying the shortcode.

Update: core support for HTML5 figcaption

Since WordPress 3.6, WordPress Core supports HTML 5 captions. This makes it bloody easy to enable HTML5 figure captions automatically. It can be done in the following way:

add_theme_support( 'html5', array( 'caption' ) );

Place this anywhere in your themes functions location, most likely functions.php to have effect.

The original code for allowing HTML5 figure captions

Before the support for html5 caption was added to core, the best approach was to hook upon the caption_shortcode filter. Hence, a better approach is to add a filter to the default caption_shortcode hook that is generating the captions and thus override it with the function of the filter. Thus, a better solution would be this (built upon Andidas his approach):

Using this code, your captions will automatically be a HTML5 figure caption. This code should most likely be placed in your themes functions.php or any custom function script.