Convert Your WordPress Theme to HTML5
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!)
- 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).
Title of the Article
Some lorem ispum text of your post goes here.
The article's text ends.
Now we just need to know where to put the new HTML5 tags of
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.
– HTML5 has a really simple doctype but it includes a lot of new semantic tags
– The semantic tag for the header portion
– We replaced the navigation bar’s
divcode with a new semantic tag used to control the nav bar in HTML5.
Note: Some people include the
sectiontag in the header. There is a lot of debate about this. I personally am against including the
sectiontag in the header as it will destroy the beauty of HTML5. You can use the old
divin 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
tags. So remove
tag for stylesheet.
Considering the Old Browsers!
We will need to enqueue the script from our functions.php file, like this:function html5_scripts() // Register the Modernizr script wp_register_script( 'modernizr', get_template_directory_uri() . '/js/Modernizr-1.6.min.js' ); // Enqueue Modernizr wp_enqueue_script( 'modernizr' ); add_action( 'wp_enqueue_scripts', 'html5_scripts', 1 );
Note: This script needs to be placed at the very top inside the
tag, which is why we have given the
add_actiona 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.
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:
Sectionwill replace with entries’ div,
articlewill replace the post’s div, and
asidewill be used for our sidebar a little later.
– HTML5 has a layout tag called
sectionthat separates a block for the code used in it
– A semantic tag for the post’s portion, similar to
– 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
and for page navigation we will use
Complete Index.php in HTML5
Note: I am pasting a general index.php, as in, some completed code converted to HTML5 below.
"> Read More
Step 3 Working on sidebar.php
We will use
in our sidebar instead of a
div, for example:
sidebar.php in XHTML
Becomes the following after using
sidebar.php in HTML5
That was easy!
Step 4 The footer.php Edits
We will use the
semantic tag instead of a simple
divin 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
articletags in it. You can also use the
tag if you like.
single.php in XHTML
single.php in HTML5
Read More'); ?>
Note: Regarding SEO, some people use
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:
header, nav, section, article, aside, figure, footer display: block;
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.
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!
Original from: http://wp.tutsplus.com/tutorials/theme-development/convert-your-wordpress-theme-to-html5/