So in this part of the series, we’ll focus completely on the HTML which will become our WordPress starter theme over the next few articles. However, at this point, some of you may not be quite sure what exactly a “Starter Theme” is, so let me explain.
What Is a WordPress Starter Theme?
What You Will Need to Know
I expect you to have a solid grasp of the basic HTML5 semantic tags (header, nav, footer, section, article to name the important ones). You should know when to use these and when not to. If you want to read up on any of the HTML5 markup I mention, I’d recommend the Mozilla Developers Network’s documentation on HTML5. MDN have up-to-date documentation which is much easier to read than the W3C official drafts. Also, a good grasp of PHP is vital! It always confuses me (and quite frankly annoys me) when I read articles on building WordPress themes that say things like “you won’t need much PHP knowledge because WordPress has all the tags made for you”, or something along those lines. You need to understand variables, arrays, functions and conditional statements such as if/else and switch statements. Otherwise, you’ll never be able to spot when you’ve left out a semicolon or a curly brace or understand the core ideas necessary to write themes or plugins for that matter. Finally, I expect you have a blank WordPress installation ready to go either locally or on a testing server somewhere with FTP access. I won’t be covering the installation/configuring or using FTP. I will, however, explain how to debug and troubleshoot our theme as we go.
What You Won’t Need to Know
Well, you’re probably eager to get writing some markup so lets start, finally!
Writing the HTML
We’re going to keep our markup very lean, semantic, and comment it with WordPress in mind. We’ll start simple – get it working, and then improve upon each file and feature as we go. That way, you’ll understand the basics before being faced with anything more complex.
Also, by keeping the HTML simple and without any classes or ids, you can get your WordPress theme working before deciding on Bootstrap, Foundation, AngularJS, or whatever framework you want to use when you’re done. I won’t be forcing those choices upon you. Also, this way you can use this starter theme for ANY project with ANY framework of your choosing again and again.
So, let’s create a folder for our HTML. At this point you can give your theme/project a name. I’ve called my starter theme ‘Noesis’, which means ‘The perception of the mind’ or ‘The result of perception, learning and reasoning’. I thought it was appropriate, and I’ve always liked the word. I’ll be calling my folder ‘noesis-html’. Inside it, create two files: index.html and style.css. For now we’ll only be working with index.html, but we’ll link our stylesheet anyways.
Open index.html in your code editor and set up the document as follows:
<!DOCTYPE html> <html lang="en-GB"> <head> <title></title> </head> <body> </body> </html>
Now lets fill out the body with our semantic markup. Update it so it matches the following:
<!DOCTYPE html> <html lang="en-GB"> <head> <!-- SEO & META --> <title></title> <!-- STYLES --> </head> <body> <!-- CONTAINER --> <div> <!-- HEADER --> <header> <!-- PRIMARY MENU --> <nav></nav> </header> <!-- ROW --> <section> <!-- MAIN CONTENT --> <main> <article></article> </main> <!-- SIDEBAR --> <aside> </aside> </section><!-- END ROW --> <!-- FOOTER --> <footer> </footer> </div><!-- END CONTAINER --> </body> </html>
The layout we’ll be going for is your standard boxed layout with the header containing the navigation, then a row/section containing the main 2/3 content with articles inside that, a sidebar to the right and the footer obviously at the bottom. Nothing crazy. However, some of you may never have seen one of these tags before:
<main> the ‘main’ tag is valid HTML5. I’ve used it here to outline the main content area which will hold the body content. In ‘twentytwelve’ up to ‘twentyfourteen’ you’ll find a
<div id="main"> is used for this. Well there is a ‘main’ element so we’ll use it here to keep it unique. We could use a div or section but main is perfectly fine. It’ll be useful for the simple styling later also without forcing us to use class names. I’ve also used a simple div as a container/wrapper for the page and I generallt think of sections as ‘rows’ much like you;d find in Bootstrap or Foundation. We’ll be isolating the container div from any other divs later using
I wanted to leave the naming conventions completely up to you, so feel free to put an id (but never style with ids!) or classes on these elements for yourself – just make sure you completely understand it and can relate it back to my markup here. There’s not a whole lot left to go into this page now anyway.
Next, we’ll add some text to better see everything and link out ‘style.css’. Update the HTML as follows:
<!DOCTYPE html> <html lang="en-GB"> <head> <!-- SEO & META --> <title>Noesis: The Result of Perception, Learning, and Reasoning | A starter theme for ANY project</title> <!-- STYLES --> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <!-- CONTAINER --> <div> <!-- HEADER --> <header> <!-- SITE TITLE & TAGLINE --> <hgroup> <h1>NOESIS</h1> <h2>The Perception of the Mind</h2> </hgroup> <!-- PRIMARY MENU --> <nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Blog</a></li> </ul> </nav> </header> <!-- ROW --> <section> <!-- MAIN CONTENT --> <main> <!-- POSTS / ARTICLES --> <article><p>This is article 1 in the main content area.</p></article> <article><p>This is article 2 in the main content area.</p></article> <article><p>This is article 3 in the main content area.</p></article> </main> <!-- SIDEBAR --> <aside> <p>This is the sidebar</p> </aside> </section><!-- END ROW --> <!-- FOOTER --> <footer> <p>© 2014 - Luke Watts</p> </footer> </div><!-- END CONTAINER --> </body> </html>
And that’s pretty much it for the markup! Open it in your browser and you should see something like this:
So that’s it for part 1. I told you it’d be simple! But don’t worry – we’ll be stepping it up a notch in the next part when we start writing our first two WordPress theme files and get our starter theme to show up in WordPress. See you there!