How to Convert Your WordPress Theme to HTML5

AD

HTML5 ushers in a new set of features and options for how we build websites and sooner than later it will have the full support of most browsers in use today. While XHTML will stick around for a long time, there is no avoiding the fact that you will have to update your WordPress theme eventually. With the help of JavaScript, HTML5 is safe to use for all modern browsers down to IE6. I should mention that if it is important to you to support users who may have JavaScript disabled (1.5% of total internet users), you may want to wait a while before making this change. However, there are a few tricks you can use to satisfy that 1.5% that I will cover at the end of this article.

WP theme convert to HTML5

This tutorial covers how to modify basic elements found in the Header, Loop and Footer of most WordPress themes. If you are using a framework such as Thesis or Thematic, you may find this process far more daunting, as these frameworks do not use a standard structure for building templates. As such, I will try to explain the role each new HTML tag plays when put into a WordPress format so that you can apply what you learn towards your own unique situation.

UNDERSTANDING THE OVERALL STRUCTURE

HTML5 is more than just the doctype at the beginning of your document. It includes several new elements we can use to make our layout more efficient and easier to style. The browser handles these elements in special ways to provide improved functionality, which eliminates the need for extra tags and offers the overall benefit of streamlined, semantic code.

Here is a look at how a simple WordPress theme would be structured using HTML5, prior to adding any template tags or custom classes.

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="utf-8">
   <title></title>
</head>
<body>
   <header role="banner"></header>
   <nav role="navigation"></nav>
<!--end header.php-->
<!--begin index.php-->
   <section id="content">
   <article role="main">
   <h1>Title</h1>
   <time datetime="YYYY-MM-DD"></time>
   <!--content-->
   </article>
   <nav></nav>
   <aside role="complementary"></aside>
   </section>
<!--end index.php-->
<!--begin footer.php-->
   <footer role="contentinfo">
      <small></small>
   </footer>
</body>
</html>

Each of these new tags will be explained as we go through the conversion, but if you want a head start, check out the HTML5 Spec to learn more.

Step 1

Open your header.php. A typical theme written in XHTML will start out more or less like this:

<!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" <?php language_attributes(); ?>>
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
Change it to this:
<!DOCTYPE html>
<!--[if IE 6]>
<html id="ie6" <?php language_attributes(); ?>>
<![endif]-->
<!--[if IE 7]>
<html id="ie7" <?php language_attributes(); ?>>
<![endif]-->
<!--[if IE 8]>
<html id="ie8" <?php language_attributes(); ?>>
<![endif]-->
<!--[if !(IE 6) | !(IE 7) | !(IE 8)  ]><!-->
<html <?php language_attributes(); ?>>
<!--<![endif]-->
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>" />

This new header includes our HTML5 doctype, some conditional tags for IE, and an updated meta charset tag.

For older browsers to render your new markup properly, you need to include an HTML shiv. The shiv is simply a JavaScript file that you include just like any other script. There are a few to choose from, but the most widely used are Modernizr and Remy Sharp’s HTML5 script. For this example, I will use Modernizr. This script should be placed above the <?php wp_head(); ?> tag:

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

A subtle enhancement with HTML5 is doing away with type="text/javascript" - the browser will now assume anything within a <script> tag is JavaScript unless otherwise specified. You may also remove type="text/css" from your <link> tags where they are pointing to a stylesheet.

Step 2

Move on to the beginning of the layout in your HTML body. You probably have something similar to this structure going on:

<div class="wrapper">
<div id="logo">
  <a href="<?php bloginfo('url'); ?>"><img src="<?php echo $logo; ?>" alt="Logo" /></a></div>
    <div id="navwrap">
            <ul class="<?php echo $menuClass; ?>">
                    <li...</li>
            </ul> <!-- end ul.nav -->
    </div><!-- #navwrap -->
 </div><!-- wrapper -->

Determine if your theme uses a wrapper around the entire layout to isolate your header elements correctly. The <header> tag can replace any div being used to wrap your header elements, or should otherwise be inserted before they begin.

For example, in this diagram the gray line represents the full-page container or wrapper. The elements outlined with a dotted line are the logo and nav bar. The <header> tag is used to wrap these elements, represented by the darker blue border.

wp theme convert

My example theme does not use a full-page wrapper, but does use one around the header elements, so I can simply change it to a <header> tag:

<header class="wrapper">
<div id="logo">
  <a href="<?php bloginfo('url'); ?>"><img src="<?php echo $logo; ?>" alt="Logo" /></a></div>
    <div id="navwrap">
            <ul class="<?php echo $menuClass; ?>">
                    <li...</li>
            </ul> <!-- end ul.nav -->
    </div><!-- #navwrap -->
 </header><!-- wrapper -->

I’ve retained the class for now. Later on, I can convert the “wrapper” class styles to “header” styles instead.

Once you have figured out where to place your <header>, convert your navigation div into a <nav>.

<header class="wrapper">
<div id="logo" role="banner">
  <a href="<?php bloginfo('url'); ?>"><img src="<?php echo $logo; ?>" alt="Logo" /></a></div>
    <nav id="navwrap" role="navigation">
            <ul class="<?php echo $menuClass; ?>">
                    <li...</li>
            </ul> <!-- end ul.nav -->
    </nav><!-- #navwrap -->
 </header><!-- wrapper -->

