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>

<!-- 
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>

<?php get_sidebar(); ?>

</div>

</div>

<?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

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

Becomes the following after using <aside>.

sidebar.php in HTML5

1	`<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:

1	`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.

Popular Posts

Flickr

Sponsor

Labels

Convert Your WordPress Theme

Convert Your WordPress Theme to HTML5

Our Goals

Basic HTML5 Layout

Step 1 Converting header.php to HTML5

XHTML Theme header.php

HTML5 header.php (Conversion)

What About the Scripts and Stylesheets?

Considering the Old Browsers!

Step 2 Converting index.php to HTML5

XHTML index.php

HTML5 index.php (Conversion)

Complete Index.php in HTML5

Step 3 Working on sidebar.php

sidebar.php in XHTML

sidebar.php in HTML5

Step 4 The footer.php Edits

footer.php in XHTML

footer.php in HTML5

Step 5 Working on single.php

single.php in XHTML

single.php in HTML5

Step 6 Finally the style.css

Additional Notes

HTML5 Resources

About Unknown

0 comments:

Post a Comment

Popular Posts

Flickr

Sponsor

Labels

Convert Your WordPress Theme

Convert Your WordPress Theme to HTML5

Our Goals

Basic HTML5 Layout

Step 1 Converting header.php to HTML5

XHTML Theme header.php

HTML5 header.php (Conversion)

What About the Scripts and Stylesheets?

Considering the Old Browsers!

Step 2 Converting index.php to HTML5

XHTML index.php

HTML5 index.php (Conversion)

Complete Index.php in HTML5

Step 3 Working on sidebar.php

sidebar.php in XHTML

sidebar.php in HTML5

Step 4 The footer.php Edits

footer.php in XHTML

footer.php in HTML5

Step 5 Working on single.php

single.php in XHTML

single.php in HTML5

Step 6 Finally the style.css

Additional Notes

HTML5 Resources

About Unknown

RELATED POSTS

0 comments:

Post a Comment