How to Build a WordPress Starter Theme: Part 1 – Writing the HTML

3

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?

A Starter Theme is about as barebones of a theme as you can have in WordPress. They’re also sometimes called Naked Themes or Boilerplate Themes. Starter themes have the essential elements of a theme and not much else. Many theme authors use starter themes as a starting point for their projects as they can have varying levels of functionality and features built in depending on which one you use. Some will have no styling (Chris Coyiers Blank Theme on DigWP), some will be styled and have JavaScript files (like the popular Underscores by ThemeShaper). Some will have widgets and sidebars, some won’t, and the differences keep on going.

The starter theme we will be making will have one right hand sidebar, one menu in the header and very few styles and no Javascript (although you’ll easily be able to add scripts and styles after completing this series). The styles we’ll apply will merely be to make sure our markup is correct and doing what we expect, but feel free to get creative. So now that you know what a starter theme is I just want to quickly mention a few assumptions I’m making about you the reader.

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

What you won’t need is advanced CSS skills for this series, although it would be preferable. There are far too many bad theme authors out there making bloated themes by simply sticking in Bootstrap and then overwriting everything 10 times over in the following stylesheets! Don’t do it. It’s lazy. Anyways… You also won’t need to know any Object-Oriented PHP. Another gripe of mine is tutorials for WordPress theme/plugin development where the author uses OOP without warning readers or viewers from the start. Half way in you’re doing fine and they start writing classes and methods out of the blue and BAM, they’ve lost a portion of the audience who aren’t at that level yet but would have kept up just fine with procedural PHP. The great thing about WordPress is you can work with it even if you’re a beginner or moderate level PHP user. Tutorials should keep it simple unless you’re specifically demonstrating OOP or more advanced WordPress concepts (like the WP Database object). We also won’t be using any JavaScript or jQuery, so you won’t need “mad JS skillz yo!”

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 body div:first-child.

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>&copy; 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:

How to Build a WordPress Starter Theme - Result of Part 1

In Summary

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!

Share.

About Author

Founder and Lead Developer at Affinity4.ie, a web development agency in Galway, Ireland. Develops mosty with WordPress, Laravel, PHP, MySQL, Git, Github, Sass and Compass.

Leave A Reply