Layers Framework: Title Banner

Dev Tutorials

Since: 1.0 Last Updated: for: 1.53 Time to Read: 4 minutes

The Title Banner element in Layers is included on static page templates such as the Blank Page, Blog and Shop. In consists of a single row spanning the screen width below the header, and a boxed container wrapping the breadcrumbs, page title and page excerpt.

title-container

partials/header-page-title.php

The title container is exclusively a partial, called from the template-blank.php, archives.php, archives-product.php and template-blog.php via WordPress core hook get_template_part()

core/helpers/template.php

The title container is a single nested element with boxed content and three simple elements: breadcrumbs, title, excerpt

Line 1:

The title-container  div provides the primary wrapper and is used primarily to support a full width background color or image. With Layers Pro active, the layers-parallax class and inline CSS is added to hook into the title container customizer controls (explained below under Control Dependencies)

Line 2:

The title container controls boxing of the title content to a default of 1040px to keep it in line with the header and page content, and also sets default padding (the space above and below the title content within the title-container row).  You will notice that title does not use the grid  class for placement of child elements, but can if you want to manipulate the contents using flexbox, or add other elements that are best served with flexbox. More on this under Customization.

Line 3:

The breadcrumbs are output by the layers_bread_crumbs() helper function which is housed in core/helpers/template.php

This query uses several conditions to check the post and page type, taxonomy, parent or category and is limited to the core queries in WordPress (post, page, taxonomy, category, tag) plus one custom query for handling products and WooCommerce product archives to ensure pathing back to the parent Shop page works correctly. These limitations mean the breadcrumbs cannot handle custom sorting of nested categories or multiple tags (they will output in alphabetical order) nor can it automatically detect and build breadcrumbs for custom hierarchies or archives built from custom fields.

Line 10:

The page title is generated and output via the layers_get_page_title() helper function, housed in core/helpers/template.php

This query uses several conditions to check the post and page type, taxonomy, parent or category and is limited to the core queries in WordPress (post, page, taxonomy, category, tag) plus one custom query for handling Search results and WooCommerce pages.

The title banner element will inherit the Header Color set in the Customizer under Site Settings → Colors in the free version of Layers, which is defined in your layers_customizer_defaults array via header-color . The title text is handled by the Layers invert class, which allows it to turn black or white automatically depending on the background color.

With Layers Pro active, the Title banner is affected by a new and separate set of customizer controls located under HeaderStyling, explained in detail in the Layers Pro Guide

It is important colors be set using customizer defaults. Never declare colors on these elements in a child theme  using  !important overrides that keep the user from customizing the controls.

The header-page-title.php partial contains several action hooks for adding custom elements or manipulating placement of elements (such as the breadcrumbs):

Additionally layers_get_page_title() can be used as a filter to modify the $title_array.

Actions

In most cases, action hooks such as those above are sufficient for adding elements, or changing the location of an element (for example, hiding the default breadcrumbs and outputting them below the title using  layers_after_title_heading instead). See the above hook links for usage examples, or additionally see how we add the title banner to Layers pages on this site using before_layers_builder_widgets.

This applies your customizations anywhere the hook exists in Layers or Layers products, and is the easiest to control via conditional statements.

Direct Modification

You can also add your own title banner partial to a custom template, or via an action hook which uses the same primary structure but hard-codes specific elements such as the Title name. We do that here in this Reference section. For example, say we create a custom title banner called jumbo-header-title.php and store it in our child theme functions.php. We want single posts to use this title instead of the default.

 

 

Template Overrides

The header-page-title.php partial can also be modified and copied into a child theme partial folder where more elaborate structural changes need to take place. See Child Theming: Custom Templates. This applies your customization anywhere the partial is called by Layers or Layers products.

Filtering

See layers_get_page_title() for filtering of the $title_array when you need to change how the queries work or add your own.