How to Add Custom Widget Areas to Layers

Dev Tutorials

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

This tutorial covers adding additional custom widget areas or “sidebars” to a Layers child theme or extension. If you are simply looking for a way to display specific widgets on specific pages or posts, you do not need custom sidebars and can control widget display using a plugin. See How can I show different widgets or sidebars on pages?

Custom sidebars in Layers work just like any other theme, using a combination of register_sidebar()  to define the sidebar, and get_sidebar() / dynamic_sidebar() to display it.

The following example will walk you through using these core functions in WordPress to create a widget area in a child theme that allows widgets to be added below a single post. This is useful for themes that focus on full-width posts with no left or right sidebar, but still want to offer dynamic content like related posts, twitter feeds or other widget data that can be configured separately from the global Footer widget area.

Reference: register_sidebar()

The following is added to your theme or plugin’s functions.php

Line 1: Create your custom function. You can simply replace mytheme  in mytheme_widgets_init  with a custom name.

Line 2-10: Using register_sidebar() , we set an array of options explained in the reference link above.

  • Your id must be unique, like the function name. You can simply replace mytheme  in this example with a custom name, or make up your own.
  • before_widget , after_widget , before_title  and after_title  should stick to the same values used elsewhere in Layers. Reference Layers sidebar registrations here. At the end of this tutorial we explain how to add custom classes here to take advantage of things like the Layers Grid.

Line 12: Hook your custom function to widgets_init

You should now see the sidebar in the Customizer when viewing a single post:

custom-sidebar

Reference: get_sidebar() / dynamic_sidebar()

Display in Core Templates

In our example, we want to add the widget area to single posts. Rather than copy over the templates and modify them with only one line of code, it is better to use a template hook. Here we use layers_after_single_content to inject our widget area between the end of the post and the comments container. We also add a little HTML using Layers framework styles to ensure our widget area gets formatted nicely.

Line 1: Create your custom function. You can name this anything you want as long as it is unique – using your theme or plugin name helps ensure this.

Line 3 / 7 : Wrap the widget area in some HTML so you can control the padding, margins and position more easily. In our example, this container will output inside the post’s <article> wrapper, so it doesn’t need any additional styling to set the width etc.  The kind of HTML wrappers an styling you may need in your implementation depends on where the code will be output, explained in a bit.

Line 10: Hook your custom function to layers_after_single_content

There are several hooks available throughout Layers, including core WordPress and WooCommerce hooks such as the_content and woocommerce_before_shop_loop.

View Layers Hooks, View WordPress Hooks, View WooCommerce Hooks or download the Simply Show Hooks plugin linked in the sidebar here to see all the hooks available in a given page or layout.

Display In Custom Templates

In custom templates, you can output your widget area by simply adding the following template tag where the widget area should render, set to your custom sidebar ID:

The following example shows a newsletter widget, provided with the Newsletter plugin, added to our custom widget area.

custom-sidebar-widget

In our example above, we created a single widget area that is good for Layers widgets or single widgets that will display full width in a vertical stack when more than one is added. But what if you wanted a horizontal sidebar where your users can place normal sidebar widgets and have them appear in columns next to one another?

One way is to use the Layers grid classes to save you the CSS work. Another is to add CSS to force each aside to a specific width.

Using the Layers Grid

Look over the Layers Grid specification to understand how the classes work together.

When setting up your sidebar markup, you can add the grid class to implement CSS flexbox:

Then in your sidebar registration, add your desired span class, such as span-4 , to the before_widget  markup. The framework styling will then automatically size the columns/widgets to sit in rows of 3:

custom-sidebar-widgets3

Implementing more than 2 columns in a “horizontal sidebar” is only recommended for use with widgets designed for sidebars such as WooCommerce or default WordPress widgets. Layers widgets are designed for use in the builder template, so may not work well in custom areas using a grid when implemented inside content zones.