In the interest of keeping our code accessible, I’ve included some WAI-ARIAroles. You may have noticed these roles in my layout example at the beginning of this article. Roles offer the broadest range of browser support and accessibility functions for screen readers.

If your theme uses an H1 and H2 tag for displaying the Site Name and tagline, consider wrapping them up in an <hgroup> .

Step 3

Open up your index.php. If your theme uses a separate file for the loop, you will need to open that as well.
A typical theme’s index.php markup employs markup similar to this:

<div id="wrap">
<div class="breadcrumbs">...</div>
<div id="content">
<div id="entries">
<div id="post">...</div>
<div id="page-nav">...</div>
</div><!--end entries-->
<?php get_sidebar(); ?>
</div><!--end content-->
</div><!--end wrap-->
<?php get_footer(); ?>

tutorial

In cases where there are no breadcrumbs, you may just have one content wrapper, an entries block containing your loop within the “post” DIV, and the rest.
HTML5 gives us three primary elements for laying out content: section, article and aside. The section element is best used for containing an entire content area, whereas the article element is intended for self-contained or single compositions – in WordPress terms, that would be a post. The aside, naturally, is our sidebar. Here is a visual example of how this may work out:

development tutorial

In this way, the DIV containing the posts can be converted into a section, and the posts themselves converted into articles:

<div id="wrap">
<div class="breadcrumbs">...</div>
<div id="content">
<section id="entries">
<article id="post">...</article>
Use <nav> once again to convert the page navigation:
<nav id="page-nav">...</nav>
</section><!--end entries-->
<?php get_sidebar(); ?>
</div><!--end content-->
</div><!--end wrap-->
<?php get_footer(); ?>

Step 4

The loop is nearly identical across WordPress themes, with the exception of how the elements are arranged. The following markup begins each individual post in the loop by giving it a unique ID and applying the post classes.

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

When transformed into an article, it looks like this:

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

An H2 element usually follows this tag, accompanied by the date, author and possibly a category link. In addition to using the <header> tag to identify our post heading, HTML5 includes a special <time> element for rendering proper dates.
Begin by adding the <header> tag before the <h2>:

<header>
<h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>

Replace your date tag, which is usually “<?php echo get_the_date(); ?>” with the following HTML5 markup:

<time pubdate datetime="<?php the_time('c'); ?>"><?php printf( __('Posted on %s at %s.'), get_the_time('l, F jS, Y'), get_the_time()) ?></time>

This code returns a valid date using the format defined in WordPress’ “get_the_time” function, and outputs it based on the syntax inside the printf function. Simply put, it does more, better.

Don’t forget to close off this part with </header>.

The rest of your post can be left as-is, including any DIVs you are using to style the post content. You may optionally choose to wrap your post footer or meta content in an HTML5 <footer> element, but it is up to you.

Step 5

Open the sidebar.php. Replace your opening and closing sidebar DIV with the <aside> tag, so

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

becomes:

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

There, that was easy!

Step 6

Open footer.php. This one is almost as easy as the last. Your footer probably looks something like this:

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

Replace your outermost DIV with the<footer> tag:

<footer id="footer" role="contentinfo">
<div id="footer_widgets">...</div>
<div id="copyright">...</div>
</footer>

The ID was retained to ensure this footer element is treated uniquely in the event other footer elements were included in the post loop.

If your footer contains widgets like the example, replace the container DIV with a section:

<footer id="footer" role="contentinfo">
<section id="footer_widgets">...</section>
<div id="copyright">...</div>
</footer>

Step 7

Evaluate your stylesheets to determine where you need to update selectors or add additional styles to deal with the changes you have made.  For older browsers to treat the HTML5 elements fairly, a display:block attribute must be applied to them. Rather than create several separate styles, address this issue with one line instead and include this at the top of your style.css:

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

Going All-In

Flesh your theme out even further with HTML5 form elements and figures for handling captions and image descriptions where you may have a special gallery template. If audio or video is embedded into a template file, consider using HTML5 audio and video elements to replace Flash or object tags where possible. Some of these changes may require additional scripts or changes to your theme functions, so be diligent in your research before updating them.

Check out a few HTML5 WordPress themes to see how the new elements are used. Some good ones to start with are:

TwentyEleven
Yoko
Spectacular

Here are a few recommended resources to help you master HTML5:

Share the Love:


Advertisement

Join the 98,750+ Subscribers

Subscribe and grab Free Ebook! Photoshop Crash Course!

We promise not to spam!

Further Related Readings

Vail

Vail from DesignArticleWriters.com is a designer and tech blogger who enjoys writing everything and anything about design and tech. She love to recommend people who provide awesome stock photography to design community around the globe.
All Articles by
One Comment on “How to Convert Your WordPress Theme to HTML5
  1. vail says:

    The code in Step 1 needs to be broken into two chunks, the second after “Change it to this.”

    :)

Comments are closed.

Copyrights © 2014 - Designzzz. All Rights Reserved