Layers Framework: Header

Layers Framework

Since: 1.5 Last Updated: for: 1.5.3 Time to Read: 4 minutes

The Header of the core Layers theme contains the Logo, Site Name, Description, primary menus, StoreKit cart and responsive sidebar toggle.

For detailed information on functions, hooks and classes described here, follow the linked elements which will open in a new tab.

header

 

Layers uses a basic body wrapper containing the core WordPress body_class() function, which outputs dynamically generated list of default classes including the page ID, template type and content type.

The header.php file contains the code that loads first on every page of your site and is responsible for rendering the opening tags for the document body and site wrappers, the
off-canvas
sidebar, the Top Bar, and the Header bar which contains your logo and header menus.

before-header-inner

The resulting HTML varies a little depending on the options you have chosen in Layers, explained in more detail under Control Dependencies. The following should give you a good idea of the basic structure of the header and where the included partials come into play.

wrapper
invert
content-small
wrapper-site
header-site
container
wrapper-content
content-main

partials/header-standard.php

partials/header-centered.php

partials/header-logo.php

The first div  of the header-secondary   will receive the container  CSS class depending on the user’s option choice in HEADER → STYLING under Layout, via the header-width   control called with layers_get_theme_mod()

 Boxing

The .container  class controls the boxing of elements within the header (and elsewhere)

The only takeaway you need from this is if you plan to change the box width in a child theme, you must adjust all instances where this max-width and its dependencies are declared:
The extra 100 pixels added to the wrapper-site account for margins, so if you up your box width to 1260, for example, your wrapper-site container should be 1360 (or 1260, and reduce the rest by 100 to 1160)

 

 

Hooks

For a detailed overview of the WordPress API and all available filters and actions (aka “hooks”), see http://codex.wordpress.org/Plugin_API

Hooks allow you to inject custom functions or HTML into a specific location in the theme without modifying the template. The following provide reference information for each hook found in this part of Layers:

The Top Bar calls two menus using the wp_nav_menu function, one for each registered top menu location:
layers_secondary_left
(Top Menu Left) and
layers_secondary_right
(Top Menu Right)

Menu Defaults

By default, no depth argument is set and the
header-secondary
has an
overflow
rule of hidden.

You may unregister any menu and re-register it using the same location id, to add your own arguments for things like walker classes or sub-menus. You must also include a CSS reset on the
 overflow
for the
header-secondary
and child elements to ensure the drop-downs are not cut off.

Menu CSS Classes

This example shows the final rendered markup and associated CSS classes used for styling:

Lines 1 and 8:

The
pull-left
and
pull-right
framework classes are used in the class argument of wp_nav_menu to float the menu left or right.

Lines 2 and 9:

The opening
ul
of each menu receives an ID, aka menu slug, based on the title you have the menu. This is combined with the following framework classes:

nav : sets link alignment, used on every nav menu.

nav-horizontal : sets position, used on all horizontal menus.

Lines 3 and 10:

The
li
elements are given a unique ID by WordPress, and a set of default WordPress menu classes.

Lines 4 and 11:

The link elements are not given any special classes, but are selected via
nav-horizontal li a
to set font and color declarations.

<i>
and
<span>
elements are used specifically to display FontAwesome icons. Refer to the FontAwesome reference for classes and usage when extending or using FontAwesome in your themes and plugins.

See How to Customize WordPress Menu Links Color or Style for advanced topics on adding custom classes to the li in the menus.

To add support for drop-downs, use the following reset: