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 WordPress Widgets To Your SiteAs we’ve explained in this post, one of the many great benefits of using WordPress is that you can easily add content, improve your site’s functionality, and redesign the layout of your website with no web coding knowledge required.

WordPress allows you to quickly and easily add, delete, and rearrange various types of content in your site’s sidebar area (and header and footer sections too, depending on what theme you have installed) using widgets.

Once you know how to use widgets, you can easily add things to your site like:

  • list of your web pages
  • site categories
  • post archives
  • menus that display only the pages you select
  • links to resources
  • your most popular posts
  • recent comments
  • advertising banners
  • testimonials
  • polls
  • RSS content
  • subscription form
  • product images
  • social media share buttons
  • display widgets from other sites (e.g. Facebook)
  • administrative forms (e.g. login, register, etc.)

WordPress widgets make managing and using WordPress easy!

(WordPress widgets make managing and using WordPress easy)

To learn more about what WordPress widgets are, how widgets work and why they make managing your site easier, see this article:

In this step-by-step tutorial series you will learn how to use and configure a number of frequently-used widgets in WordPress.

How To Use Widgets

The Basics

Before we start configuring and using widgets, it helps to first go over some of the basics of how to use widgets:

Most WordPress Themes Support Widget-Ready Layouts

Many WordPress themes support widgets and provide widgetized areas in the theme’s layout where you can use widgets, such as the sidebar navigation menu, header area, and footer. Depending on the theme installed on your site, widgets can sometimes also show up in the content area …

(Many themes provide a number of widgetized areas)

(Many themes offer users a number of widget-ready areas)

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

Widget Areas

(Widget Areas)

Widgets Screen

The Widgets panel displays all the widgets that are available.

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

Activate or deactivate widgets using drag-and-drop

(Widgets can be activated or deactivated using drag and drop)

Available widgets can be activated or deactivated by dragging & dropping items to different areas of the widgets screen.

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

The Widgets panel also includes an Inactive Widgets section that lets you remove any widgets that you no longer want to actively display on your site. Inactive widgets retain their settings.

Rearrange WordPress Widgets Using Drag-And-Drop

You can easily add new functionality to your site, and activate, deactivate, reorder and delete things using widgets using drag & drop inside the Widgets area …

Rearrange widgets using drag-and-drop

(Rearrange widgets using drag & drop)

You can also easily reorder your theme’s layout using drag & drop.

For example, take a look at the image below. In this site, the widgets have already been configured to display the following to visitors:

  1. An opt-in form,
  2. A contact support banner, and
  3. ’Click to call’ buttons from a widgetized plugin (i.e. a plugin that adds an accompanying widget to your site) …

Widgets control how certain features appear on your site

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

If you were to peek inside the Widget area, you would see that the front-end features display on the site’s sidebar area in exactly the same order as they were arranged in the backend widget area …

Rearrange widgets on your WordPress site using drag & drop

Let’s now rearrange these widgets in the Main Sidebar Widget Area using drag & drop …

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

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

The widget features have now been reordered in the sidebar navigation section …

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

This immediately changes the layout of the sidebar.

Rearranging sidebar layout with 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 menu, and the support section (2) has been moved to the spot above the newsletter sign-up form (1) …

Reorganize sidebar layout using widgets to improve your site's user experience

(Reorganize sidebar layout using widgets to improve your site’s visitor experience)

Deleting Widgets From Your WordPress Blog Sidebar

Removing widgets from your sidebar area is really easy.

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

Search widget

(Search widget)

To remove an active widget, either expand the widget settings and click the Delete link …

Deleting your widgets

(How to delete a widget)

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

How to remove a widget

(Remove your WordPress widget)

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

Widget Settings

Most widgets can be customized. This can include things like hiding information from users (but allowing access 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 settings for the widget …

Toggle to expand/collapse widget settings

(Toggle to expand/collapse widget settings)

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

Widget settings

(Widget settings)

Info

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

Some widgets provide users with little to no customization

(Some widgets give you little to no configuration options)

Widget Customizer Section

Depending upon the WordPress theme you have installed on your site, you’re also able to preview any changes live 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.

The ability to manage widgets from within your dashboard is a great 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 configure widgets on the fly using the Widget editor area.

preview widget changes in the Customize feature

(Edit widgets in the Customize section)

Wherever you are on the front-end just calick the Customize link in the toolbar …

Toolbar Customize Link

(Toolbar Customize Link)

This brings you to the Customizer screen in the back-end.

You can do several edits and adjustments to the widgets in preview mode (like inserting, deleting and moving widgets around), and see all changes in real time. If you like what you’ve done, click the “Save and Publish” button and the changes will be instantly updated and reflected to your site visitors.

Widget management - configure widgets on the fly!

(Widget management – configure widgets on the fly!)

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

Useful Tip

Because WordPress Themes can display elements differently on your site, we recommend that you install the theme first before configuring widgets on your sidebar.

Also, remember to use the WordPress Customizer to preview your changes. This will save 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, it’s time to learn how to begin configuring a number of commonly-used widgets in WordPress.

How To Add And Configure WordPress Widgets In Your Sidebar Navigation Section

***

This is the end of part one of this tutorial series.

To view the rest of this tutorial series, click this link:

***

"Wow! I never knew there's so much to learn about WordPress! I bought one of the WordPress for Dummies three years ago, such authors need to be on this course!" - Rich Law, Create A Blog Now

***