Converting XHTML WordPress Theme To HTML5

HTML5

HTML5 is here! It's been around for awhile now and it's still isn't as widely used as I thought it would be by this time. In my earlier theme I didn't use HTML5 it's was just normal good old XHTML. There is nothing wrong with that but now it's 2011 I thought I'll make the change and move into the future of the web.

I am already a convert of CSS3 and love all the new features it has brought to the table so decided maybe it's about time that I start using HTML5. I like learning new skills so can't wait to get stuck into HTML5 and there is no better way of learning it than just using it.

Here at Paulund I use this blog everyday for reference of code snippets, directing people to tutorials I have done so I thought this is the ideal place to convert into HTML5.

Along with converting my website into the future it will be a nice tutorial to teach people what HTML5 can offer your website. So I am going to convert my existing theme into HTML5 and explain what I did as I go along.

Planning The Move

First off I need to understand why I would want to use HTML5.

One of the best reasons I can think of to use HTML5 is because of the semantic markup. My HTML is already quite easy to follow so using HTML5 should reduce the markup even more, making it very each to manage.

I just need to decide how I'm going to correctly use the new HTML5 tags of header, footer, nav, section and article. Now header, footer and nav are going to be quite straight forward I know what content is going in there so what about the others.

Converting WordPress Theme To HTML5

As this is a WordPress Theme I am going to convert the HTML in the existing theme and move it to HTML5.

I will only go through the main WordPress pages of header, footer, index and single.

The place to start will be at the Header.php.

XHTML 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>
</head>
<body>
<!-- Header Container -->
<div class="header">
	<div class="container_12">
		<h1 class="grid_6"><a href="<?php bloginfo('url');?>">Paulund</a></h1>
		<div class="grid_6 header_nav">
			<ul>
				<li><a href="<?php bloginfo('url');?>/contactform">Contact</a></li>
				<li><a href="<?php bloginfo('url');?>/playground">Playground</a></li>
				<li><a href="<?php bloginfo('url');?>">Home</a></li>
				
				
			</ul>
		</div>	
	</div>
</div>
<!-- End Header Container -->

<!-- Navigation Bar -->
<div class="nav">
	<div class="container_12">
		<ul class="grid_12 nav_bar">
			<?php wp_list_categories('title_li='); ?>
	     </ul>
	</div>
</div>
<!-- Navigation Bar -->
<div class="container_12">

HTML5 Header.php

<!doctype html>
<html>
<head>
</head>
<body>
<!-- Header Container -->
<header>
	<div class="container_12">
		<h1 class="grid_6"><a href="<?php bloginfo('url');?>">Paulund</a></h1>
		<section class="grid_6">
			<ul>
				<li><a href="<?php bloginfo('url');?>/contactform">Contact</a></li>
				<li><a href="<?php bloginfo('url');?>/playground">Playground</a></li>
				<li><a href="<?php bloginfo('url');?>">Home</a></li>
			</ul>
		</section>	
	</div>
</header>
<!-- End Header Container -->

<!-- Navigation Bar -->
<nav>
	<div class="container_12">
		<ul class="grid_12 nav_bar">
			<?php wp_list_categories('title_li='); ?>
	     </ul>
	</div>
</nav>
<!-- Navigation Bar -->
<section class="container_12">

It is very similar to the older version the difference is the doctype has changed to the simple HTML doctype and I have change some of the divs to use more semantic tags.

The div with class of header has now changed to the header tag the div with a class of nav is changed to a nav tag.

I have also included a section tag as the tag for the main content. This is always a questionable subject on whether this should be a section tag or a div tag. I wanted to use a section tag to define this is the main content section.

XHTML Index.php

<?php get_header(); ?>
<!-- content start -->

<div class="grid_8">
<div class="main">
  <?php if (have_posts()) : while (have_posts()) : the_post(); 
  if( $post->ID == $do_not_duplicate ) continue; update_post_caches($posts); ?>

<div class="post" id="post-<?php the_ID(); ?>">
  	<div class="postPic">
		<?php 
		if ( has_post_thumbnail() ) { // check if the post has a Post Thumbnail assigned to it.
  			the_post_thumbnail();
		} else { ?>
			<a href="<?php the_permalink() ?>"><img src="<?php bloginfo('template_directory');?>/images/noImage.gif" title="<?php the_title(); ?>" /></a>
		<?php }?>
	</div>
	<div class="postContent">
		<h3><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_title(); ?></a></h3>
		<p><?php echo get_the_excerpt(); ?></p>
		<a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>" class="read_more">Read More</a>
	</div>
	<div class="meta">
	
	<p><?php _e("In"); ?> <?php the_category(',') ?></p>
	
	<p><?php the_tags(""); ?></p>
	
	</div>
  </div>
  <?php endwhile; else: ?>
  <p>
    <?php _e('Sorry, no posts matched your criteria.'); ?>
  </p>
  <?php endif; ?>
  
  <?php posts_nav_link(' &#8212; ', __('&laquo; Newer Posts'), __('Older Posts &raquo;')); ?>
