Convert Your WordPress Theme to HTML5

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).

<!DOCTYPE html>
<html lang="en">
<head>
	<title>TITLE | Slogan!</title>
</head>
<body>
	<nav role="navigation"></nav>
<!--Ending header.php-->
<!--Begin  index.php-->
	<section id="content">
		<article role="main">
			<h1>Title of the Article</h1>
			<time datetime="YYYY-MM-DD"></time>
			<p>Some lorem ispum text of your post goes here.</p>
			<p>The article's text ends.</p>
		</article>
		
		<aside role="sidebar">
			<h2>Some Widget in The Sidebar</h2>
		</aside>
	</section>
<!--Ending index.php-->
<!--begin  footer.php-->
	<footer role="foottext">
		<small>Some Copyright info</small>
	</footer>
</body>
</html>

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>My  Blog</title>
<?php wp_head(); ?>
</head>
<body>
<!-- Header  -->
<div class="header">
	<div class="container">
		<h1><a href="<?php bloginfo('url');?>">My Blog is Working Great.</a></h1>
	</div><!-- End  Container -->
</div><!-- End  Header -->


<!-- Navigation Bar Starts -->
<div class="navbar">
	<div class="container">
		<ul class="grid nav_bar">
			<?php wp_list_categories('navs_li='); ?>
	     </ul>
	</div>
</div>
<!-- Navigation Bar Ends -->
<div class="container">

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.

<!doctype html>
<html>
<head>
<title>My Blog</title>
<?php wp_head(); ?>
</head>
<body>
<!-- Header -->
<header>
    <div class="container">
        <h1 class="grid"><a href="<?php bloginfo('url');?>">My Blog is Working Great.</a></h1>
    </div>
</header>
<!-- End Header  -->
 
<!-- Navigation Bar Starts-->
<nav>
    <div class="navbar">
        <ul class="grid nav_bar">
            <?php wp_list_categories('title_li='); ?>
         </ul>
    </div>
</nav>
<!-- Navigation Bar Ends -->
<section class="container">

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:

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 );

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

<div id="container">
<div id="content">
<div id="entries">
<div id="post">...</div>

</div><!--Ending Entries-->
<?php get_sidebar(); ?>
</div><!--Ending content-->
</div><!--Ending container-->
<?php get_footer(); ?>

HTML5 index.php (Conversion)

<div id="container">
	<div id="content">
		<section id="entries">
			<article id="post">...</article>
		</section><!--end entries-->
		<?php get_sidebar(); ?>
	</div><!--end content-->
</div><!--end wrap-->
<?php get_footer(); ?>

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.

<section class="entries">
  <?php if (have_posts()) : while (have_posts()) : the_post();
  
<article class="post" id="post-<?php the_ID(); ?>">
    <aside class="post_image">
        <?php
        if ( has_post_thumbnail() ) { 
            the_post_thumbnail();
        } else { ?>
            <a href="<?php the_permalink() ?>"><img src="<?php bloginfo('template_directory');?>/images/noImage.gif" title="<?php the_title(); ?>" /></a>
        <?php }?>
    </aside>
    <section class="post_content">
        <h1><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_title(); ?></a></h1>
        <p><?php echo get_the_excerpt(); ?></p>
        <a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>" class="read_more ">Read More</a>
    </section>
    <section class="meta">
 
    <p> <?php the_category(',') ?></p>
 
    <p><?php the_tags(""); ?></p>
 
    </section>
</article>
  <?php endwhile; else: ?>
  <p>
    <?php _e('Sorry, no posts matched your criteria.'); ?>
  </p>
  <?php endif; ?>
 
  <?php posts_nav_link(' ⏼ ', __('« Newer Posts'), __('Older Posts »')); ?>
</section>

Step 3 Working on sidebar.php

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

sidebar.php in XHTML

<div id="sidebar">...</div>

Becomes the following after using <aside>.

sidebar.php in HTML5

<aside id="sidebar">...</aside<

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

<div id="footer">
<div id="foot_widgets">...</div>
<div id="copyright">...</div>
</div>
<?php wp_footer(); ?>
</body>
</html>

footer.php in HTML5

<footer id="footer">
<section id="foot_widgets">...</section>
<section id="foot_widgets">...</section>
<section id="foot_widgets">...</section>
<div id="copyright">...</div>
</footer>
<?php wp_footer(); ?>
</body>
</html>

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

<?php get_header(); ?>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>

<div class="container">
<div class="breadcrumbs"><?php the_breadcrumb(''); ?></div>
    <div class="content">
        <h1><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_title(); ?></a></h1>
 
        <div id="entry-content-single">
          <?php the_content('<p >Read More</p>'); ?>
        </div>
        <div class="meta"> Posted by:
          <?php the_author() ?>
          <?php edit_post_link(__('Edit This')); ?> 
 
          <p><?php the_tags(""); ?></p>
        </div>
        <div class="clearfix"></div>
    </div>
 
  <!-- End of post -->
</div></div>
 

<?php get_footer(); ?>

single.php in HTML5

<?php get_header(); ?>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>

<section class="content">
<div class="breadcrumbs"><?php the_breadcrumb(''); ?></div>
    <article class="box">
        <h1><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_title(); ?></a></h1>
 
        <section id="entry-content-single">
          <?php the_content('<p>Read More</p>'); ?>
        </section>
        <section class="meta"> Posted by:
          <?php the_author() ?>
          <?php edit_post_link(__('Edit This')); ?> 
 
          <p><?php the_tags(""); ?></p>
        </section>
        <div class="clearfix"></div>
    </article>
  <!-- end post -->
</section></div>

<?php get_footer(); ?>

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:

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

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!

HIGHLIGHTS OF THE DAY