Widget areas for the end-user

After installing the Theme Blvd Widget Areas from the WordPress plugin repository, the WordPress user to create an unlimited amount of custom sidebars and assign them to whichever pages they want throughout the site.

Note: This plugin is only required if your theme contains framework v2.2+ — If your theme has an earlier framework version, then this functionality is already built into your theme.

Basically, after you’ve created your Child theme, the WordPress user will then have a certain amount of widget area locations to pick from. Then, when they create a custom widget area, they can select which location it belongs to and then select its assignments (i.e. which page of the site it’ll show).

Here are some video tutorials that show how to use widget areas work from your WordPress admin panel. These videos are meant for the the beginner end-user. They may be helpful to provide to your client after you’ve set up the site for them.

Widget Area Locations

First, you need to understand the concept of widget area “locations” — The framework contains a default set of widgets areas, however we refer to them as “locations” because when combined with the Theme Blvd Widget Areas plugin, the user can create custom widget areas that can then be placed into these locations based on the current page.

So, we refer to these as locations because, while each one does contain a default registered widget area, they can also have additional user-created widget areas placed into them.

Let’s take a look the framework’s default widget area locations as you’ll see in Jump Start.

In the above diagram, you can see Jump Start‘s widget area locations. — The blue locations are what we refer to as “collapsible” locations, while the yellow are “fixed” locations. The distinction between the two is that while a fixed location will always show if set by the current sidebar layout, a collapsible widget area and its surrounding HTML markup will only show if it actually contains widgets.

In the old days I used to have people ask me in theme support quite often, “Why the heck is there a big empty space to the left of my content?” I’d reply, “Well, you have a sidebar there with no widgets in it.” — So, to help sort out the confusion there, a logged-in user will see the message shown in the above screenshot while working on their website. This forces them to either put widgets in the fixed sidebar, or correctly choose a sidebar layout that doesn’t include a sidebar there.

But none the less, fixed or collapsible, these are all widget area locations, and thus contain their own default widget area under Appearance > Widgets in the WordPress admin panel.

Note: Notice how all the default widget area locations contain the word “Location” in them. This will become relevant when the user starts creating custom widget areas with the Theme Blvd Widget Areas plugin, as described later in this article.

In looking at the default widget area setup for Jump Start, we can see that there are two fixed widget areas – Left Sidebar and Right Sidebar. How these are displayed is based on the current sidebar layout of the page being viewed on the website.

Here you can see the six sidebar layouts a user can select from to be assigned to the entire website or just an individual page or post.

When the user is at the Theme Options page, Appearance > Theme Options > Layout > Main, they can select a sidebar layout to be used across the entire website.

When a user is editing a specific post, they have a similar-looking option where they can override the site-wide sidebar layout for that particular post.

And then, because static pages work in conjunction with the Layout Builder, when a user is editing a page, they have a different way of selecting a sidebar layout.

It works in this way because if a user selects to show a custom layout there under “Template” (see above screenshot), then the sidebar layout option goes away, and relies the sidebar layout chosen from the custom layout in the Layout Builder.

Note: For information on customizing sidebar layouts programmatically, see the the article, Customizing Sidebar Layouts.

Custom Widget Areas

Now that you understand the concept of widget area locations and how they can be displayed, we can discuss how to setup custom widget areas to go in those locations for specific pages only.

After the user installs the Theme Blvd Widget Areas plugin, they’ll now have new admin page located at Appearance > Widget Areas where they can manage their custom widget areas.

The user can add a new custom widget area by clicking the “Add New” tab. They can enter in a name for the widget area, select its location, and then assign it certain pages of the website.

After creating custom widget areas, the WordPress user can actually place widgets in them in the normal way of going to Appearance > Widgets. When they do this, they’ll now see their custom widget areas underneath the widget area locations.

Floating Widget Areas

A widget area does not necessarily need to be applied to a specific location; this is referred to as a “floating” widget area.

So you may be wondering, “If the floating widget area isn’t assigned to a location, where will it show? What’s the point of it?”

When you allow a widget area to be “floating” you can then use it within dynamic elements within the theme like a set of columns, for example.

And so because floating widget areas do not override any default widget area locations, their “assignments” (i.e. what pages they show on) become irrelevant.