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

Peace

G

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

• https://codex.wordpress.org/images/9/96/wp-template-hierarchy.jpg
• http://www.chipbennett.net/themes/template-hierarchy/ 

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

style.css

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.

Peace

G