How To Use Widgets In WordPress - Part 1

How To Use WordPress Widgets – Part 1

WordPress Widgets screen.

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:

For additional tutorials, go here:

Widgets – The Basics

To access the Widgets screen, log into your WordPress admin area, and select Appearance > Widgets from the main menu.

WordPress Menu: Appearance - Widgets
Click on Appearance – Widgets to go to the Widgets section of your site.

This will bring you to the Widgets screen.

info

Your Widgets screen will look different depending on the WordPress theme and editor you have installed.

Classic Widgets Screen

WordPress Classic Widgets screen.
Classic Widgets screen.

The Classic Widgets screen includes the following sections and features:

  1. Manage with Live Preview – Manage widgets in the Theme Customizer.
  2. Available Widgets – A list of all available widgets on your site.
  3. Inactive Widgets – A list of currently inactive widgets.
  4. Clear Inactive Widgets – Click this button to clear inactive widgets from this section.
  5. Active Widgets – Widget areas with active widgets that are currently displayed to your site’s visitors and users.
  6. Enable Accessibility Mode – Switch accessibility mode on or off. (For help with this section, see this tutorial: WordPress Widgets Explained)
Widgets screen.
Widgets screen.

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.

Widgets - Using drag and drop.
Manage widgets 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.

Widgets area - rearranging widgets using drag and drop.
Use drag and drop to rearrange your widgets.

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.

Widget screen - Add widget from Available Widgets section.
Click to add a widget from the Available Widgets section.

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:

  1. Search form
  2. Video
  3. Calendar
Sample post with widgets added to sidebar.
You can order the layout of your sidebar widgets inside the Widgets screen.

Here’s the Sidebar widget in the active widgets area of the Widgets screen for the above site…

WordPRess Widgets screen - Sidebar widget configuration.
Widgets display on your site in the same order that you configure them in your active widget areas.

Now, let’s reorder these widgets in the Active widget area…

Widgets screen - Reordering widgets using drag and drop.
Use drag and drop to reorder widgets.

Here are the widgets reordered on the Sidebar widget area…

Reordered widgets.
Reordered widgets.

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.

Dynamically updated sidebar widget layout.
This sidebar layout has dynamically updated with our reordered widgets.

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).

Info

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.

Composite image: Widget area and frontend widget display.
WordPress comes with many pre-installed widgets.

Sometimes, adding plugins or themes to your site will install new widgets on your Widgets screen.

WordPress Widgets screen - new widgets added by plugins.
Installing plugins can add new widgets to your Widgets screen.

Block Widgets Screen

WordPress Block 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.

Block editor widgets screen - Drag and drop widgets.
Drag and drop widgets into widget areas.

Your widget blocks will automatically display in the widget areas.

Widget added to widget area using drag and drop.
Widget added to widget area using drag and drop.

Use the blocks up and down arrows or drag the handles to reposition it in your widget area.

Block Widgets screen.
You can also reorder widgets in widget areas using drag handles or clicking on up and down arrows.

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.

Theme Customizer - Configure widgets in live preview mode.
The Theme customizer lets you configure widgets in live preview mode without saving your changes.

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).

WordPress Theme Customizer - Widgets.
Click on the Widgets section of your Theme Customizer.

Select a widget area to edit (the widget areas you will see here depend on the theme you have currently installed).

WordPress Theme Customizer: Widgets - Header
Select a Widgets area.

With the widget area selected, click on the Add a Widget button to select an available widget.

WordPress Theme Customizer: Widgets - Add a Widget button.
Click on the Add a Widget button to add widgets to your Widgets area.

Repeat this process to add more widgets to your selected widget area.

WordPress Theme Customizer: Widgets - Add a Widget button.
Repeat this process to keep adding widgets.

Once you have added all the widgets you’d like to display in your selected widget area, click on the Reorder button.

WordPress Theme Customizer: Widgets - Reorder widgets button.
Click the reorder button to reorder your widgets.

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.

WordPress Theme Customizer: Widgets - Done link.
Finished reordering your widgets? Then click Done.

If you’re happy with the layout of your widgets, click the Publish button to save and update your settings.

WordPress Theme Customizer: Widgets - Publish button.
Click the Publish button to make your changes live.

Click the ‘X’ icon to exit the Customizer and return to your Post screen.

WordPress Theme Customizer: Widgets - Exit Customizer.
Click the X to exit the Customizer.

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.

Tip

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.

Mobile device with Widgets screen - Enable accessibility mode.
Enable accessibility mode in the Widgets screen.

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).

WordPress Widgets screen - Enable accessibility mode.
Enable accessibility mode.

With accessibility mode enabled, widgets in the Available Widgets and the Active Widgets areas will display an Add and Edit link, respectively.

WordPress Widgets screen - Accessibility mode enabled.
Accessibility mode enabled.

You can navigate between elements of the screen using the Tab key on your keyboard and hit Enter to select an item.

Navigate the Widgets screen using the Tab and Return keys.
Navigate the Widgets screen using the Tab and Return keys.

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.
Widgets screen with Accessibility mode enabled - Add button.
Select an active widget area, then click on a Widget’s Add link in the Available Widgets section to add the widget.

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.).

WordPress Widgets screen - Accessibility mode options.
Use the accessibility mode options to place your widgets into widgets areas and select their position.

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.

Save Widget button.
Save your settings after selecting the sidebar and position of your widget.

You can also click on a widget’s Edit button to edit its settings.

WordPress Widgets screen - Accessbility mode enabled - Edit button.
Click on the Edit button to edit a selected widget.

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.

Widgets screen: Accessibility mode - Widget Pages.
Use Widget Pages to edit widget settings.

Click on Disable accessibility mode to exit accessibility mode and restore the drag and drop function to the Widgets screen.

WordPress Widgets screen - Disable accessibility mode.
Disable accessibility mode.

Keep this accessibility mode feature in mind if you experience any difficulties using the default system.

WordPress Widgets screen - Accessibility mode.
Use accessibility mode if you experience difficulties dragging and dropping widgets in the Widgets screen.

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

Conditional Widgets plugin.
Conditional Widgets plugin.

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.

Conditional Widgets - Widget Display Control section.
The Conditional Widgets plugin lets you choose exactly where to display or hide widgets on 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.

WordPress Twenty Ten theme.
This theme displays sidebar widgets…

If you look in the Widgets screen, however, you will see that no widgets have been added to the active widget area.

Twenty Ten theme Widget Areas - No widgets added.
But no widgets have been added to Widget areas.

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.

tip

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).

Blank text widget.
Add a blank text widget.

Your theme’s default widgets will not display.

Twenty Ten theme with no widgets displayed in sidebar.
No widgets displayed in the sidebar.

Congratulations! Now you know the basics of using WordPress widgets.

WordPress Widgets screen.
Learn about the basics of using widgets in WordPress.

***

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

***

Print Friendly, PDF & Email

Terms Of Use | Privacy Policy

Scroll to Top