Layers 1.5 Developer Update Guide

In Layers 1.5, we introduced the following front-end updates:

  • New CSS Flexbox Grid for all elements using the Layers framework grids and spans
  • An updated HTML core structure that swaps section<span style="background-color: #f4f4f4;"> for div and vice versa for a better accessibility outline
  • Replacement of row  for grid

These changes potentially impact Child Theme custom templates and custom widgets using the old structure and classes and will manifest themselves as misaligned columns, dropped sidebars and other visual defects until your products are updated.

The changes you must make are separated into three major tasks: HTML outline, grid and masonry workarounds.

This guide will first explain the changes, then walk you through what to check. As always, we recommend looking over the changes on Github in detail to fully understand where you may need to edit your files as other additions were made to Layers such as enhanced button controls, link groups etc.

View Changes on Github

Plugin developers with a custom extension containing templates or custom widgets will need to check the following:

  • HTML structures in all front-facing templates and widgets
  • Custom CSS using framework classes
  • Widget structure, initialization and controls

Child Themers will need to check the following:

  • HTML structures in all front-facing templates
  • Custom CSS using framework classes
  • Customizer default array
  • Preset loading

The first section below explains the front-end changes and is followed by update outlines for CSS, Template HTML and Widgets to get you going.

Major changes to front-end templates, including widgets, include some HTML tag changes and implementation of the new grid classes.

HTML Outline

To ensure better SEO support for future iterations of Layers, we have converted some wrapper elements to sections or divs.






This helps the content of each of these sections outline better. Example:

  1. Document BODY
    1. SECTION (Off Canvas Sidebar)
      1. NAV (mobile nav)
    2.  SECTION (Top Bar)
      1.  NAV (Top Menu Left)
      2. NAV (Top Menu Right)
    3. Your Site Title (Site header)
      1.  NAV (header menu)
    4. Slide One Title
    5. Slide Two Title
    6. Slide Three Title
    7. Content Widget Title
      1. Content Widget Column title
      2. Content Widget Column title
      3. Content Widget Column title
    8. Post Widget Title
      1. Post One Title
      2. Post Two Title
      3. Post Three Title
    9. Contact Widget Title
    10. SECTION (Footer)
      1. Widget 1 Title
      2. Widget 2 Title
      3. Widget 3 Title
      4. NAV (footer menu)

As you can see, this is achieved without changes to the heading tags in our core widgets.  See Layers and SEO for more information on our approach to content-driven (and not code-driven) SEO.

The Row Wrapper

is used as a “clearfix” or “overflow: hidden” solution and is often seen in a class string with has stuff like
.container .push-bottom
etc. The .row  class has now been replaced with grid  and move it to it’s own div  as it has to wrap columns. Why? Because we need a wrapper to pull the columns 10px back into alignment with the container. More on that in a minute.

Reference: Line 176 of core/widgets/modules/content.php



Action you need to take: Replace all instances of row  with grid  and ensure any elements that use a span-  class such as <div class="span-8">  are wrappped in <div class="grid">

The Grid


Previously we used a manual grid system with widths and margins declared for each
class. In Layers 1.5,
is replaced by
which implements CSS Flexbox  to align and auto-clear columns, creating an unbreakable grid.
is declared on the
class like this:

Reference: framework.css line 193

In static templates,
has been removed from page templates and changed to
, and
changed to

Example rendered HTML in single.php



The new grid does away with
margin-right: 2%;
,  replaced by pixel values. Columns now use a combination of
. The new grid method does away with
counters for clearing margins and floats. In fact, our columns don’t even use
anymore, allowing for better mobile compatibility.



Flexbox Resources:


Calc() is used to calculate grid sizes less 20px.

Reference: framework.css line 206

We apply margin on both sides so that we don’t have to use
counters to clear it. This is now why
has -10px left and right margins.

As long as your markup implements the framework classes, you should not need any layout CSS. Be sure to audit your custom styling to remove overrides that may duplicate effort or affect the core grid logic.

Calc() Resources:

Responsive Changes

Columns per row differ between screen sizes.

Reference: responsive.css

Here is a breakdown of those variations:
Desktop: 6 per row
Tablet: 3 per row
Phone: 2 per row
Desktop: 4 per row
Tablet: 2 per row
Phone: 1 per row
Desktop: 3 per row
Tablet: 3 per row
Phone: 1 per row
Desktop: 2 per row
Tablet: 2 per row
Phone: 1 per row
Desktop: 2 per row
Tablet: 2 per row
Phone: 1 per row

Thereafter anything above
is 1 per row from Tablet down.


