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.

underscores_templates
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

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

 

Leave a Reply