Drafting Applicator Version Zero

Branching out from HopScotch, I am reformulating mostly the front-end of the theme. Here comes Applicator – which I plan to submit to WordPress Free Themes.

The basic HTML skeleton are based on WordPress Twentyfifteen and HTML5 Boilerplate / Mobile. Basically the content of <head> are snippets from these awesome frameworks.

Currently, I am building components one by one – starting from the Masthead constructor.


  • header.php
  • functions.php
  • > functions
    • initial
      • setup.php
      • aside.php
      • hooks.php
    • markup
      • html-class.php
      • primary-navigation.php
    • style and scripts
      • styles.php
      • scripts.php

Components of Masthead Constructor

  • Web Product Name
  • Primary Menu

Accessibility Features

  • Accessible Names
  • Sub-Navigation Toggle Action

Generic Components

  • comp – Component
  • notice – Message
  • accessible_name – Labels for Accessibility
  • axn – Actions


  • State – the state of the UI


  • functions – Functions
  • js – JavaScripts
  • css – Stylesheets
  • img – Images


  • Always escape text strings (e.g., <?php _e( ‘Label’, ‘domain’ ); ?>)

JavaScript Detection and Class Names

If JavaScript is supported/enabled by the browser, there are two classes added in <html>:

  1. js
    Found in functions > setup.php. It replaces the default “no-js” class name that is added by default in <html>


  1. html5.js
    HTML5 Shiv – for IE 8 and below
    Located in js > html5.js
  2. plugins.js
    To avoid console errors in browsers without a console
    Located in js > plugins.js
  3. skip-link-focus-fix.js
    Makes “skip to content” link work correctly in IE9, Chrome, and Opera for better accessibility
    Located in js > skip-link-focus-fix.js
    Source: Twenty Fifteen WordPress Theme

CSS Layers

  1. HTML5 Boilerplate
    Coming straight from H5BP, these stylesheets modify the default browser stylesheet for the better. It is considered “default CSS on steroids”.
  2. Usability
    It adds usability to Active Elements and other elements that can be interacted with.
  3. Layout
    Anything visual concerning spacings and dimensions goes here.
  4. Typography
    Dealing with the CSS font properties. But if there’s a usability issue with the default font-size of an element, it goes to Usability.
  5. Color
    A touch of color for usability and visual design.


  1. Constructors
    1. Masthead
    2. Content
    3. Colophon
  2. Sub-Constructors
    1. Navigation
    2. Aside

Image Assets

  • Vector Assets
    located in img > vector-assets.php
    called from header.php
    Contains SVG markup of basic utility icons to enable color customization


HTML Class

Adds classes into <html>

  • html
    simply adds the class “html” so that CSS doesn’t need to use the element selector
  • masthead-aside–active / masthead-aside–inactive
    class if Masthead Aside is active or inactive
  • view–front / view–inner
    class if on the front page or inner page
  • browser–chrome / browser–gecko / browser–safari / browser–opera / browser–lynx / browser–ns4 / browser–ie / browser–unlisted
    class depending on the browser user agent
  • device–mobile / device–not-mobile
    based on wp_is_mobile()
  • theme–parent / theme–child
    class if using a parent or child theme


Leave a Reply

Your email address will not be published. Required fields are marked *