Using HTML5 To Transform WordPress’ TwentyTen Theme

Advertisement

Last year, WordPress launched arguably its biggest update ever: WordPress 3.01. Accompanying this release was the brand new default theme, TwentyTen2, and the promise of a new default theme every year. Somewhat surprisingly, TwentyTen declares the HTML5 doctype but doesn’t take advantage of many of the new elements and attributes that HTML5 brings.

Screenshot

Now, HTML5 does many things, but you can’t just add <!doctype html> to the top of a document and get excited that you’re so 2011. Mark-up, as they say, is meaning, and HTML5 brings a whole bunch of meaning to our documents.

In a recent survey3 by Chris Coyier over at CSS-Tricks, almost two thirds of respondents said they would not use HTML5 in new projects. In a similar survey by Smashing Magazine4 the results were almost identical: only 37% of voters said they use HTML5. This is depressing reading. Perhaps developers and designers are scared off by cross-browser incompatibility and the chore of learning new mark-up. The truth is that with a pinch of JavaScript, HTML5 can be used safely today across all browsers, back to IE6.

WordPress seems to sympathize with the majority of CSS-Tricks’ readers. TwentyTen is a fine theme that already validates as HTML55; but in order to cater to users without JavaScript, it has to forgo a large chunk of HTML5 elements. The reason? Our old friend Internet Explorer doesn’t support most of them prior to version 9.

Screenshot6
The default TwentyTen WordPress Theme.

For example, you’ve probably already heard of the <section> and <article> tags, both of which are champing at the bit to be embedded in a WordPress template. But to use these HTML5 elements in IE8 (and its predecessors), you need JavaScript in order to create them in the DOM. If you don’t have JavaScript, then the elements can’t be styled with CSS. Turn off JavaScript and you turn off the styling for these elements; invariably, this will break the formatting of your page.

I assume that WordPress decided to exclude these problematic tags so that its default theme would be supported by all browsers — not just those with JavaScript turned on.

While I understand this decision, I also think it’s a mistake. Three core technologies make the Web work: HTML, CSS and JavaScript. All desktop browsers support them (to some degree), so if any one of them off is disabled the user will have to expect a degraded experience. JavaScript is now fundamental to the user experience and while we should support users who turn off JavaScript, or have it turned off for them and have no chance to turn it on again as they don’t have the right to do so, I question just how far we should support them.

Why Using JavaScript Makes Sense

Yahoo gives compelling evidence7 that less than 1.5% of its users turn off JavaScript. My own research into this, ably assisted by Greig Daines at eConversions, puts the figure below 0.5% (based on millions of visitors to a UK retail website).

Whilst it’s true that JavaScript should be separated from a site’s content, design and structure the reality is no longer black and white. I strongly believe that the benefits and opportunities HTML5 brings, together with related technologies such as CSS3 and media queries (both of which sometimes rely on JavaScript for cross-browser compatibility), is more than enough reason to use JavaScript to ‘force’ new elements to work in Internet Explorer. I am a passionate advocate for standards-based design that doesn’t rely on JavaScript; HTML5 is the one structural exception.

Yes, we should respect a user’s decision to deactivate JavaScript in their browser. However, I don’t believe that this is a good enough reason for not using modern technologies, which would provide the vast majority of users with a richer user experience. After all, in the TwentyTen example, if the theme had HTML5 tags in it, everything would look fine in modern browsers (latest versions of Safari, Firefox, Opera, Chrome and IE9), with or without JavaScript.

If the browser is IE6 – IE8, and JavaScript is turned off, then users would see the content but it will not be styled correctly. If the content would not be displayed at all, we’d have a completely different discussion. If you are still not convinced, I will briefly discuss another option for those who absolutely must support users with JavaScript turned off.

To make TwentyTen play fair with IE, I suggest Remy Sharp’s HTML5 shim8 or, if you want to sink your teeth into CSS3, Modernizr9. Modernizr not only adds support for HTML5 elements in IE but also tells you which CSS3 properties are supported by the user’s browser by adding special classes to the <html> element.

Screenshot
Mordernizr.js

So, let’s assume you’ve rightly banished non-JavaScript users with a polite message in a <noscript> tag. We can now start tinkering under the hood of TwentyTen to bring some more HTML5 to WordPress.

Upgrading To HTML5

TwentyTen gets a number of things spot on. First of all, it declares the right doctype and includes the abbreviated meta charset tag. It also uses other semantic goodness like Microformats and great accessibility features like WAI-ARIA. But we can go further.

Important notes:

  • I am referencing the HTML generated at http://wp-themes.com/twentyten/10, rather than the simple “Hello World” clean installation of WordPress 3.
  • For this article, I’ll be editing the files directly in the /wp-content/themes/twentyten/ directory. I’ve provided all the updated HTML5 theme source files for you to download from TwentyTen Five11.
  • Line numbers may change over time, so when I reference one, I’ll usually say “on or around line…” The version of WordPress at the time of writing is 3.0.4.

Articles

One of the more confusing parts of the HTML5 spec is the <section> and <article> tags. Which came first, the chicken or the egg? The easiest way to remember is to refer to the specification. The HTML5 spec12 may be dry at the best of times, but its explanation of articles13 will always point you in the right direction:

The article element represents a self-contained composition in a document, page, application, or site and that is, in principle, independently distributable or reusable, e.g. in syndication.

If the piece of content in question can be, and most likely will be, syndicated by RSS, then there’s a good chance it’s an <article>. A blog post in WordPress fits the bill perfectly.

On the TwentyTen home page, we get the following HTML:

<div id="post-19">
…
</div>

Semantically this means very little. But with the simple addition of an article tag, we’re able to transform it into mark-up with meaning.

<article id="post-19">
…
</article>

Note that we retain the id to ensure that this <article> remains unique.

To make this change in the TwentyTen theme, open loop.php, which is in /wp-content/themes/twentyten/. On or around line 61, you should find the following code:

<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>

We’ll need to change that <div> to an <article>, so that it reads:

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>

And then we close it again on or around line 97, so that…

</div><!-- #post-## -->

… becomes:

</article><!-- #post-## -->

There are also instances on lines 32, 101 and 124. Opening some of the other pages in the theme, for example single.php, and making the same change is worthwhile. Thus, line 22 in single.php would change from…

<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>

… to:

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>

And line 55 would change from…

</div><!-- #post-## -->

… to:

</article><!-- #post-## -->

So far, so good. These are simple changes, but they already serve to overhaul the semantics of the website.

Time and Date

According to the HTML5 spec:

The <time> element either represents a time on a 24-hour clock, or a precise date on the proleptic Gregorian calendar, optionally with a time and a time-zone offset.

