How To Use WordPress Widgets – Part 1
In part 1 of this tutorial series on using widgets, you will learn the basics of using and managing widgets in WordPress.
This tutorial covers:
- Widgets – The Basics
- Widget Management – Customizer
- Widget Accessibility Mode
- Additional Widget Tips
For additional tutorials, go here:
- WordPress Widgets Explained – Learn what WordPress widgets are, how widgets work, and how widgets can help you customize and extend the functionality of your website or blog.
- How To Use WordPress Widgets – Part 1 – (You are here)
- How To Use WordPress Widgets – Part 2 – Add commonly-used widgets to your sidebar, header, or footer.
- How To Use WordPress Widgets – Part 3 – Set up useful widgets to boost user engagement on your site.
Widgets – The Basics
To access the Widgets screen, log into your WordPress admin area, and select Appearance > Widgets from the main menu.
This will bring you to the Widgets screen.
Your Widgets screen will look different depending on the WordPress theme and editor you have installed.
Classic Widgets Screen
The Classic Widgets screen includes the following sections and features:
- Manage with Live Preview – Manage widgets in the Theme Customizer.
- Available Widgets – A list of all available widgets on your site.
- Inactive Widgets – A list of currently inactive widgets.
- Clear Inactive Widgets – Click this button to clear inactive widgets from this section.
- Active Widgets – Widget areas with active widgets that are currently displayed to your site’s visitors and users.
- Enable Accessibility Mode – Switch accessibility mode on or off. (For help with this section, see this tutorial: WordPress Widgets Explained)
The Available Widgets section displays all the widgets that you can use on your site.
On the right-hand side of the screen, you will find the “Active” widgets section. This section contains all the widget areas that your theme makes available for use on your site.
Adding widgets to this section will display these on your website.
Available widgets can be made Active or Inactive by dragging and dropping these into different areas of the Widgets screen.
Dragging widgets from the Available Widgets section to widget areas like your sidebar, footer, etc. become immediately active and display on your site.
Dragging widgets from the Available Widgets section to the Inactive Widgets section is useful if you have already configured a widget but no longer want to actively use it.
Inactive widgets retain their pre-configured settings, so instead of having to set it up again, simply drag a widget from the Inactive Widgets section back to the Active Widgets section and the widget will automatically become activate with all its previously configured settings preserved.
Manage Widgets Using Drag And Drop
You can easily add, reorder, and remove widgets in the Widgets screen using drag and drop.
You can drag and drop widgets from one widget area to another, drag widgets from the Active Widgets area to the Inactive Widgets area (and vice-versa), and reorder widgets in your theme’s widgetized areas.
Click To Add Widgets
In addition to using drag and drop, you can also click on a widget in the Available Widgets section, and it will expand with a list of available widget locations.
Select a widget area and click on the Add Widget button and your widget will be added to the selected location.
Reorder Widget Layout
Rearranging your widgets changes the order widgets display on your site.
For example, look at the screenshot below. In this image, we have set up the following widgets to display on our example site:
- Search form
- Video
- Calendar
Here’s the Sidebar widget in the active widgets area of the Widgets screen for the above site…
Now, let’s reorder these widgets in the Active widget area…
Here are the widgets reordered on the Sidebar widget area…
If you visit the front end of our example site, you will find that the sidebar layout has been instantly and automatically reconfigured to display widgets in the same order as they appear in the Widgets screen.
Test different widget layouts to see if you can improve your site’s user experience and conversions (e.g. adding a newsletter opt-in on your sidebar).
WordPress includes many default widgets, like:
- Search box
- Pages list
- Post categories
- Post tags
- Text
- RSS feeds
- Custom menus
- Latest posts
- Latest comments
- Calendar
- etc.
Widgets display in widgetized areas of your WordPress theme, like the sidebar, header, and footer.
Sometimes, adding plugins or themes to your site will install new widgets on your Widgets screen.
Block Widgets Screen
The block-based Widgets screen is extremely flexible, as it allows you to add any and every available block to your widgetized areas.
Using blocks in the Widgets screen works in the same way as using blocks to create Posts or Pages.
Simply select the widget area and add a block to it using the inserter tool or by dragging and dropping the block into position.
Your widget blocks will automatically display in the widget areas.
Use the blocks up and down arrows or drag the handles to reposition it in your widget area.
Remember to save when you are done configuring your widgets to update your settings.
Widget Management – Customizer
Most WordPress themes allow you to manage and customize your widgets via the Theme Customizer.
The Theme Customizer (Appearance > Customize) allows you to preview changes to your site without making these changes, so you can be sure that you like what you see before committing changes to your live website.
This feature is especially useful when it comes to configuring widgets. You can add, edit, and reorder widgets in live preview mode, and see what your changes will look like in real-time.
When you’re happy with your changes, click on the “Publish” button to instantly update and reflect your changes on your live site.
To edit widgets in the Theme Customizer, do the following:
Bring up the Theme Customizer screen (Appearance > Customize).
Click on the Widgets section of the Customizer menu (most themes should display this).
Select a widget area to edit (the widget areas you will see here depend on the theme you have currently installed).
With the widget area selected, click on the Add a Widget button to select an available widget.
Repeat this process to add more widgets to your selected widget area.
Once you have added all the widgets you’d like to display in your selected widget area, click on the Reorder button.
Use the navigation tools to reorder your widgets in your selected widgets area (e.g. up and down arrows or drag and drop).
Click Done when you have finished configuring your widgets area to lock your widgets in place.
If you’re happy with the layout of your widgets, click the Publish button to save and update your settings.
Click the ‘X’ icon to exit the Customizer and return to your Post screen.
Visit your live site and make sure that you’re happy with your changes.
If your widgets need further editing, return to the Customizer, and continue editing your widgets until you’re happy with the results.
We recommend installing your theme first before configuring widgets in areas like your site’s sidebar, header, footer, etc. Different WordPress Themes will display elements differently on your site.
Use the WordPress Customizer to preview all changes. This will save you from having to keep two browsers open while you edit your widget areas.
Widget Accessibility Mode
If you find that you are unable to add or reorder widgets in the Widgets screen using drag and drop or are editing your site using a mobile device, you can enable the accessibility mode.
Enabling Accessibility Mode allows you to work with widgets using Add and Edit buttons instead of drag-and-drop.
How To Enable Accessibility Mode For Widgets
To enable Accessibility Mode for widgets, log into your WordPress administration area and go to the Widgets screen (Appearance > Widgets).
Click on the Enable accessibility mode link near the top right-hand corner of the screen (WordPress Classic Editor).
With accessibility mode enabled, widgets in the Available Widgets and the Active Widgets areas will display an Add and Edit link, respectively.
You can navigate between elements of the screen using the Tab key on your keyboard and hit Enter to select an item.
After selecting an item, you can:
- Tab to a widget, hit Return on the Add link, and choose where you want to add it, or
- Tab to the widget area and hit Return on the Edit link.
A screen will open with options for customizing the widget’s settings, such as selecting a location to add the widget and drop-down menus to specify the position of the widget in the selected location (e.g. position 1, 2, 3, etc.).
Click the Save Widget button when done to add the widget to your active widget area or click the Cancel button to return to the previous screen.
You can also click on a widget’s Edit button to edit its settings.
You will be presented with options to edit the widget. Make your changes, then go to the bottom of the screen and click the Save Widget to update your settings and return to the Active Widgets screen or click the Delete button to remove that widget from the Active Widgets area.
Click on Disable accessibility mode to exit accessibility mode and restore the drag and drop function to the Widgets screen.
Keep this accessibility mode feature in mind if you experience any difficulties using the default system.
Additional Widget Tips
Here are some additional things to know about using widgets:
Add Visibility With Conditional Widgets
Conditional widgets let you choose whether to display a widget on a specific page or post.
When you make your widgets conditional, you can choose to include or exclude the widgets from widgetized areas like the sidebar, header, or footer on a post-by-post or page-by-page basis.
This allows you to make your sidebars, footer, header, etc. more relevant to each post or page on your site.
For example, you can add a map and directions widget to the sidebar of your ‘About’ or ‘Contact Us’ page and hide the widget on all your other posts or pages, freeing up widget space on your sidebar for more relevant content on other pages.
There are several conditional widget plugins you can choose from.
For example…
CONDITIONAL WIDGETS
Installing the Conditional Widgets plugin adds a Widget Display Control section to every widget, giving you complete control over the visibility of that widget on all areas of your site.
This function lets you specify whether to display or hide widgets on areas like your sidebar based on conditions you set for a particular category, page, etc.
Override Default Sidebar Widgets
Sometimes widgets will appear on your site’s sidebar but won’t show up in the active sidebar of your Widgets screen.
This happens with some themes. The theme will display its own default set of widgets in areas like the sidebar until you add widgets there.
For example, the site below shows widgets displayed in the sidebar.
If you look in the Widgets screen, however, you will see that no widgets have been added to the active widget area.
This theme, then, is probably using default widgets to ensure the sidebar is not left empty.
As soon as you add one or more widgets to an active widget area, the placeholder widgets will disappear and will be replaced with your newly added widgets.
If you don’t want any widgets to display in the sidebar, either choose a theme page template without a widgets section or just add a blank Text widget in the sidebar (i.e. a Text widget with nothing added in the content area).
Your theme’s default widgets will not display.
Congratulations! Now you know the basics of using WordPress widgets.
***
This is the end of part 1 of this tutorial series on using Widgets.
Now that you know the basics of using widgets, let’s configure some commonly used widgets on your site.
To view the next tutorial on our series on using WordPress widgets, click here: How To Use WordPress Widgets – Part 2
***
Updated: July 5th, 2024