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.

Using WordPress WidgetsAs we have explained in this article, one of the many benefits of using WordPress to manage and grow your website or blog is that you can easily add content, expand your site’s functionality, or redesign the layout of your website without web coding skills required.

WordPress allows you to easily insert, remove, and reconfigure various types of content on your website’s sidebar (and header and footer sections, depending on what theme you use) 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 you have installed) like:

  • nested page lists
  • blog categories
  • archive
  • customized menus
  • links to external sites
  • your most read posts
  • post comments
  • clickable images
  • quotations
  • poll questions & results
  • RSS feed content
  • opt-in form
  • video
  • Facebook feeds
  • display widgets from other sites (e.g. Facebook friends)
  • administrative forms (e.g. login, register, etc.)

Widgets make managing and using WordPress easy!

(Widgets make managing and using WordPress easier)

To learn more about what widgets are, how widgets work and why widgets make managing your site easier, go here:

In this tutorial we will show you how to use and configure a number of frequently-used WordPress widgets.

How To Use Widgets In WordPress

Basic Concepts

Before we explain how to configure widgets, let’s explain some of the basic concepts about how to use widgets:

Most WordPress Themes Support Widgetized Layouts

Many WordPress themes support widgets and provide sections in your theme’s layout where widgets can be used, such as the sidebar section, header area, and footer sections. Depending on the theme, widgets can sometimes also get added inside the content area …

(Many themes provide a number of widget-ready areas)

(Many WordPress themes offer users multiple widget-ready sections)

These widget-ready sections correspond to a feature inside your Widget administration panel called “Widget Areas” …

Widget Areas

(Widget Areas)

Widgets Screen

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

The right-hand section of the window displays the “active” widgets …

Activate or deactivate widgets using drag & drop

(Widgets can be activated or deactivated with drag and drop ease)

Available widgets can be made Active or Inactive by dragging-and-dropping items to different sections of the widgets panel.

Widgets dragged from the Available Widgets section to widget areas like your sidebar, footer, etc. instantly become active and available for use.

In addition, the Widgets panel includes an Inactive Widgets section that lets you remove widgets that you no longer want on your site. Inactive widgets do not lose their settings.

Reorganize WordPress Widgets With Drag-And-Drop

You can easily add new functionality to your site, and activate, deactivate, reorder and delete widgets just by dragging and dropping items in the Widgets area …

Rearrange widgets on your WordPress site using drag-and-drop

(Rearrange widgets using drag and drop)

You can also easily rearrange your theme’s layout with drag and drop ease.

For example, take a look at the image below. In this site, the widgets have already been configured to display things on your site like:

  1. A subscription form,
  2. A contact support banner, and
  3. ’Click to call’ feature from a widgetized WP plugin (i.e. a plugin that adds an accompanying widget to your site) …

Widgets control how certain features on your site appear

(Widgets control how certain features on your site display)

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

Rearrange your site's widgets using drag-and-drop

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

Drag & drop to rearrange widgets in your widget area

(Drag-and-drop to rearrange widgets in your widget area)

The widgets have now been reorganized in your sidebar …

Rearrange your site's widgets using drag-and-drop

As you can see, this immediately changes the order of items in the site’s sidebar.

Reorganizing sidebar layout with widgets can help improve visitor experience.

Note in the screenshot below that the ‘click to call’ feature (3) is now at the top of the sidebar navigation menu, and the ‘contact us’ section (2) is now located above the newsletter opt-in form (1) …

Rearranging sidebar elements using widgets can help to improve visitor experience

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

Deleting Widgets From The WordPress Sidebar Navigation Section

Removing widgets from your sidebar is really easy.

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

Search widget

(WordPress Search widget)

To delete an active widget, you can either open up the widget and click the Delete link …

How to delete a widget

(Delete your widgets)

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

Remove a widget

(Remove your widgets)

Repeat this process for any widgets you want to remove from the sidebar. You can always reinstate a widget by dragging it back into the active widgets area.

Widget Settings

Most widgets offer additional settings that allow you to further customize these. This can include things like making certain types of information hidden to site visitors but visible to registered users, displaying additional forms, fields, or data, specifying dimensions of sidebar images, videos, etc.

Click on the little triangle in the corner of a widget to display the settings for that widget …

Toggles expand/collapse widget settings

(Toggle to expand/collapse widget settings)

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

Widget settings

(Widget settings)

Important

Some widgets may require or offer no customization, or they may only allow you to add something like an optional title …

Some widgets give you little to no customization

(Some widgets provide users with little to no customizable options)

Widget Previews

Depending on the WP theme you have installed on your site, you can also preview any changes live without making actual changes to your site. This way, you can be sure that you like the customized edits before making any permanent changes to your site.

Widget management is a valuable feature of WordPress. You can work in preview mode inside the WordPress Theme Customizer screen (Appearance > Customize) and see how the widget content will appear before publishing changes (and avoid making errors), or manage widgets on the fly using the Widget editor area.

preview widget changes in the Customize section

(Edit widgets live in the Customize section)

When viewing your site on the front-end just calick the Customize link in the toolbar …

Customize your site quickly

(Customize your site quickly)

This brings you to the Customizer feature in the backend.

You can do a number of things in preview mode (like adding, deleting and reorganizing your widgets), and see all changes in real time. If you are happy with the results, click the “Save and Publish” button and your changes will instantly become visible on the site’s frontend.

Widget management - work in preview mode

(Widget management – work in preview mode)

Once you have saved your changes, all changes made to widgets will be automatically updated.

Useful Tip

Since the theme you choose can affect how elements display on your site, we recommend that you install the 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 work through 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, let’s begin configuring various frequently-used WordPress sidebar widgets.

Using WordPress Widgets

***

This is the end of section 1 of this series of tutorials about using WordPress widgets.

To continue, click here:

***

"These tutorials have so much information and are easy to understand. If you use WordPress or plan to in the future these will help you with everything you need to know." - Valisa (Mesa, Arizona)

***