Documentation

An introduction to sidebars and widgets

Sidebars and Widgets go hand-in-hand because they generally require each other to make it work. Without sidebars, you cannot show any widgets, and without widgets, your sidebars will be empty on the front of your website.

Sidebars are determined by the active theme. Each theme will have a set of sidebars coded into the theme, but it’s important to know that sidebars are not the same across every theme. Let’s use the Twenty Sixteen theme for an example. When you activate this theme, you will see the following sidebars and widgets that are available:

twenty-sixteen-sidebars

Widgets are available by going to  Appearance > Widgets. The big panel on the left side shows all available widgets. The small panels on the right are the widgetized areas.

To add a widget: drag and drop the widget from the left panel to the right panel. You can see in the screenshot above that the “Sidebar” position currently has 4 widgets added.

To remove the widget: drag the widget back to the left panel. If you want to keep the widget setting for future use, drag it to the Inactive Widgets instead of the Available Widgets panel.

Inactive Widgets

Widgets will also be placed there if you switch to a different theme. Because this information is stored in the database, when switching back, your widgets will go back into their original sidebar positions.

If you are temporarily holding a widget in the inactive area and you want to retrieve the widget, drag the widget from Inactive Widgets panel instead of the Available Widgets panel to the sidebar position of choice.

Add Widgets Using the Customizer

There is another way to add widgets to your sidebars and website, but although it’s a small area to properly manage, the WordPress customizer has a setting to add widgets….although we recommend managing your widgets from the main Admin area.

  • Go to Appearance > Customize >> Widgets
    Widgets Customizer
  • Choose the sidebar position where you want to add or remove a widget.
  • Click on “Add a Widget” button.
    Customizer Add Widget button
  • A list of available widgets will appear, now select the desired widget.
  • Title your widget and perform any other settings (depends on the widget you are using).
  • Click “Save & Publish” at the top of your customizer

Dynamic Width Sidebars

Dynamic width sidebars/widgets is something we provide in our premium themes. Normally, a sidebar is a single block area that stays as a fixed area. So for example, if you have two (2) sidebars side-by-side and publish one (1) widget to the first sidebar, your second sidebar is going to show an empty space. That does not look very nice.

Dynamic width sidebars are different in a sense that if we take our example above, the single widget published will automatically resize itself to fill the empty sidebar position to the right of it, giving you one full width widget.

Let’s take another example where we have four(4) sidebars side-by-side and how they will be sized based on how many widgets are published. If we have a sidebar group called Top 1, Top 2, Top 3, and Top 4, then publish a single widget to each position…

  • Publish 1 widget = 100% width
  • Publish 2 widgets = 50% each
  • Publish 3 widgets = 33% each
  • Publish 4 widgets = 25% each


Error: Please enter a valid email address

Error: Invalid email

Error: Please enter your first name

Error: Please enter your last name

Error: Please enter a username

Error: Please enter a password

Error: Please confirm your password

Error: Password and password confirmation do not match