How To Use And Configure WordPress Widgets

Learn how to use and configure WordPress widgets on your sidebar. This tutorial explains the basic concepts of using Widgets to extend the functionality of your website and provides an overview of the Widgets area.

Adding And Configuring WordPress Widgets In Your Sidebar MenuAs we explain in this post, one of the many benefits of choosing the WordPress CMS platform is that you can easily add content, expand your website’s functionality, or reconfigure the layout of your site with no web coding skills required.

WordPress lets you quickly and easily add, remove, and rearrange various blocks of content from your website’s sidebar (and header and footer sections, depending on what theme you have installed) using widgets.

Once you know how to use widgets, you can easily add things to your site’s sidebar area (plus headers and footers and other areas, depending on the theme) like:

  • nested list of pages
  • categories
  • archives
  • menus
  • links to resources
  • posts that you want to promote
  • user comments
  • clickable ad banners
  • quotations
  • poll results
  • RSS content
  • opt-in form
  • images
  • social media sharing buttons
  • add widgets from external sites (e.g. Facebook friends)
  • administrative forms (e.g. login, register, etc.)

WordPress widgets make managing and using WordPress easier!

(Widgets make managing and using WordPress easier)

To learn more about what WordPress widgets are, how they work and how using widgets can help you expand your site’s capabilities, go here:

In this tutorial we are going to show you how to use and configure various frequently-used WordPress widgets.

How To Use WordPress Widgets

The Basics

Before we explain how to configure widgets, it helps to first cover some of the basic concepts about how to use widgets:

Most WordPress Themes Support Widgetized Layouts

Many WordPress themes support widgets and provide built-in areas in the theme’s layout where widgets can be used, such as the sidebar, header area, and the footer area. Depending on the theme installed on your site, widgets can also display in the content area …

(Many WordPress themes offer users a number of widget sections)

(Many themes provide multiple widget-enabled sections)

These widget-ready sections correspond to a feature inside the Widget management screen called “Widget Areas” …

Widget Areas

(Widget Areas)

Widgets Screen

The Widgets panel displays a list of all the widgets that are available.

On the right-hand side of the screen, you can see all “active” widgets …

Activate or deactivate widgets using drag-and-drop

(Activate or deactivate widgets by dragging & dropping)

Available widgets can be activated or deactivated using drag-and-drop.

Widgets dragged from the Available Widgets section to widget areas like your sidebar, footer, etc. become immediately active and can be used for their purpose.

In addition, your Widgets panel includes an Inactive Widgets section that lets you remove widgets that you no longer want actively displayed on your site. Inactive widgets retain their settings.

Reorganize Widgets Using Drag & Drop

You can easily insert, activate, deactivate, rearrange and delete things using widgets by dragging and dropping items in the Widgets section …

Rearrange widgets using drag-and-drop

(Rearrange widgets using drag & drop)

You can also easily reorder the order and layout of your site’s widget-enabled layout with drag and drop ease.

For example, in the image below, the widgets have already been configured to display things like:

  1. A subscription form,
  2. A click for support banner, and
  3. A ‘click to call’ function from a widgetized plugin (i.e. a plugin with an accompanying widget) …

Widgets control the order certain features on your site appear

(Widgets control the order certain features on your site display)

If you look inside this site’s Widget area, you will see that these features correspond to the order of widgets inside the active widget screen …

Rearrange your site's widgets using drag & drop

Let’s now reorganize the above widgets in the Widget Area using drag-and-drop …

Drag and drop widgets in the widget area to rearrange their order

(Drag and drop widgets in the widget area to rearrange their order)

The widget features have now been reorganized in your sidebar …

Rearrange widgets using drag-and-drop

This instantly reorganizes the order of items in the sidebar.

Rearranging sidebar elements using widgets can improve your site’s user experience.

Note in the screenshot below that the ‘click to call’ feature (3) is now at the top of the sidebar area, and the ‘contact us’ banner (2) can now be found above the newsletter sign-up form (1) …

Reorganize sidebar elements with widgets to improve your site's user experience

(Rearranging sidebar layout using widgets can help to improve your site’s visitor experience)

Removing Widgets From Your WordPress Blog Sidebar Navigation Menu

Deleting widgets from your WordPress sidebar is really easy.

For example, let’s delete the Search widget from the sidebar navigation area …

Search widget

(Search widget)

To delete a widget from an active Widget area, either open up the widget and click the Delete link …

How to delete a widget

(Deleting a WP widget)

Or just drag the widget out of the Active Widgets section and drop it into the Inactive Widgets section …

How to remove your widgets

(Removing widgets)

Repeat this process for all widgets you want to remove from the sidebar menu. You can always reactivate widgets by moving them back into the active widgets area.

Widget Settings

Most widgets provide various settings that allow you to further customize them. This includes making certain types of information hidden to your site visitors but visible to registered users, displaying additional forms, fields, or information, specifying sizes of sidebar images, videos, etc.

Clicking on the little triangle in the corner of a widget expands the item and displays the widget’s settings …

Toggle to expand/collapse widget settings

(Toggling expands/collapse widget settings)

When the widget expands, you can change and save your settings, click Delete to remove the widget from the “Active Widgets” section, close the widget, or click on the triangle to collapse the widget …

Widget settings

(Widget settings)


Some widgets provide users with little to no customization, or they may only allow you to add an optional title …

Some widgets give you little to no configuration options

(Some widgets offer little to no configuration options)

Widget Customizer Section

Depending on the WordPress theme you have installed on your site, you can also manage and customize your widgets without making actual changes to your site. This way, you can be sure that you are happy with your customizations before making any permanent changes to your website or blog.

The ability to manage widgets from within the dashboard is a valuable feature of WordPress. You can work in preview mode inside the WordPress Theme Customizer screen (Appearance > Customize) and see how your widget content will appear prior to publishing it (and avoid making errors), or manage your widgets on the fly using the Widget editor area.

preview widget changes in the Customize section

(preview widget changes live in the Customize section)

If you need to make changes to your site while viewing the frontend, just click on the Customize link …

Toolbar Customize Link

(Customize your site quickly)

This will bring you to the Customizer area in the back-end.

You can do several edits and adjustments to the widgets in preview mode (like inserting, deleting and reorganizing your widgets), and see all changes in real time. If you are happy with what you have done, click the “Save and Publish” button and your changes will instantly become available on your site.

Widget management - work in preview mode

(Widget management – configure widgets on the fly!)

After saving the changes, all changes made to widgets will be automatically updated.

Practical Tip

Because the WordPress theme you choose affect how elements display on your site, we recommend that you install your theme first before configuring widgets.

Also, remember to use the WordPress Customizer to preview all changes. This saves you from having to keep two browsers open while you complete this tutorial (one to work in and one to see the site the way your visitors will see it).

Now that you know the basics of using widgets, the next step is to configure a number of commonly-used WordPress sidebar widgets.

Adding And Configuring WordPress Widgets In Your Site


This is the end of section 1 of this tutorial.

Click on this link to continue reading:


"I was absolutely amazed at the scope and breadth of these tutorials! The most in-depth training I have ever received on any subject!" - Myke O'Neill,