This means we can give the date and time of an article’s publication more context with HTML5’s <time> tag. Look at the code that WordPress generates:

<a href="http://wp-themes.com/?p=19" title="4:33 am"
rel="bookmark"><span>October 17, 2008</span></a>

We can add meaning to our mark-up by transposing this to:

<a href="http://wp-themes.com/?p=19" title="4:33 am"
rel="bookmark"><time datetime="2008-10-17T04:33Z"
pubdate>October 17, 2008</time></a>

This time is now machine-readable, and the browser can now interact with the date in many ways should we so wish. I’ve also added the boolean attribute pubdate, which designates this as the date on which the article or content was published.

Time in the datetime attribute is optional, but because WordPress includes it when you post an article, we can too. Implementing this in TwentyTen requires us to dig a little deeper. In loop.php, the following function on or around line 65 calls for the date to be included:

<?php twentyten_posted_on(); ?>

To make our HTML5 changes, let’s head over to /wp-content/themes/twentyten/ and open functions.php. On or around line 441, you’ll see this:

function twentyten_posted_on() {
printf( __( '<span>Posted on</span> %2$s <span>by</span> %3$s', 'twentyten' ),
'meta-prep meta-prep-author',
sprintf( '<a href="%1$s" title="%2$s" rel="bookmark"><span>%3$s</span></a>',
get_permalink(),
esc_attr( get_the_time() ),
get_the_date()
),

If you don’t know what that means, don’t worry. We’re focusing on the sprintf14 function, which basically takes a string and inserts the variables that are returned by the three functions listed: that is, get_permanlink(), get_the_time() and get_the_date() are inserted into %1$s, %2$s and %3$s, respectively.

We need to change how the date is formatted, so we’ll have to add a fourth function: get_the_date('c'). WordPress will then return the date in Coordinated Universal Time (UTC) format, which is exactly what the <time> element requires. Our finished code looks like this:

printf( __( 'Posted on %2$s by %3$s', 'twentyten' ),
'meta-prep meta-prep-author',
sprintf( '<a href="%1$s" rel="bookmark"><time datetime="%2$s"
pubdate>%3$s</time></a>',
get_permalink(),
get_the_date('c'),
get_the_date()
),

I’ve included get_the_date() twice because we need two different formats: one for the <time> element and one that’s displayed to the user. I’ve also removed title="[time published]" because that information is already included in the <time> element.

For more details on WordPress’ date and time functions, check out:

Figures

A figure—for our purposes at least—is a piece of media that you upload in WordPress to embed in a post. The most obvious example would be an image, but it could be a video, too, of course. WordPress 3 is helpful enough to add captions to images when you first import the images, but it doesn’t display those captions using the new HTML5 <figure> and <figcaption> tags.

The spec defines17 <figure> as follows:

The figure element represents a unit of content, optionally with a caption, that is self-contained, that is typically referenced as a single unit from the main flow of the document, and that can be moved away from the main flow of the document without affecting the document’s meaning.

And it defines <figcaption> like so:

The figcaption element represents a caption or legend for the rest of the contents of the figcaption element’s parent figure element, if any.

Currently an image with a caption is rendered like this:

<div class="wp-caption" style="width: 445px;"><img alt="Boat"
src="http://wpdotorg.files.wordpress.com/2008/11/boat.jpg"
title="Boat" width="435" height="288" />
<p class="wp-caption-text">Boat</p>
</div>

Screenshot
A WordPress image with a caption.

Changing this HTML to include HTML5 elements requires us to first look at media.php in the /wp-includes/ directory, where this code is generated. On or around line 739, you’ll find:

return '<div ' . $id . 'class="wp-caption ' . esc_attr($align) . '" style="width: ' . (10 + (int) $width) . 'px">'
. do_shortcode( $content ) . '<p>' . $caption . '</p></div>';

To upgrade this to HTML5, we need to define a new function that outputs our <figure>-based HTML and assign this function to the same shortcode that calls img_caption_shortcode(). I’ve done this in /wp-content/themes/twentyten/functions.php by adding the following to the bottom of the file:

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

function twentyten_img_caption_shortcode($attr, $content = null) {

extract(shortcode_atts(array(
'id'    => '',
'align'    => 'alignnone',
'width'    => '',
'caption' => ''
), $attr));

if ( 1 > (int) $width || empty($caption) )
return $content;

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

  return '<figure ' . $idtag . 'aria-describedby="figcaption_' . $id . '" style="width: ' . (10 + (int) $width) . 'px">'
  . do_shortcode( $content ) . '<figcaption id="figcaption_' . $id . '">' . $caption . '</figcaption></figure>';
}

First, we point the shortcodes for wp-caption and caption to our new function twentyten_img_caption_shortcode(). Then, we simply copy the original function from media.php, and change the last few lines to include our <figure> element. This now renders our boat.jpg example from above like so:

<figure id="attachment_64" style="width: 445px;">
<a href="http://localhost/wp-content/uploads/2010/07/boat.jpg">
<img title="boat" src="http://localhost/wp-content/uploads/2010/07/boat.jpg"
alt="Screenshot" width="435" height="288" aria-describedby="figcaption_attachment_64"></a>
<figcaption id="figcaption_attachment_64">Boat</figcaption>
</figure>

The Comments Form

One of the biggest improvements introduced in HTML5 is how form fields work and respond to user input. We can take advantage of these changes by using HTML5 form elements in the default WordPress comments form in three ways:

  1. We can set the text-input type to email and url for the relevant fields. This not only more accurately describes the input field, but also adds better keyboard functionality for the iPhone, for example.
  2. We can add the boolean attribute required to our required form fields. This goes beyond WAI-ARIA’s aria-required='true' because it invokes the browser’s own required behavior.
  3. We can add placeholder text to our form fields, a popular JavaScript method that is now handled in-browser. Placeholder text allows you to go into more detail about what information is required than a form label generally allows.

Before adding HTML, a typical comment input field might look like this:

<label for="email">Email</label> <span>*</span>
<input id="email" name="email" type="text" value=""
size="30" aria-required='true' />

After our HTML5 changes, it would look like this:

<label for="email">Email</label> <span>*</span>
<input id="email" name="email" type="email" value=""
size="30" aria-required='true'
placeholder="How can we reach you?" required />

To make these improvements in the code, we need to do two things. First, we need to change the HTML for the default fields (name, email address and website URL), and then we need to change it for the comment’s <textarea>. We can achieve both of these changes with additional filters and custom functions.

To change the HTML for the default form fields, we need to add the following filter to the bottom of functions.php:

add_filter('comment_form_default_fields', 'twentytenfive_comments');

And then we have to create our custom function twentytenfive_comments() to change how these fields are displayed. We can do so by creating an array containing our new form fields and then returning it to this filter. Here’s the function:

function twentytenfive_comments() {

$req = get_option('require_name_email');

$fields =  array(
'author' => '<p>' . '<label for="author">' . __( 'Name' ) . '</label> ' . ( $req ? '<span>*</span>' : '' ) .
'<input id="author" name="author" type="text" value="' . esc_attr( $commenter['comment_author'] ) . '" size="30"' . $aria_req . ' placeholder = "What should we call you?"' . ( $req ? ' required' : '' ) . '/></p>',

'email'  => '<p><label for="email">' . __( 'Email' ) . '</label> ' . ( $req ? '<span>*</span>' : '' ) .
'<input id="email" name="email" type="email" value="' . esc_attr(  $commenter['comment_author_email'] ) . '" size="30"' . $aria_req . ' placeholder="How can we reach you?"' . ( $req ? ' required' : '' ) . ' /></p>',

'url'    => '<p><label for="url">' . __( 'Website' ) . '</label>' .
'<input id="url" name="url" type="url" value="' . esc_attr( $commenter['comment_author_url'] ) . '" size="30" placeholder="Have you got a website?" /></p>'

);
return $fields;
}

You can see here that each element in the form has a name in the array(): author, email and url. We then type in our custom code, which contains the new HTML5 form attributes. We have added placeholder text to each of the elements and, where required, added the boolean required attribute (and we need to check if the admin has made these fields required using the get_option() function). We’ve also added the correct input type to the inputs for author, email address and website URL.

Finally, we need to add some HTML5 to the <textarea>, which is home to the user’s comments. We have to use another filter here, also in functions.php:

add_filter('comment_form_field_comment', 'twentytenfive_commentfield');

We follow this with another custom function:

function twentytenfive_commentfield() {

$commentArea = '<p><label for="comment">' . _x( 'Comment', 'noun' ) . '</label><textarea id="comment" name="comment" cols="45" rows="8" aria-required="true" required placeholder="What's on your mind?"    ></textarea></p>';

return $commentArea;

}

This is more or less the same as the default <textarea>, except with placeholder and required attributes.

You can control exactly which fields appear in your form with these two filters, so feel free to add more if you want to collect more information.

Although relatively simple, these changes to the comment form provide additional (and useful!) features to users with latest-generation browsers. Look in Opera, Chrome (which doesn’t yet support required) or Firefox 4 to see the results.

Header, Navigation and Footer

We finally get around to inserting the new <header>, <nav> and <footer> elements. Currently, the code in /wp-content/themes/twentyten/header.php looks more or less like this:

<div id="header">
<div id="masthead">
<div id="branding" role="banner">
…
</div><!-- #branding -->

<div id="access" role="navigation">
…
</div><!-- #access -->
</div><!-- #masthead -->
</div><!-- #header -->

It doesn’t take a genius to see that we can easily make this HTML5-ready by changing some of those divs to include <header> and <nav>.

<header id="header">
<section id="masthead" >
<div id="branding" role="banner">
…
</div><!-- #branding -->

<nav id="access" role="navigation">
…
</nav><!-- #access -->
</section><!-- #masthead -->
</header><!-- #header -->

You can see that we’ve left the WAI-ARIA role of navigation assigned to the nav element—simply to offer the broadest possible support to all browsers and screen readers.

I have replaced the #masthead div with a <section> because all of the elements in this area relate to one another and are likely to appear in a document outline. It seems you could delete this section altogether and just apply 30 pixels of padding-top to the header to maintain the layout. I’ve maintained the elements’ ids in case more than one of each are on the page—multiple headers, footers and navs (and more) are all welcome in HTML5.

While we’re editing the header, we can introduce the new <hgroup>18 element. This element enables us to include multiple headings in a section of our document, while they would be treated as just one heading in the document outline. Currently, the code on or around line 65 in header.php looks like this:

<?php $heading_tag = ( is_home() || is_front_page() ) ? 'h1' : 'div'; ?>
<<?php echo $heading_tag; ?> id="site-title">
<span>
<a href="<?php echo home_url( '/' ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a>
</span>
</<?php echo $heading_tag; ?>>
<div id="site-description"><?php bloginfo( 'description' ); ?></div>

We can edit this to include the <hgroup> tag, and also change <div id="site-description"> to an <h2> element:

<hgroup>
<?php $heading_tag = ( is_home() || is_front_page() ) ? 'h1' : 'div'; ?>
<<?php echo $heading_tag; ?> id="site-title">
<span>
<a href="<?php echo home_url( '/' ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a>
</span>
</<?php echo $heading_tag; ?>>
<h2 id="site-description"><?php bloginfo( 'description' ); ?></h2>
</hgroup>

In /wp-content/themes/twentyten/footer.php, we have:

<div id="footer" role="contentinfo">
  <div id="colophon">
  …
  <div id="site-info">
    <a href="<?php echo home_url( '/' ) ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home">
    <?php bloginfo( 'name' ); ?>
    </a>
  </div><!-- #site-info -->

  <div id="site-generator">
  …
  </div><!-- #site-generator -->

  </div><!-- #colophon -->
</div><!-- #footer -->

We can easily edit this to include a <footer> and another <section> element:

<footer role="contentinfo">
<section id="colophon">
…
<div id="site-info">
<a href="<?php echo home_url( '/' ) ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home">
<?php bloginfo( 'name' ); ?>
</a>
</div><!-- #site-info -->

<div id="site-generator">
…
</div><!-- #site-generator -->

</section><!-- #colophon -->
</footer><!-- #footer -->

JavaScript and CSS

As mentioned, we should include an HTML5 shim or Modernizr.js to make sure that all of our new elements render correctly in Internet Explorer prior to version 9. I added the following line to header.php:

<script src="<?php bloginfo('stylesheet_directory'); ?>/js/Modernizr-1.6.min.js"></script>

A couple of things to note here. First, we no longer need type="text/javascript" because the browser will assume that a script is JavaScript unless it’s told different. Secondly, we have to use the WordPress bloginfo() function to point the source URL to our theme directory.

Although we are including Modernizr partly to make sure that IE can deal with the new HTML5 elements, I am serving it to all browsers because of the CSS3-checking functionality it provides.

In style.css, we need to make sure that our HTML5 elements have a display: block attribute, because some older browsers will treat them as inline elements. For our purposes, the following line at the top of the CSS file will do:

header, nav, section, article, aside, figure, footer { display: block; }

While we’re talking about CSS, remember that we can now remove type="text/css" from our <link> tags. The simplified code looks like this:

<link rel="stylesheet" href="<?php bloginfo( 'stylesheet_url' ); ?>" />

That should be enough for now. Remember, though, that changing the structure of the page by replacing older HTML elements with new ones might require some additional CSS.

We should let the small minority of users know that we’ve stopped supporting browsers that have JavaScript turned off. A polite message just below the opening <body> tag in header.php should suffice:

<noscript><strong>JavaScript is required for this website to be displayed correctly. Please enable JavaScript before continuing...</strong></noscript>

Add some very basic styling in style.css to make this message unmissable.

/* A message for users with JavaScript turned off */
noscript strong {
display: block;
font-size: 18px;
line-height:1.5em;
padding: 5px 0;
background-color: #ccc;
color: #a00;
text-align: center; }

Still Not Convinced? A Cross-Browser Alternative

There is another option for those of you who absolutely must support users with JavaScript turned off, as suggested by Christian Heilmann19. Simply wrap your HTML5 elements with divs which share the same ID name. For example:

<article id="post-123">
...
</article>

becomes

<div class="article">
<article id="post-123">
...
</article>
</div>

Then it’s just a case of adding .article to your article CSS definition. It might look like this:

.article,
article { display: block; background-color: #f7f7f7; }

It’s worth noting that this adds another layer of markup to your code which isn’t needed for most users. I’d only recommend it if non-JavaScript users are a significant proportion of your users and/or sales.

Final Thoughts

TwentyTen was a huge step forward for WordPress; and as a piece of HTML, it is a beacon of best practice. By including some simple JavaScript, we can now open up the theme to the world of HTML5—and the additional meaning and simpler semantic code that it offers.

While we’ve addressed a good number of new HTML5 elements in this article, it really is just a starting point and you can add many more yourself. For example, you could add headers and footers to individual posts, or you might like to add the new <aside> element. Let us know your ideas and how you get on with implementing them in the comments below!

Download TwentyTen With HTML5

To complement this article, I have created a new version of TwentyTen, with the HTML5 elements we have discussed. Download this theme from TwentyTen Five20.

TwentyTen With HTML521

Other Resources

You may be interested in the following articles and related resources:

(al) (vf) (ik)

Footnotes

  1. 1 http://wordpress.org/download/
  2. 2 http://wordpress.org/extend/themes/twentyten
  3. 3 http://css-tricks.com/poll-results-html5-on-new-projects/
  4. 4 http://polldaddy.com/poll/4518784/?view=results
  5. 5 http://2010dev.wordpress.com/2010/02/02/valid-html5/
  6. 6 http://www.smashingmagazine.com/wp-content/uploads/2011/02/TwentyTenDefault.jpg
  7. 7 http://developer.yahoo.com/blogs/ydn/posts/2010/10/how-many-users-have-javascript-disabled/
  8. 8 http://remysharp.com/2009/01/07/html5-enabling-script/
  9. 9 http://www.modernizr.com/
  10. 10 http://wp-themes.com/twentyten/
  11. 11 http://www.twentytenfive.com/
  12. 12 http://dev.w3.org/html5/spec/Overview.html
  13. 13 http://dev.w3.org/html5/spec/Overview.html#the-article-element
  14. 14 http://php.net/manual/en/function.sprintf.php
  15. 15 http://codex.wordpress.org/Function_Reference/get_the_time
  16. 16 http://codex.wordpress.org/Formatting_Date_and_Time
  17. 17 http://dev.w3.org/html5/spec/Overview.html#the-figure-element
  18. 18 http://dev.w3.org/html5/spec/Overview.html#the-hgroup-element
  19. 19 http://icant.co.uk/
  20. 20 http://www.twentytenfive.com
  21. 21 http://www.twentytenfive.com
  22. 22 http://dev.w3.org/html5/spec/Overview.html
  23. 23 http://en.blog.wordpress.com/2010/12/10/new-theme-toolbox/
  24. 24 http://wordpress.org/extend/themes/toolbox
  25. 25 http://www.brucelawson.co.uk/2009/redesigning-with-html-5-wai-aria/
  26. 26 http://www.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/

↑ Back to topShare on Twitter

Richard (@richardshepherd) is a UK based web designer and front-end developer. He loves to play with HTML5, CSS3, jQuery and WordPress, and currently works full-time bringing VoucherCodes.co.uk to life. He has an awesomeness factor of 8, and you can also find him at richardshepherd.com.

Advertising
  1. 1

    Interesting article. Makes me want to rebuild my WP site now.

    1
  2. 3

    Đurica Bogosavljev

    February 22, 2011 6:21 am

    I was wondering how to do it in WP, and you explain it in this article, GR8!
    Right on time :)

    0
  3. 4

    Excellent post. Last year I converted the Grid Focus theme to HTML5 for use on my own blog and it’s a lot easier than might first be realised.

    This will help a lot of people out there who might have been tentative about converting their theme to HTML5 and I like the way that you explain what each element is for along the way which will aid understanding of these new elements which alas are still alient to some.

    0
  4. 6

    Interesting – i did the same just in past few weeks (i have just then go a different way and do not create twentyten theme by my own template). P.S.: to be 100% HTML 5 you should replace also headers, e.g. H1 to asides etc. – i do not like it as it will probably be not accepted by search engines (imo they would see aside H1 as article A1).

    0
    • 7

      no, H1- H5 are still semantically correct as titles. Though it makes more sense to contain them inside a header element. Or if there are multiple H1- H5 titles, inside an hgroup which is inside a header…

      Though aside from the added accessibility, I’m not sure what purpose adding these extra lines of html serve. :

      0
  5. 8

    recently I used html5 with wordpress. i used starkers theme which is based on twenty ten.
    but i used it blindly .. this article helps to understand why and how its done !

    thanks for efforts :)

    0
  6. 9

    Great article. I have been building a custom theme for WordPress using HTML5 but I still picked up some things here that I missed. In particular, time and figures. Now, off to work those in…

    0
  7. 10

    I completely agree with you. With the help of Remy’s script, there is little reason not to use elements like section, aside, header, footer, etc..

    I wouldn’t turn a blog into complete HTML5 yet, but you have to start somewhere :)

    0
  8. 11

    Excellent article. Thanks for taking the time to build a new Twenty-Ten with HTML5. This is great!

    0
  9. 12

    You forgot to close your footer (or you tried to close it with an div) also I’m not a 100% on the the use of Section in that example, otherwise, nice!

    0
    • 13

      I thought that about the section tag use too. I’m sure I read somewhere in the spec that a section cannot be a descendant of a footer…

      Other than that, great article!

      0
  10. 14

    Nice, but PLEASE use `wp_enqueue_script` to add JavaScript files in WordPress!
    See the WordPress Codex for further information.

    0
    • 15

      Hi Konstantin,

      I didn’t have time to go into the wp_enqueue_script function, but you’re absolutely right. I’ve changed this in the downloadable code!

      Richard

      0
  11. 16

    Wonderful article! Turning a few things into HTML5 is always the first thing I do when I start using a new WordPress theme, but there’s a lot more than what I’ve been doing, here! I’ll most certainly use these too, now, thanks!

    0
  12. 17

    Great writeup Richard!

    I created another version of TwentyTen a while back using HTML5 as more of a concept that a theme you would use (http://randyjensenonline.com/thoughts/html5-ified-twenty-ten/)

    And if anyone is wanting a serious HTML5 starter theme for WordPress, check out the Handcrafted WP Starter Theme (http://randyjensenonline.com/thoughts/handcrafted-wp-starter-theme/).

    0
  13. 18

    Come on man, i just published my blog, now you make me want to rebuild it with HTML 5, great article, thanks

    0
  14. 19

    Wonderful, absolutely perfect. Thank you for putting this together and sharing with everyone!

    0
  15. 20

    Now, HTML5 does many things, but you can’t just add <!doctype html> to the top of a document and get excited that you’re so 2011.

    Indeed. Renaming <div>s is not 2011 either. The “Javascript is required…” part of the solution can be annoying and lets people leave the website instead of turning Javascript on. I have left the old HTML4 markup at all of my websites, in my opinion it doesn’t make any difference.

    0
    • 21

      Indeed. Though thats how I slowly learned html5. I used divs (named as html5 elements) to understand what could be placed where, and how to structure my layout code. Though after a test page or two of that nonsense, It was simple to move into using html5.

      I wouldn’t use html5 on most client projects though. With websites intended for large corporations (think data entry websites etc) it doesn’t make much sense. I’m all for moving the internet forward, but when a majority of the website audience is solely relying on javascript to view a webpage, it can be a disaster waiting to happen.

      Javascript is a bells and whistles layer. There is never a right time to use it as the basic structure of your website. Of course, using it to support your basic structure in case it fails is fine… If your audience doesn’t rely on it too much.

      0
  16. 22

    Great article, a lot of useful information! I think it’s great to experiment with HTML 5 and the future technologies of the web. Keeps you ahead of the game in my opinion. What I think you missed though is that, in my opinion, people aren’t shying away from HTML 5 because they don’t want to learn new markup, but I know the reason that I don’t do anything professionally using HTML 5 is because it is not a finalized standard yet. We still have 3 more years before this thing goes mainstream. A lot can change between now and then, and who wants to have a possibility of a catastrophe happen because the tech can change? That and as you said, it’s hard to implement with the lack of cross-browser compatibility…

    0
    • 23

      Hey desdev, I don’t think we need to wait 3 years! All modern browsers are now supporting many of the HTML5 tags and you can gracefully degrade back for older browsers. I think the launch of IE9 is going to change the landscape considerably, and as HTML5 (HTML) is a living document (http://blog.whatwg.org/html-is-the-new-html5) I think everyone should start using it today!

      1
  17. 24

    A very good article, but there are a couple of points to be made.

    Just because HTML5 doesn’t have the xhtml rules for quotes around things or keeping tags all lower case and things like not needing type=”text/javascript”, its still a good practice to continue to follow those rules we’ve put in place with xhtml. Why?

    As you noted, not all browsers understand HTML5. If we needed type=”text/javascript” in IE7, we still need it even if you’re writing in HTML5.

    As for JavaScript support, you spent a lot of time justifying support the <1.5% people who have it turned off. And that's fine. If you have your JS turned off, your missing out on most of the Internet anyway and as a user you're used to it so you're not going to be missing anything on our HTML5 site anyway. The tags are going to still display, just ugly.

    0
    • 25

      The reason you no longer need ‘type=”text/javascript”‘ is that browser does not care/need it. This includes any version of IE (including IE6/IE7).

      The browser understands that if a file has the .js extension that it is going to be Javascript so there is no need for you to tell it twice.

      A lot of HTML5 changes like this come from looking at what existing browsers actually need/do with the markup you pass through to it.

      Totally agree with what you say about users with Javascript turned off, there will be used to having less of an online experience.

      0
      • 26

        Actually even more interesting – the .js ending doesn’t mean anything either. What browsers care about is the mime type of the document linked in src. You can for example write a PHP script that generates dynamic JavaScript files and send it with the correct header and it will be executed.

        0
  18. 27

    Awesome, I’m currently upgrade my personal wordpress blog to HTML5… Thank you for good article.

    0
  19. 28

    Nice.

    I have been using HTML5 since it came out and I can say I have had no problems at all, with clients, or with users. I just monitor the percentage of users who don’t have Javascript turned on (using Google Analytics) and make the required changes if needed or requested by my clients.

    *Idea* I have been suggesting to clients that they have a web technical page on their websites which teaches users how to tackle some issues like how to turn on Javascript, and maybe update to the current browser. I know it is a little presumptuous to think they would even look at that page, but hey it is one way to offer help to those who are stuck in the dark ages. lol

    I think this debate will rage on until browsers fully support HTML5, and I can understand other people’s points of view about it being a pain in the arse, but that doesn’t mean we shouldn’t be keeping our skills up to date with the most current trends and techniques.

    I think later this year the benefits of running HTML5 will far out weigh the problems with compatibility… so get on and start using it; “have a play, have a HTML5 day!” ;-)

    0
    • 29

      Just so you are aware, it is not possible to check how many users have Javascript turned off using Google Analytics as Google Analytics code you insert into your website is in fact Javascript. The figure you are looking at is for Java not Javascript.

      Totally agree that the HTML5 debate will continue to rage on until it is fully supported in browsers. The only problems is that by the time it is fully supported there will be a whole bunch of new developments that for us to debate upon.

      Like you say:

      get on and start using it; “have a play, have a HTML5 day!”

      0
      • 30

        Hey Shaun,

        It is possible! You just need a smart friend like Greig Daines, who I’m lucky enough to work with. He reverse engineered the Google Analytics code, and placed it’s .gif in noscript tags with additional parameters. This gives us an accurate number of non-JS users, which was less than 0.5% :)

        If you’re not able to go that, comparing your server logs to your analytics data should also reveal the number of non-JS users.

        Richard

        0
  20. 32

    (*: I’m still too young to touch in functions.php or in wp-includes, but there were some nice things I learned about html5 in here. Thanks, Richard Shepherd

    0
  21. 33

    Great post & great tips! Nice description of how to use the more difficult tags like article.

    Learning how to tweak TwentyTen into an HTML5 layout is a great skill to have. But if your plan is to tweak and reskin a WordPress theme, I’d suggest using Aaron Grogg’s Boilerplate theme instead of reskining TwentyTen. It’s based on the Paul Irish/Divya Manian HTML5 Boilerplate template, which contains some REALLY good CSS and JavaScript hacks. It also comes with a pretty intuitive admin screen within WP and comes with no design at all, making it easier for you to create your own styling. I was about to retweak TwentyTen until I found the Grogg template.

    Just my .$02 though…GREAT article!!!!!

    Boilerplate theme: http://wordpress.org/extend/themes/boilerplate

    HTML5 Boilerplate site: http://html5boilerplate.com/

    0
    • 34

      I’m a big fan of Starkers, and try to start all new projects with Boilerplate. This article is hopefully pulling back the curtains of WordPress, and giving users a hands-on look at how they can make changes themselves :)

      0
  22. 35

    I’m glad that we have a lot of people using HTML5 in their world. But for real business websites, I will need to wait longer.

    Don’t get me wrong. It’s a great article and I’ve learnt a lot. But a lot of my clients are far away to be ready for HTML5.

    Cheers

    0
    • 36

      I use HTML5 on ‘real business website’ and I don’t have any problems! What sort of issues do you have?

      0
    • 37

      Seeing the semantic quality of a lot of html4 web sites out there, I think it is very safe to move to HTML5 without them caring or realising it. The bigger questions is what are the immediate benefits of using HTML5 semantic elements when no browser as of yet uses the outline algorithm.

      0
  23. 38

    Gotta add one more thing…

    If I was going reskin/tweak ANY WordPress theme, I’d create a child theme first.

    0
    • 39

      Yes! You shouldn’t tweak directly in another theme. If the theme upgrades, it will overwrite your changes. Either copy the theme and rename it in style.css or (better) create a child theme :]

      0
  24. 40

    I don’t understand the use of : . W3school says “For external content, like text from a news-article, blog, forum, or any other content from an external source”. Here you use for the inside content no?

    0
  25. 42

    I understand the discourse around html5, but it seems to me that it’s, for the most part, pure hype. The real bottom point is : what does the user get at the end ?

    “using modern technologies, which would provide the vast majority of users with a richer user experience”

    Is using article and section tags instead of div tags with classes really a richer user experience ? Honestly ? I think it is a nice exercise to try to work out html5 in todays market browsers but I cannot see the reasons, today, with actual browsers functionality and technologies, for the overhead work.

    Nice article anyway!

    0
    • 43

      Well, you don’t mention stuff like embedding videos and audio. If you want to discuss you should take all the features in consideration and not just the article tags. There are far more features of HTML5 that actually enrich web design.

      0
    • 44

      Hey Nicolas,

      I think the biggest improvement a user can see is in HTML5 forms. There is a lot more functionality such as validation, required fields, placeholder text and date pickers. Browser support is improving all the time, so I think it’s a great idea to start using these features. HTML audio and video are also valuable new additions to the spec.

      Thanks for your thoughts :)
      Richard

      0
  26. 45

    Great article. I’m in the process of redoing my blog’s theme in HTML5 myself, and I’m definitely going to be referencing this article for tips. For anyone serious about this I would definitely recommend going a step further and using header and footer tags inside articles, and if you have a sidebar then it’s a perfect candidate for the aside tag.

    0
  27. 46

    I recently put together a website in WordPress using HTML5 elements and mark-up. Reading this article helped me see that I did most of it correctly. I didn’t want to mess with any of the core files of WP since I wouldn’t be updating the site regularly, so I wasn’t able to include “figure” tags to the uploaded images, but most of the others I was able to include.

    Luckily, in this case, I have a client who is more interested with reaching clients with modern browsers and mobile browsers (ie. iPads, iPhone, Android tablets, etc.) than in making sure it works in IE6 (which it does not). My hope is to make a site that will be able to make use of future technology, but is not crippled by trying to reach people using 10 year old browsers.

    See the site here.

    0
  28. 47

    tried d/ling the theme, get an error on line 76 in header.php “has_post_thumbnail” undefined when I try to view a page

    does this need something added to functions.php to work?

    Al

    0
  29. 49

    Javascript on/off argument was put to rest w/ HTML5.
    With stuff like canvas tags that solely rely on JS to be useful, jQuery popularity, and the simple fact that people want a cool/interactive web experience it more than OK to say that JS is now ‘ON’ by default and for good. If there are any issues w/ JS, then this ‘ON’ by default policy (or mindset) will force them to the top and they will be addressed (assuming there are issues w/ JS that are big and problematic – you tell me).

    Just had to say that since I keep seeing people being careful w/ whether or why JS should be thought of as being enabled by the user.
    As progress is made – who knows – but I am willing to bet that no one will even code in 1-2 years worrying about whether JS is NOT turned on.

    But, I’m just a bum – Cheers people! (I’m having a beer while writing this BTW).

    0
  30. 51

    Just activated your theme and got “Fatal error: Call to undefined function has_post_thumbnail() in C:xampphtdocsoystercovemarinawp-contentthemesrichardshepherd-TwentyTenFive-2cd0875header.php on line 76″. This on a bog standard install of 3.0.5. What did I do wrong?

    0
    • 52

      Added “add_theme_support( ‘post-thumbnails’ );” at top of functions.php and problem fixed. I’m no expert so I really can;t explain why this works or if it has any undesirable side-effects. If anyone has an explanation or better solution then I’ be pleased to hear.

      0
      • 53

        Adding “add_theme_support( ‘post-thumbnails’ );” basically enables you to use Featured Images. This is the correct solution to the problem. :D

        0
        • 54

          Thanks for flagging this issue guys. I’ve now added it into functions.php and merged the rest of the TwentyTen functions.php in. Check the download link for the latest version.

          0
  31. 55

    Fabrizio Van Marciano

    February 22, 2011 3:54 pm

    Amazing gives Twenty Ten a real boost, thanks for the post and the Twenty Ten Five link.

    0
  32. 56

    Oh, I see how it is. After I convert twenty ten to html 5 for my site (although not as in depth) you go about and do the entire thing for me.

    I still learned a lot though by reading this. Some tags I never heard of before here and there.

    0
  33. 57

    This article couldn’t have come at a better time. I’m building a site network now and wanted to use Twenty Ten and semantic, new html5 tags.

    Thanks to this article, I don’t have to figure out all the changes on my own. Smashing!

    0
  34. 58

    Nice work on spending the time rewriting the Twenty Ten theme with HTML5 additions!

    Don’t forget that Ian Stewart has had his Toolbox HTML5 theme kicking around for quite some time though! e.g. http://wordpress.org/extend/themes/toolbox and if you check out http://toolboxdemo.wordpress.com/ you can see it in all it’s glory!

    I’m actually hoping that Toolbox demo will be the next default theme for WordPress 3.1 seeing it’s getting released tomorrow.

    I don’t think they’ll have time to ship a new theme but we’ll find out soon enough! :)

    0
  35. 59

    How do you justify making a site less accessible for the sake of semantic markup the main purpose of which is to make a site more accessible?

    0
    • 60

      How is the site less accessible? I’m using HTML5 more and more and love to read more information on this?

      0
      • 61

        It’s less accessible because users without html5 support and no javascript will barely have a usable site, it’s just not worth it to lose these users when you could easily accommodate them.

        0
        • 62

          There are few other industries where the developers seem this reluctant to move their own technologies forward. Yes you will lose these users in their current browser/JavaScript state but will, like any other industry, encourage them to move forward into one that does. Did video manufacturers mourn the loss of Betamax customers – no those customers rocked out VHS when they realised the trend.

          Also – not to confuse usability with genuine accessibility as a HTML5 site can be accessible but the point you make is that it may just not be accessed in a usable manner by someone not using Javascript

          0
    • 63

      To stop supporting users with JS disabled, I think, improves accessibility.

      Why? Because we are now free to use HTML5, CSS3 and media-queries to produce flexible sites that work across multiple browsers and devices. JS allows us to support these new technologies in older browsers like IE8.

      If you’re site stats are anything like ours, non-JS numbers will be dwindling and iOS and Android users growing. If you can, take a look at the number of sales/conversions you get from non-JS users. I bet it’s bordering on insignificant.

      Richard

      0
      • 64

        The point of the improvements in html5 is to make sites more accessible, if by using such technology it makes the site less accessible to some users it defeats the object. html5 doesn’t work cross browser or cross platform currently and the argument that using future web technologies encourages users and IT managers to upgrade their browsers/OS has been proven false. The fact that many businesses still use ie6 is enough proof of that. It just doesn’t make sense to make a partially accessible html5 site when you can easily make a fully accessible site without it and without the unnecessary extra http request and extra js file to load. The html5 improvements in this article are minor at best and imo don’t justify the potential problems it could cause for older systems.

        Using browser stats to justify reliance on js is dodgy at best to quote w3schools browser stats “There are no absolute trends about the use of JavaScript. Some users have scripting turned off. Some browsers don’t support scripting”. It’s likely that there will always be 5% of users without javascript.

        0
        • 65

          I love a ‘likely’.

          The 5% is ‘likely’ the 100% of people who agree with you testing their sites with javascript turned off.

          0
          • 66

            Some people including IT managers, rightly or wrongly, still believe that javascript is a non-essential browser ‘add-on’ that represents a security threat.

            0
  36. 67

    excellent article, i’ve jut done this for my self on a project, your article makes me realise some errors I made and shown me some improvements to make to.

    Thanks for a great article and the work on twentytenfive, that and the updates from comments good work :)

    Just my two pence worth is to agree on the jscipt comments, that and add to it the same for people who cruise the web with ad blockers (its the same argument) such a small minority and mainly users in the know more than company policy/unknowing users. And with the fall back code/div.element usage we can even use this with ie6 (diety of choice help us all )

    0
  37. 68

    Nice imagery, I get the WordPress logo, but what is the big Transformers cartoon shield with the big S on it?

    0
  38. 69

    While we’re talking about CSS, remember that we can now remove type="text/css" from our link tags. The simplified code looks like this:
    I couldn’t find any further information about this issue. Looks great because it makes my pages load faster, but is this official?

    0
    • 70

      This is correct you can remove this! When any Internet browser loads a .CSS file it knows it’s going to contain CSS so there is no need for you to tell the browser again as it simply ignores it!

      0
  39. 71

    Useful article and all, but I believe that you’re misusing the element when you suggest swapping it in for I’m afraid. It should be used to distinguish parts of an article (likely as a form of chapter), not simply in place of divs.

    On a side note, I wonder when smashingmag will implement HTML5. Do as I say, not as I do? :)

    0
    • 72

      Apologies, my markup didn’t come out correctly! I was referring to the incorrect use of the ‘section’ element for the masthead area of the page.

      0
  40. 73

    I just didn’t like that you called IE our “friend”. It’s more like our enemy ò_ó …

    0
  41. 74

    James Brocklehurst

    February 23, 2011 1:47 pm

    For those of you who want to use Twenty Ten as a starting point for a custom theme, I have made a layered Photoshop version of that you can download here:

    http://www.mightymeta.co.uk/wordpress-twenty-ten-layered-psd/

    0
  42. 75

    I think this is the kind of article that our industry really needs.

    It solved many confusions in my mind about using HTML5 in my web projects.

    I am sure I can use some points from this article to convince my clients for using HTML5 rather than xhtml.

    thanks again… :)

    0
  43. 76

    Any chance to see Twenty Ten from WordPress 3.1 rebuilt in the same way? :)

    0
  44. 78

    Steffi - Web Courses Bangkok

    February 23, 2011 10:16 pm

    Great article, very informative. This theme is so popular, good to know how to modify it to get the fullest out of it.

    0
  45. 79

    Now, HTML5 does many things, but you can’t just add <!doctype html> to the top of a document and get excited that you’re so 2011. Mark-up, as they say, is meaning, and HTML5 brings a whole bunch of meaning to our documents.

    We didn’t get excited. We didn’t even mention it, because it’s not like we were leveraging a bunch of HTML5 stuff.

    I assume that WordPress decided to exclude these problematic tags so that its default theme would be supported by all browsers — not just those with JavaScript turned on.

    That’s right. We don’t have as much room to push the envelope with our default theme. It’s great, however, to see someone else modifying Twenty Ten to support the latest and greatest markup! Now you just need to update to use 3.1′s Twenty Ten as a base. :-)

    0
  46. 80

    Yeah, this should be in a child theme. Reason being, if you make all these updates and then WP3.1 comes out or WP3.1.1 and you update. BOOM, changes lost and you’re back to how you were. Child themes aren’t overwritten.

    0
  47. 81

    Although this is a great idea and it makes me itch to use it in some of my sites, HTML 5 isn’t a final specification and according to W3 won’t be until 2014!!!

    I think the stats you mention at the beginning regarding the number of people who won’t be using HTML5 are about right. There will always be those people who want to take the plunge but no design house is likely to implement this until the spec is finalised especially when it would mean more work which means either less competitive quotes or tighter margins.

    I think bodging stuff now and cutting out those users who turn JS off just to get a few semantic tags is a bit daft from pretty much any viewpoint apart from a learning one.

    0
    • 82

      HTML5 is never going to be finished specification, that idea is that it is continually developed upon so you will be waiting a lot longer than 2014!!!!

      I work for a design agency and our last 4 sites have been done in HTML5 and we are currently developing 5 more in HTML5.

      One thing you said really interests me though, when you say: “especially when it would mean more work which means either less competitive quotes or tighter margins.” where have you found this information as I’d love to read more?

      Like I say our last 4 sites have been done in HTML5 and we are developing sites faster and with less problems than previously. Using the HTML5 Boilerplate as a starting point we have less issues to deal with and there is certainly no extra work which you speak off. I also I cant see how it effects quotes or margins as we are developing faster and more efficiently than previously, so if anything we are now competitive.

      Thats just may take though, others may have different experiences. Like I said I would love to hear more on who using HTML5 gives an agency more work and makes them less competitive.

      0
  48. 83

    Vincent van den Heuvel

    February 25, 2011 6:37 am

    Nice improvements on the TwentyTen Theme, but and a big but it is ;) How about you’re plugins, do you also pimp those, every single version? Most of them aren’t HTML(5) savvy, some of them even don’t validate.

    0
    • 84

      Christopher David Garcia

      February 27, 2011 3:03 pm

      Who cares? Older HTML will still work on the same page. HTML5 doesn’t deprecate much (or anything?).

      0
  49. 85

    very usefull

    0
  50. 86

    Nicely written. HTML5s problem is it is not fully usefull on modern browsers. Even IE9 support 110/300 in html5test.com. Chrome9 is the best. But I will upgrade my blog to html5

    0
  51. 87

    Great article. Thanks for taking the time to build this.

    0
    • 88

      “Great article. Thanks for taking the time to build this.” – Tarun! Awesome guide, i like this post………..Thanks for the code reference, its helpful :)

      0
  52. 89

    Christopher David Garcia

    February 27, 2011 2:58 pm

    I’ve been working on a port of HTML5 Boilerplate (a Paul Irish joint) to Twenty Ten for the last couple of weeks. Check it out and contribute to the github project on https://github.com/o3fingers/Twenty-Ten-Boilerplate

    It suffered a little scope creep. It adds support for LESS, a stylesheet language written in the same syntax as CSS, uses google CDN’s jQuery (with a local fallback), and includes CSS3 Pie (limited CSS3 support for Internet Explorer).

    There’s still some stuff from Boilerplate I haven’t figured out how to include, so I’d love to recruit some mire contributors. But I’ve browser tested what’s there, and it’s solid. Give it a shot as a parent theme and let me know what you think!

    0
  53. 90

    Very good article. I think that as long as a solution degrades gracefully for non-Javascript users – as long as they don’t miss any content, that is okay.

    0
  54. 91

    Please, what ever you design and develop. Don’t forget about people with a poor internet connection, people with slow computers (e.g. win 98). People who are living in africa and struggling with pages, developed in our western world. Out of experience I can say that a lot of our solutions are very bad their. For example using Javascript Reload Techniques like Fb and Twitter make big problems behind slow connections with high delays.

    0
  55. 92

    Great article, thanks alot!

    0
  56. 93

    Awesome resource. Thanks really. I just launched a website gallery for HTML5 websites @ http://html5based.com, now I can change it to HTML5. Thanks to smashing mag

    0
  57. 94

    Thanks for the effort, your article was very informative!

    btw in WP 3.1 (haven’t tested earlier versions) images with captions don’t align – they’re always on the left side.

    0
    • 95

      I noticed this too. You have to change the figure function so it uses ‘align’ by removing alignnone and then adding class="wp-caption ' . esc_attr($align) . '" ' to get the figures to use the alignment classes.

      Change this line: 'align' => 'alignnone',
      To this: 'align' => '',

      Then change this line: return '<figure ' . $idtag . 'aria-describedby="figcaption_' . $id . '" style="width: ' . (10 + (int) $width) . 'px">'
      To this: return '<figure class="wp-caption ' . '.esc_attr($align) .'"' . $idtag . 'aria-describedby="figcaption_' . $id . '" style="width: ' . (10 + (int) $width) . 'px">'

      0
      • 96

        I noticed another problem with the figure. The function assumes an ID was created by the author during the editing stage. However, this isn’t always case. When IDs are not created, this function will use the same ID for all figcations in a post (not valid HTML).

        To fix this, replace this line:
        if ( $id ) $idtag = 'id="' . esc_attr($id) . '" ';

        with:
        if ( $id ) {
        $idtag = 'id="' . esc_attr($id) . '" ';
        } else {
        $id = $id + 1;
        }

        0
  58. 97

    This is a good HTML5 template example without losing much capability with browsers of older versions http://www.seminimalist.com/yotheme-wordpress-html5-theme/ .

    0
  59. 98

    I am using the default twenty ten theme. I have ‘unchecked’ the box on the page to not allow comments and the comment box still shows

    It appears that the code for the comments is in the funcstions.php.

    Any suggestions?
    Thanks…

    0
  60. 99

    I uploaded the twenty ten theme for another project and was able to hide the comments with the check box – the way it should work!

    This tells me that either a plugin,, or some modification or setting is causing the problem… any suggestions on what to check?

    0
  61. 100

    Appreciate the pointers to convert the twentyten theme to HTML5! There is a more appropriate way to do the conversion to the <figure> tag. If you look in media.php you’ll see that img_caption_shortcode() is configured to use a filter which can be used to replace the default formatting.

    Instead of:

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

    Use:

    add_filter('img_caption_shortcode', 'my_img_caption_shortcode_filter'),10,3);

    It’s also necessary to add one more parameter to the beginning of the filter function. This part is not well documented at the moment. When filters are applied, an extra parameter is sent. The second parameter of the call to apply_filters() is added as the first parameter to the filter function.

    Further, within the filter function, the use of $id should be escaped as it is in the if clause setting up $idtag. The example provided uses the naked $id value in several places.

    function my_img_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 . '';
    }

    0
  62. 101

    Great article:)

    Great HTML5 beginner guide.

    It gave me a better idea of how to start building in HTML5 with the cross-browser alternative.

    Thanks lot:)

    0
  63. 102

    Brett Widmann

    May 6, 2011 2:34 pm

    This was really helpful. It made it really easy to implement and create!

    0
  64. 103

    It’s what im looking for!, Thank you!

    0
  65. 104

    This post gave me the idea to create my own HTML5 WordPress Theme with some HTML5 Boilerplate cuts. Give Basics a try at http://wp4design.com

    0
  66. 105

    Hi,

    It’s nice themes but some demo should be have an extra for user to see it an action before download the files :)

    0
  67. 106

    By the way: “pubdate” is dead…

    0
  68. 107

    I don’t suppose anyone can help me. I’ve got all this working apart from the ‘figures’ section. Basically the DIV is stripped from the caption but it not replaced by the FIGURE tag. So basically the IMG is wrapped in a P tag instead which obviously isn’t right. Thanks.

    0

↑ Back to top