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:
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.
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
- Choose the sidebar position where you want to add or remove a widget.
- Click on “Add a 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