WP theme building

Underscores step by step – Step 3, HTML layout

Before getting into the nitty gritty of applying CSS it’s worth taking some time to understand the HTML structure of the page in _s.

Conceptually I always think of an HTML page as a series of boxes each nested inside one another – each having a unique name with different types of boxes sharing characteristics.
In HTML terms there are three important ways of identifying and categorising these boxes:-

  • ID – a unique name used to identify a specific element on a page/document
  • Class – used to assign general properties to one or many elements on a page/document
  • Role –  ARIA “role” attribute helps make it easier for those using assisitive technology devices to navigate through the page

So for _s and most WP themes

  • Page container  <div id=”page” class=”hfeed site”>
    • Site header <header id=”masthead” class=”site-header” role=”banner”>
      • <hgroup>
      • navigation <nav class=”site-navigation main navigation” role=”navigation”>
    • Main content <div id=”main” class=”site-main”>
      • main area – primary <div id=”primary” class=”content-area”>
        • site content <div id=”content” class=”site-content” role=”main”>
      • widget area – secondary <div id=”secondary” class=”widget-area” role=”complimentary”>
      • widget are – tertiary <div id=”tertiary” class=”widget-area” role=”supplementary”>
    • Site footer <footer id=”colophon” class=”site-footer” role=”contentinfo”>
      • site info <div class=”site-info”>

Or to more easily visualise it https://themeshaper.files.wordpress.com/2012/10/html-visual1.png



Underscores step by step – Step 1, under the hood

So as discussed previously I’ve decided to build a new WordPress theme and instead of pulling the normal trick of simply creating a child theme I thought I’d take the plunge and develop my own from (almost) scratch using ‘_s’. To recap underscores (_s) is a popular starter theme maintained by Automattic (yeah the WordPress.com people) which keeps itself upto date with all the HTML5 standards and best practice.

This first article simply peers under the hood and looks at what you get with the zip file from underscores.me

Template structure

Unsurprisingly _s keeps itself in line with the WordPress template hierarchy and naming conventions and a quick run through the list of files that form _s will see a number of familiar names.

All the standard template files are all present:-

  • index.php – the main template file
  • archive.php – like index.php but displays content based on a set of criteria, e.g. date range, specific author, category, tag etc
  • page.php – for content out of chronological order, or put simply for pages that do not need all that blog metadata
  • content-single.php – for where single posts will be displayed away from the normal index.php – allowing them to be carry a different design
  • header.php – modular component that includes the header information for the templates
  • footer.php – modular component that includes the footer information for the templates
  • sidebar.php – modular component that includes the sidebar information for the templates
  • 404.php – the ever useful 404 page for when things don’t go to plan.

There are other files included but the above form the core of the theme in terms of crafting the layout.
_s does make use of a modular approach with a corresponding hierarchy which defines which templates get included.

There are a few diagrams available to summarise this hierarchy and show what gets included, two of the better ones being:-

The other key file to note is functions.php which unsurprisingly contain functions for the theme. Broadly this file proivides:-

  • support for WordPress features e.g. custom backgrounds, headers, post formats, etc
  • theme defaults
  • “containers” for code to be reused throughout the theme


The style.css file contains all the key style info for the template. IT’s well organised and structured into 12 sections:-

  1. Normalize – formally reset
  2. Typography
  3. Elements
  4. Forms
  5. Navigation
    • Links
    • Menus
  6. Accessibility
  7. Alignments
  8. Clearings
  9. Widgets
  10. Content
    • Posts and pages
      • Asides
      • Comments
  11. Infinite scroll
  12. Media
    • Captions
    • Galleries

This both makes it easy to follow and make updates as well as helping if SASS is the end goal.
The other great thing about _s is that it’s fully and clearly commented through out the various files which makes understanding where things go and how they relate a lot more straightforward.

Anyway there we have the key bits of the theme..next article, some key plugins for development.




WordPress Theme creation

So part of rekindling of my blogging love is the firm commitment to learn how to create my own themes.
Partly this is due to the frustration at the current crop of themes not quite nailing it, and seemingly growing number that seem to charge for anything above the basics. This of course is a sweeping generalisation that has little basis in any fact other than my irritation that I can’t do out of the box the cool things I want. Also wedded to this frustration is a deep down belief that I probably could do better – the hubris flight leaves soon.

Where to start…

Well a quick tour around google turned up a number of starter themes each based on a variety of different frameworks and approaches. The flexibility of WP as a platform leads to a bewildering number of options to achieve the desired end result. So based on three main factors I picked Underscores (_S), the three factors being:-

  • It came recommended from a number of the top hits in google
  • It was the basis of the WordPress 2015 theme – if they like it it must be good
  • Its designed to just be hacked and pulled around – as opposed to being the parent of a child theme
  • It comes with it’s own config utility on hhtp://underscores.me that allows it to be branded appropriately before download
  • Ok this is factor number 5 – It has one or two great tutorials to follow
    (just to note – I’m anything except a reliable narrator of my own blog)

Having picked a suitably unoriginal theme name I filled out the details on Underscores.me and downloaded my nice new theme.

Installing it was simple and straightforward (as you would expect from WP) and similarly enabling it was straight forward…
Then came the shock of realising just how bare a starter theme can be…

Yep it looked like it was designed in the 80’s – which if I had engaged my brain wouldn’t of been such a shock.

But this led to a little complication. Although I wanted to learn the zen of theme building I didn’t want my site to look like amateur hour while I crafted my skills.

Luckily there were, again, lots of options on the font of all modern wisdom (google)… the one I picked was  installing a nifty little plugin called ‘Theme Test Drive‘.
This enables you to run a separate theme as administrator while the general public see a different one. This gave me the flexibility to craft out a new them behind the scenes – learning my craft as I go, while keeping the external view of the site untouched. Also it had a very cool option of allowing a url option to point to the admin theme – allowing a sneak peak.


Anyway its a start and as develop the new theme I’ll be posting here to track what I’ve done, and how it’s worked out.