{"id":609,"date":"2012-10-22T12:55:21","date_gmt":"2012-10-22T11:55:21","guid":{"rendered":"http:\/\/basics.4design.tl\/?p=609"},"modified":"2012-10-22T16:49:52","modified_gmt":"2012-10-22T15:49:52","slug":"version-0-5-html5-boilerplate-4-01-and-fix-for-caption-shortcode","status":"publish","type":"post","link":"http:\/\/4design.xyz\/wordpress-basics\/version-0-5-html5-boilerplate-4-01-and-fix-for-caption-shortcode","title":{"rendered":"[Version 0.5] HTML5 Boilerplate 4.0.1 and fix for caption shortcode"},"content":{"rendered":"<p>Since WordPress 3.4, the caption shortcode with figure and figcaption has to be fixed because <q cite=\"http:\/\/wordpress.org\/support\/topic\/caption-broken-in-new-34-posts#post-2933359\">a deliberate change in WordPress 3.4. Instead of having caption=&#8221;&#8221; as an attribute of the &#8220;caption&#8221; 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.<\/q> 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!<!--more--><\/p>\n<h2>HTML5 Boilerplate<\/h2>\n<p>HTML5 boilerplate comes with <a href=\"https:\/\/github.com\/h5bp\/html5-boilerplate\/blob\/v4.0.1\/CHANGELOG.md\">some improvments<\/a> relative to the latest version (3.0.2) that I have implemented within Basics.<\/p>\n<h3>4.0.1 (20 October, 2012)<\/h3>\n<ul>\n<li>Update to jQuery 1.8.2.<\/li>\n<li>Update to Modernizr 2.6.2.<\/li>\n<\/ul>\n<h3>4.0.0 (28 August, 2012)<\/h3>\n<ul>\n<li>Add a HiDPI example media query (#1127).<\/li>\n<li>Update to Normalize.css 1.0.1.<\/li>\n<li>Separate Normalize.css from the rest of the CSS (#1160).<\/li>\n<li>Improve console.log protection (#1107).<\/li>\n<li>Replace hot pink text selection color with a neutral color.<\/li>\n<li>Change image replacement technique (#1149).<\/li>\n<li>Code format and consistency changes (#1112).v\n<li>Rename CSS file and rename JS files and subdirectories.<\/li>\n<\/ul>\n<p>&rarr; See more detailed <a href=\"http:\/\/4design.xyz\/wordpress-basics\/wp-content\/themes\/basics\/CHANGELOG.txt\">changelog<\/a> from Basics.<\/p>\n<h2>Fix for caption shortcode<\/h2>\n<p>In short, the image and its caption was always here, but naked, without the semantic figure and figcaption tags&#8230; To fix this issue, the former function hooked by the <code>add_shortcode('wp_caption', 'basics_img_caption_shortcode');<\/code> and <code>add_shortcode('caption', 'basics_img_caption_shortcode');<\/code> doesn&#8217;t work properly. We must use <code>add_filter('img_caption_shortcode', 'basics_caption_shortcode_filter',10,3);<\/code> instead.<\/p>\n<h3>image with caption<\/h3>\n<figure id=\"attachment_613\" aria-labelledby=\"figcaption_attachment_613\" class=\"wp-caption alignnone\" style=\"width: 580px\"><a href=\"http:\/\/4design.xyz\/wordpress-basics\/version-0-5-html5-boilerplate-4-01-and-fix-for-caption-shortcode\/socialite-2\" rel=\"attachment wp-att-613\"><img loading=\"lazy\" class=\"size-large wp-image-613\" title=\"socialite\" src=\"http:\/\/4design.xyz\/wordpress-basics\/wp-content\/blogs.dir\/6\/wp-content\/blogs.dir\/6\/wp-content\/blogs.dir\/6\/wp-content\/blogs.dir\/6\/wp-content\/uploads\/2012\/10\/socialite-580x315.jpg\" alt=\"\" width=\"580\" height=\"315\" srcset=\"http:\/\/4design.xyz\/wordpress-basics\/wp-content\/blogs.dir\/6\/files\/2012\/10\/socialite-580x315.jpg 580w, http:\/\/4design.xyz\/wordpress-basics\/wp-content\/blogs.dir\/6\/files\/2012\/10\/socialite-500x272.jpg 500w, http:\/\/4design.xyz\/wordpress-basics\/wp-content\/blogs.dir\/6\/files\/2012\/10\/socialite.jpg 889w\" sizes=\"(max-width: 580px) 100vw, 580px\" \/><\/a><figcaption id=\"figcaption_attachment_613\" class=\"wp-caption-text\">Hooray! my caption is now captioning! Hooray! my caption is now captioning! Hooray! my caption is now captioning! Hooray! my caption is now captioning!<\/figcaption><\/figure>\n<h2>Here comes the code :<\/h2>\n<pre><code>\r\n\/**\r\n * The Caption shortcode with figure and figcaption\r\n * fix based on http:\/\/wordpress.org\/support\/topic\/caption-broken-in-new-34-posts\r\n * Thanks @regisrob\r\n *\/\r\nadd_filter( 'img_caption_shortcode', 'basics_caption_shortcode_filter',10,3 );\r\nif ( ! function_exists( 'basics_caption_shortcode_filter' ) ) :\r\nfunction basics_caption_shortcode_filter( $val, $attr, $content = null ) {\r\n\textract(shortcode_atts(\r\n\t\tarray(\r\n\t\t'id' => '',\r\n\t\t'align' => '',\r\n\t\t'width' => '',\r\n\t\t'caption' => ''\r\n\t\t), \r\n\t\t$attr )\r\n\t);\r\n\tif ( 1 > ( int ) $width || empty( $caption ) )\r\n\t    return $val;\r\n\t$capid = '';\r\n\tif ( $id ) {\r\n\t    $id = esc_attr( $id );\r\n\t    $capid = 'id=\"figcaption_'. $id . '\" ';\r\n\t    $id = 'id=\"' . $id . '\" aria-labelledby=\"figcaption_' . $id . '\" ';\r\n\t}\r\n\treturn '<figure ' . $id . 'class=\"wp-caption ' . esc_attr( $align ) . '\" style=\"width: '\r\n\t. (0 + ( int ) $width) . 'px\">' . do_shortcode( $content ) . '<figcaption ' . $capid\r\n\t. 'class=\"wp-caption-text\">' . $caption . '<\/figcaption><\/figure>';\r\n}\r\nendif;\r\n<\/code><\/pre>\n<p>Thanks to <a href=\"https:\/\/twitter.com\/@regisrob\">@regisrob<\/a> <a href=\"https:\/\/github.com\/br1o\/Basics\/issues\/1\">to alert me on this issue<\/a> and suggests me <a href=\"http:\/\/wordpress.org\/support\/topic\/caption-broken-in-new-34-posts\">this interesting thead<\/a>.<\/p>\n<p>Hey! Don&#8217;t forget: <a href=\"http:\/\/4design.xyz\/wordpress-basics\/wordpress-basics-github\">Basics and Beyond Basics are now on Github!<\/a><\/p>\n<p>We salute you.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>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=&#8221;&#8221; as an attribute of the &#8220;caption&#8221; shortcode, WordPress inserts the caption into the main content of the shortcode, after the image and in between the caption tag &hellip; <a href=\"http:\/\/4design.xyz\/wordpress-basics\/version-0-5-html5-boilerplate-4-01-and-fix-for-caption-shortcode\" rel=\"nofollow\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":true,"template":"","format":"standard","meta":[],"categories":[4],"tags":[171,71],"_links":{"self":[{"href":"http:\/\/4design.xyz\/wordpress-basics\/wp-json\/wp\/v2\/posts\/609"}],"collection":[{"href":"http:\/\/4design.xyz\/wordpress-basics\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/4design.xyz\/wordpress-basics\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/4design.xyz\/wordpress-basics\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/4design.xyz\/wordpress-basics\/wp-json\/wp\/v2\/comments?post=609"}],"version-history":[{"count":0,"href":"http:\/\/4design.xyz\/wordpress-basics\/wp-json\/wp\/v2\/posts\/609\/revisions"}],"wp:attachment":[{"href":"http:\/\/4design.xyz\/wordpress-basics\/wp-json\/wp\/v2\/media?parent=609"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/4design.xyz\/wordpress-basics\/wp-json\/wp\/v2\/categories?post=609"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/4design.xyz\/wordpress-basics\/wp-json\/wp\/v2\/tags?post=609"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}