</div>
</div>
<?php get_footer(); ?>

HTML5 Index.php

<?php get_header(); ?>
<!-- content start -->
<div class="grid_8">
<section class="main">
  <?php if (have_posts()) : while (have_posts()) : the_post(); 
  if( $post->ID == $do_not_duplicate ) continue; update_post_caches($posts); ?>

<article class="post" id="post-<?php the_ID(); ?>">
  	<aside class="postPic">
		<?php 
		if ( has_post_thumbnail() ) { // check if the post has a Post Thumbnail assigned to it.
  			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="postContent">
		<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 clearfix">Read More</a>
	</section>
	<section class="meta">
	
	<p><?php _e("In"); ?> <?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(' &#8212; ', __('&laquo; Newer Posts'), __('Older Posts &raquo;')); ?>
</section>
</div>
<?php get_footer(); ?>

This is the file where most of the changes have taken place.

I have changed the post div to be an article this is so I can change each post title to a H1 which will hold more weight for SEO reasons.

The other divs inside the post have been changed to sections.

XHTML Single.php

<?php get_header(); ?>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<div class="grid_8">
<div class="main">  
<div class="breadcrumbs"><?php the_breadcrumb(''); ?></div>
  	<div class="content_box">	
	    <h2><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_title(); ?></a></h2>
	      	
	    <div id="entry-content-single">
	      <?php the_content('<p class="serif">Read the rest of this entry &raquo;</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 post -->
</div></div>

<!-- end posts-wrap -->
<?php get_footer(); ?>

HTML5 Single.php

<?php get_header(); ?>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<div class="grid_8">
<section class="main">  
<div class="breadcrumbs"><?php the_breadcrumb(''); ?></div>
  	<article class="content_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 class="serif">Read the rest of this entry &raquo;</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>

<!-- end posts-wrap -->
<?php get_footer(); ?>

The changes to the single.php have been similar to the index.php, I have put the content of the post inside a article tag so I can change the post title to have a H1. In HTML5 each section/article can have a header, footer and restart the headers so now you can have multiple h1 on the same page.

XHTML Footer.php

<?php get_sidebar(); ?>
</div>
<div class="clearfix"></div>
<!-- start footer -->
<div class="footer">
<div class="container_12">
	<div class="grid_12">			
			<div class="grid_6">
				<h3><a href="<?php bloginfo('url');?>/playground/">Playground</a></h3>
				<p><a href="<?php bloginfo('url');?>/playground/button_generator.html" title="CSS Button Generator">CSS Button Generator</a></p>
				<p>Easily create a CSS Button using new CSS3 features and grab the CSS code. Edit everything from the height, width, border, background and text to create your custom CSS Button.</p>
			</div>
			
			<div class="grid_4">
			<h3><a href="http://www.twitter.com/paulund_">Follow</a></h3>
			<ul>
				<li><a href="http://www.twitter.com/paulund_">Follow Me On Twitter</a></li>
				<li><a href="http://feeds.feedburner.com/Paulundcouk">Subscribe To The RSS Feed</a></li>
				<li><a href="http://feedburner.google.com/fb/a/mailverify?uri=Paulundcouk&amp;loc=en_UK">Subscribe With Email</a></li>
			</ul>
			</div>
								
	</div>
</div>
</div>
<?php wp_footer(); ?>
</body>
</html>

HTML5 Footer.php

<?php get_sidebar(); ?>
</section>

<!-- start footer -->
<footer>
	<div class="container_12">
		<div class="grid_12">			
				<section class="grid_6">
					<h3><a href="<?php bloginfo('url');?>/playground/">Playground</a></h3>
					<p><a href="<?php bloginfo('url');?>/playground/button_generator.html" title="CSS Button Generator">CSS Button Generator</a></p>
					<p>Easily create a CSS Button using new CSS3 features and grab the CSS code. Edit everything from the height, width, border, background and text to create your custom CSS Button.</p>
				</section>
				
				<section class="grid_4">
				<h3><a href="http://www.twitter.com/paulund_">Follow</a></h3>
				<ul>
					<li><a href="http://www.twitter.com/paulund_">Follow Me On Twitter</a></li>
					<li><a href="http://feeds.feedburner.com/Paulundcouk">Subscribe To The RSS Feed</a></li>
					<li><a href="http://feedburner.google.com/fb/a/mailverify?uri=Paulundcouk&amp;loc=en_UK">Subscribe With Email</a></li>
				</ul>
				</section>
									
		</div>
	</div>
</footer>
<?php wp_footer(); ?>
</body>
</html>

The footer has now changed from a div to use the footer tag which means this is the end of the document and will tell search engines this is where you will find other useful links.

HTML5 Changes

What do you feel about using HTML5?

Do you think the changes effects SEO Ranking?

Have you changed to HTML5 yet?

Advertise here

Comment