We have implemented a new inline text control for widget titles that moves the Aa text control from the design bar into the title field. This is to support heading tag select in Layers Pro. All headings will continue to default to H3 in Layers Core. You must ensure your widgets continue to work with Pro enabled, even if your theme or extension does not explicitly require Pro, therefore we ask that you not hard-code a heading type into your widgets markup. See Updating Widgets below for details on how to implement heading defaults and the new inline control.


If you have custom styling that affects grids, columns or margins, we recommend starting with complete removal, then updating your HTML to use the new framework styles. From there, if further tweaks are needed, re-add your customization one by one to test and edit classes to support

If you have yet to adjust styling for Layers 1.1.24 changes, you will also need to assess how flexbox has been implemented in the header. Specifically, ensure you do not have styles that attempt to override any of the default header or layout styling, and ensure Customizer defaults are used to set colors.

  1. View Template Changes and make necessary adjustments OR copy over the templates from the RC1 package and re-add your customizations. Now is also a good time to review your custom code to see how it might be implemented through action hooks instead of template copies.
  2. Ensure any custom jQuery is also debugged to correct selectors where needed.

Example: layers.framework.js


In most cases you shouldn’t need to over-qualify the class with the element selector and can safely remove it. Example,
becomes just

3. The new

wrapper is used in static templates such as template-blog.phparchive.php and archive-product.php.  Ensure
id="post-<?php the_ID(); ?>
is housed inside the
in your templates, not in the primary wrapper or loop wrapper.

4. Single.php has had the wrapper changed to a

and the
moved to the
wrapping just the post container.

The widgets have undergone significant changes besides HTML structure. For extensions containing widgets based on our core widgets, you may find it easier to re-modify the new widget code with your customization rather than update or change your version.

The below outlines the changes we have made so you understand how those changes impact your widgets:

With the creation of a
class, we need to tweak our HTML slightly to cater for it. The following example shows how the rendered HTML should look in a content widget or widget based on the content widget which uses repeater fields or columns.

  1. Change the primary widget wrapper containing the widget class from a
    to a
    and remove the
  2. Change the wrapper containing the widget columns from using the
    class to using the
  3. Add an additional wrapper around the columns
    <div class="grid"></div>



IMPORTANT: If your div includes grid  and row  in the same string your columns will not work as expected. Be sure to only use grid

Content Widget

Widget Defaults

You may now set a default
for your widget in the widget default array in the fonts section. Example:

Reference: core/widgets/modules/content.php line 55

Lines 105-109 have also been reduced to one line. Parsing has changed throughout the widgets, so be sure to go through the dif on github thoroughly  to see where to update this in other places.


Container Class

Add $this, $instance



$widget_container_class = apply_filters( 'layers_content_widget_container_class' , $widget_container_class, $this, $instance );

Reference:  lines 121-133

Remove row

Add Support for Darken Background


Reference line 135



Reference line 153



On line 6 above, the
at the end should match your defaults.

Reference line 159



On line 2 above, we use the
variable instead of hard-coding the heading tag to allow the heading select to work when Pro is active. This will default to your Widget default setting if Pro is not installed.


Reference line 170

Just below
<?php if ( ! empty( $widget[ 'columns' ] ) ) {

Reference line 173 – 271

Remove the entire section of code from
// Set total width
* Set Overlay CSS Classes
(line 161 – 244 of the old Content Widget) and replace with updated code block linked above *new code is in green) Review all changes between lines 271 and 357 for the widget content markup.

Remove text control from design bar

beginning on line 364 of old widget to line 417 of new where we remove
from the Components array:



Widget Form

Reference line 463

Elements with the
class that previously used paragraphs should be converted to divs:
<p class="layers-form-item">


<div class="layers-form-item">
Reference line 476

Add the new inline text control to the Widget Title (the first
div), then wrap the
input with a
<div class="layers-form-item">
. If your widget does not have a Widget Title and is not a slider, lines 462 – 505 should be added.

‘show_trash’ declaration in the design bar now requires an explicit TRUE flag

Advanced Padding and Margins

Review changes beginning on line 570 for additions to
to ensure padding and margin settings under Advanced are triggered and passed to the inline CSS properly.

Post Widget

Reference: core/widgets/modules/post.php

In addition to the above considerations, the Post Widget makes the following unique changes:

  • New function
    added beginning on line 141
  • Additional
    container class added on line 224
  • New grid on lines 258 – 368 replaces 247 – 351 of old widget.

Slider Widget

Reference: core/widgets/modules/slider.php

In addition to the above considerations outlined for the Content Widget, the Slider Widget makes the following unique changes:

‘autoheight_slides’  added to checkbox defaults on line 30


Please use Layers Messenger to report any major bugs on this release or to get help with updating your product. Please let us know which theme or extension you authored  so we can prioritize you faster.




Last Updated: