64x64 icon dark hosting
Get a Tuts+ subscription for just $45! Deploy New Relic now to claim.
Advertisement

Convert Your WordPress Theme to HTML5

by

HTML5 introduces a great set of new features and easy options. Soon it will have the full support of most browsers in use today. Eventually everyone will have to convert WordPress themes from XHTML to HTML5. After Google's Panda Update, your site needs clearer and more human-readable code to rank better on Google. I will teach you how to convert your theme from XHTML to HTML5. We will also take care of the 2% of internet users with JavaScript disabled (for backward compatibility).


Our Goals

In this tutorial we will concentrate on converting our WordPress theme from XHTML to HTML5. We will go step by step, learning the changes through the files listed below (these files are present in your theme folder, i.e. wp-content/themes/yourtheme/here!)

  • header.php
  • index.php
  • sidebar.php:
  • footer.php
  • single.php (Optional)

Basic HTML5 Layout

Let's have a look at the basic HTML5 layout that we are going to build. HTML5 is a lot more than just the doctype at the very start of your code. Several newly introduced elements help us to style and code in an efficient way with less mark up (that is one reason HTML5 is better).

Now we just need to know where to put the new HTML5 tags of header, footer, nav, section and article. The names of the newly introduced tags are self explanatory about their function, in contrast with div structured XHTML.


Step 1 Converting header.php to HTML5

Now I will show you the code commonly used in the header.php of XHTML WordPress themes.

XHTML Theme header.php

One must ask here why are we doing all this? The answer is simple, for the semantic markup of HTML5. It reduces the markup, making it very easy to understand & manage.

HTML5 header.php (Conversion)

Read the code and then follow the instructions below to convert your theme's header.php to HTML5.

As you can see the converted code is very similar to XHTML code. Let's discuss the changes.

  • <!doctype html> – HTML5 has a really simple doctype but it includes a lot of new semantic tags
  • <header> – The semantic tag for the header portion
  • <nav> – We replaced the navigation bar's div code with a new semantic tag used to control the nav bar in HTML5.

Note: Some people include the section tag in the header. There is a lot of debate about this. I personally am against including the section tag in the header as it will destroy the beauty of HTML5. You can use the old div in there of course.

What About the Scripts and Stylesheets?

The scripts and stylesheets inclusion in the header, when converting a WordPress theme to HTML5, is really very simple. In HTML5 we just use <script> and <link> tags. So remove type="text/javascript" - all browsers will consider a <script> tag as JavaScript unless you explicitly write its type. Similarly remove type="text/css" from your <link> tag for stylesheet.

Considering the Old Browsers!

HTML shiv is included for older browser support. It is a simple JavaScript file. Some examples of shiv are Remy Sharp's HTML5 script or the Modernizr script. Let's use Modernizr.

We will need to enqueue the script from our functions.php file, like this:

Tip: Put your heading tags which occur consecutively inside <hgroup>

Note: This script needs to be placed at the very top inside the <?php wp_head(); ?> tag, which is why we have given the add_action a priority of 1.


Step 2 Converting index.php to HTML5

A common XHTML index.php consists of the following tags. I will convert each of them, explaining the whole process after conversion.

Note: I am not adding the whole code here, as it will make the post longer for no reason.

XHTML index.php

HTML5 index.php (Conversion)

Before having a look at the changes we made, we must know that HTML5 provides us with three basic layout modelling tags: section, article and aside. Section will replace with entries' div, article will replace the post's div, and aside will be used for our sidebar a little later.

  • <section> – HTML5 has a layout tag called section that separates a block for the code used in it
  • <article> – A semantic tag for the post's portion, similar to section
  • <aside> – A semantic tag for the post's images to put them on aside and for sidebars
  • Breadcrumbs and Page Navigation – If our theme has breadcrumbs then they will be used in a div like <div class="breadcrumbs">...</div> and for page navigation we will use <nav id="pgnav">...</nav>

Complete Index.php in HTML5

Note: I am pasting a general index.php, as in, some completed code converted to HTML5 below.


Step 3 Working on sidebar.php

We will use <aside> in our sidebar instead of a div, for example:

sidebar.php in XHTML

Becomes the following after using <aside>.

sidebar.php in HTML5

That was easy!


Step 4 The footer.php Edits

We will use the <footer> semantic tag instead of a simple div in our footer.php, for example:

footer.php in XHTML

footer.php in HTML5


Step 5 Working on single.php

There are no special changes in single.php so I am just pasting the changed code, it might be helpful to some of you who are beginners. I have used section and article tags in it. You can also use the <time> tag if you like.

single.php in XHTML

single.php in HTML5

Note: Regarding SEO, some people use <header class="entry-header"> before the post titles, which is also a good practice.


Step 6 Finally the style.css

In the end all we care about is the backward compatibility issue. Being on the safe side for older browsers, HTML5 elements should be displayed as blocks using a display: block style. Just put the following code at the top of your style.css:


Additional Notes

If you use audio or video embedded into a template file, you must use HTML5 audio and video elements. Some more tags can be viewed in the cheat sheet below. Whenever you add some new functionality, do a little research on how to add it in HTML5 with its semantic tags.

HTML5 Resources

Some HTML5 Free Themes

Your Turn Now

Are you going to use HTML5? Have you changed to HTML5 already and did the changes affect your SEO Ranking? Let us know in the comments below!

Advertisement