Finding Your Way Around

Theme Structure

  • /
    • framework (The core, integrate all WordPress functionality here)
      • content (things we add to hooks on templates, usually conditional)
      • customizer (all code relating to Customizer-based options)
      • extensions (functionality that extends an otherwise basic theme)
      • functions (functions that make the theme work)
      • metaboxes (add new metabox functionality here)
      • post-types (add new post types and their taxonomies here)
      • shortcodes (all code relating to the shortcodes)
      • theme-options (those options outside of the Customizer interface)
      • widgets (all code for custom widgets is found here)
      • inti.php (the class that creates the theme)
    • library (our Sass files, compiled files and vendor files)
      • css (this is where compiled CSS ends up, no need to touch this… unless adding to it…)
      • fonts (any webfonts go here then get added from a CSS file added to the CSS directory)
      • js (we have both minimize and original JS files here… you might want to have this be a compiled directory for Coffeescript or something though)
      • scss (this is life, half of everything you do will happen here or in the child theme equivalent)
      • vendor (all 3rd party repos or bower packages get dumped here, you decide how any CSS or Sass gets makes it to the front end)
    • loops (where the long loops reside)
    • page-templates (where you can add custom templates for pages)
    • post-formats (WordPress post format templates)
    • template-parts (bits of template not part of WordPress)
    • functions.php (Turn on and off parts of the framework, and provide parameters while doing so)

TL,DR

Damn right. You really need to browse through each directory and each file to see what it’s for. You’ll find comments throughout explaining what’s what.

But let’s explain some key concepts…

LIBRARY is where all your CSS/JS goes and gets compiled to, then gets added to the theme from FRAMEWORK/EXTENSIONS/scripts.php and styles.php

FRAMEWORK is home to functionality that isn’t directly related to visible site templates. All the framework’s features are found here, organized again into sub-directories. Should one of these sub-systems require admin-side JS or CSS, this is always contained within the sub-system’s own directory.

In FRAMEWORK/CONTENT you’ll find bits and pieces of content… from menus, to breadcrumbs, to footer elements, to post meta that doesn’t have a specific set place in any template. Instead, these pieces of content are attached to the hooks that are found throughout the theme, allowing a developer to control where they appear on multiple templates from one single place.

Main Menu

The main menu is one of three declared by default in functions.php

By default it is a Foundation 6 Drop Down Menu.

 add_theme_support( 'inti-menus', array('dropdown-menu', 'off-canvas-menu', 'footer-menu') );

It is then declared and configured in FRAMEWORK/EXTENSIONS/menus.php

function inti_register_menus() {

  $menus = get_theme_support( 'inti-menus' );

  if ( !is_array( $menus[0] ) ) { return; }

  // This is the main menu visible on larger screens

  if ( in_array( 'dropdown-menu', $menus[0] ) ) {

    register_nav_menu('dropdown-menu', __( 'Main Desktop Menu', 'inti'));

  }

}

add_action('init', 'inti_register_menus'); 

function inti_get_dropdown_menu() {

  $defaults = wp_nav_menu(array(

    'container' => false, 'echo' => false, // Remove nav container

    'menu_class' => 'dropdown menu', // Adding custom nav class

    'items_wrap' => '%3$s',

    'theme_location' => 'dropdown-menu', // Where it's located in the theme

    'depth' => 5, // Limit the depth of the nav

    'fallback_cb' => false, // Fallback function (see below)

    'walker' => new Dropdown_Menu_Walker() )

  ); 

  return apply_filters('inti_filter_dropdown_menu', $defaults);

} 

You’ll then find it used in FRAMEWORK/CONTENT/content-header.php

Here it is placed into a Foundation 6 Top Bar

Off Canvas Menu

The Foundation 6 Off Canvas menu is used, by default, as the menu for small mobile devices. It too is declared in functions.php

By default it is a Foundation 6 Drill Down Menu.

 add_theme_support( 'inti-menus', array('dropdown-menu', 'off-canvas-menu', 'footer-menu') );

Site Banner

We call the header area where the logo or hero banner image is displayed, the “site banner”. Depending on where the main menu is hooked, it might appear below or above the main menu. There are a number of options for this that can be set in Customizer, and the code can be found and modified in one of the banner variations in TEMPLATE-PARTS/part-banner-*.php

Breadcrumbs

Breadcrumbs can be turned on and off in the theme options and their functionality controlled from FRAMEWORK/EXTENSIONS/breadcrumbs.php

Content

The layout of the content area of a page or a post can be set in two ways;

  1. Through Customizer, setting a default site-wide layout
  2. For each individual page when editing through the Dashboard

The available layouts, by default, are:

  • One Column (A single column occupying the 12 Foundation grid columns)
  • Two Columns, Left (A sidebar is displayed, the content to the left, the sidebar to the right)
  • Two Columns, Right (A sidebar is displayed, the content to the right, the sidebar to the left)
  • One Column, Thin (The content column is displayed at the same width as if there was a sidebar, centered)

You can see what measurements columns are given with relation to the Foundation Grid by examining the template files such as single.php, page.php, archive.php etc.

These will generally either display a loop as found in LOOPS/ or a post format as found in POST-FORMATS/

 

Sidebar

Three types of sidebar are declared by default in functions.php

add_theme_support('inti-sidebars', array('primary', 'frontpage', 'footer'));

The sidebars are then registered and configured in FRAMEWORK/EXTENSIONS/sidebars.php

Inti Foundation comes with two example widgets. These can be found and expanded upon in FRAMEWORK/WIDGETS