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

Peace

G

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

 

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…
galiquis_naked

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.

http://galiquis.com/?theme=galiquis

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.

Peace

G

Colour pallet

One of my biggest problems is chosing colour schemes. Luckily Steph provides an invaluable service when it comes to decorating the house but when building websites I’ve always been on my own.

But…finally I’ve found an awesome site that takes away the pain:-

http://paletton.com/

There are an array of very cool features but the one I love is that the url changes with the options you select. So once you’ve hit on the perfect eye-catching colour combination it can quickly be shared just by using the web address:-

http://paletton.com/#uid=1000u0kllllaFw0g0qFqFg0w0aF

Peace

G

Somewhere along the way…

I got out of the blogging habit.

There was a time where I’d be posting daily on various subjects and it seems life (that real life away from the keyboard) just got in the way. I blame Isaac being born – if he wasn’t so entertaining I’d be far more productive.

So time to get things a little more on track…

Having now crafted a new blog for Steph – www.touchtreatment.co.uk and got back into a bit of drawing for www.satiricalblog.com I’m in the mood to both spruce things up on here and migrate satirical across to WP (its on blogger at the moment).

Wrapped up in these changes are a few side projects before the intensity of the Pysc degree stars back up, namely:-

  • Learn how to build themes from scratch – well almost from scatch
  • Learn how to code interactive graphics in HTML5 – mainly for a few ideas I have for SatBlog

This is onto of the work I need to do on Number38.org and a few things for Isaac.

Busy times!

Peace

G