CHAPTER 4 • WordPress Theme Essentials 71
want your theme to be backward compatible, as I do to an extent, but still want to use nice
semantic HTML5 markup such as header, article, and footer, then you need to do
something about that.
Luckily, there are several solutions available. You could just wrap everything in div tags and
sort out the issues with older web browsers that way, but that will make your code a bit messy,
and this sort of misses the point of using the semantic markup in the first place. Another
solution is to use JavaScript to make sure that older versions of Internet Explorer understand
the code, which is what I’ve done. Remy Sharp created a bit of JavaScript code that you can
either host on your own server or, if you don’t mind an additional HTTP request, load from
Google, which I’ve done for convenience’s sake:
This is a (non-WordPress) conditional tag checking if the web browser is a version of Internet
Explorer prior to version 9. If it is, you’ll load the html5.js JavaScript from Google. You can
read more about Remy Sharp’s solution in his announcement blog post from 2009: http://
remysharp.com/2009/01/07/html5-enabling-script. Later in this chapter, you’ll
enqueue this script properly.
Now, you can break down this HTML file and make a WordPress theme out of it!
CREATING THE TEMPLATE FILES
You’ll cut up the HTML file into WordPress templates files, one by one, and by doing so, you’ll
get your theme. I’ll go through them all to give you a complete overview as to how a theme
can be constructed, although there are — as you’ll see later in this book — various ways to go
about these things. Keep it simple for now.
Before you get started, you’ll want to create a folder for the theme; in the example, I’m calling
it simple-blog (more on that when you create the style.css file), and every template file besides
style.css will be a PHP file in that folder.
THE THEME DECLARATION IN STYLE.CSS
You need a style.css file for your theme; there’s no avoiding it. At the top of this file, you have
your theme declaration, and below that, there is just a regular style sheet. You can import
other style sheets or keep all your styles in style.css — that’s up to you — but you need this file.
I won’t reprint the complete style sheet for the HTML design here, but the top of it looks like
this when moved into the simple-blog folder:
/*
Theme Name: Simple Blog
Theme URI: http://tdh.me/wordpress/simple-blog/