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 The WebsiteAs we’ve discussed in this article, there are lots of great things about choosing WordPress to build, manage and grow a web site. One of these is that you can easily add content, enhance your site, and rearrange your site’s layout with no web programming skills and knowledge required.

WordPress allows you to quickly and easily add, delete, and control various blocks of content on your site’s sidebar navigation section (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 like:

  • list of your web pages
  • content categories
  • archive
  • menus
  • links to external sites
  • posts that you want to promote
  • comments
  • clickable ads
  • testimonials
  • polls & surveys
  • RSS content
  • member login section
  • video galleries
  • Facebook feeds
  • display 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 WP widgets are, how they work and why widgets make managing your site easier, go here:

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

Using WordPress Widgets

What You Need To Know First

Before we start learning how to configure widgets, let’s review some of the basics about using widgets:

Most WordPress Themes Support Widget-Ready Areas

Many WordPress themes support widgets and provide built-in areas in your theme’s layout where widgets can appear, such as the sidebar, header area, and footer. Depending on your theme, widgets can sometimes also show up below or above the content area …

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

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

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

Widget Areas

(Widget Areas)

The Widgets Screen

The Widgets section displays a list of all the widgets that you currently have 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 with drag and drop ease)

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. automatically become available for use.

In addition, the Widgets screen includes an Inactive Widgets section that lets you remove any widgets that you no longer want actively displayed on your website. Inactive widgets do not lose their settings.

Rearrange WordPress Widgets With Drag & Drop

You can easily add, activate, deactivate, rearrange and remove widgets by dragging and dropping items in your Widgets area …

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

(Rearrange widgets using drag & drop)

You can also easily rearrange the layout and order of your website’s widgetized areas with drag-and-drop ease.

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

  1. An opt-in form,
  2. A click for support button, and
  3. A ‘click to call’ section 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 the order certain features display on your site)

If you were to peek inside the Widget area, you would see that the front end features appear on the site in the same order as they have been arranged in the active widget section …

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

Let’s now rearrange the above widgets in the Main Sidebar Widget Area by dragging and dropping some of these items around …

Drag-and-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 your sidebar …

Rearrange widgets on your WordPress site using drag & drop

This immediately changes the order of items in your sidebar.

Reorganizing sidebar layout using widgets can improve 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’ section (2) is found above the newsletter sign-up form (1) …

Rearrange sidebar layout using widgets to improve visitor experience

(Rearrange sidebar elements using widgets to improve your site’s user experience)

Deleting Widgets From Your WordPress Sidebar Area

Removing widgets from your WordPress sidebar is really easy.

For example, let’s show you how to remove the Search widget from the sidebar navigation section …

WordPress Search widget

(Search widget)

To remove a widget from an active Widget area, either expand the widget and click the Delete link …

Delete your WP widgets

(Delete your widgets)

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

Removing WordPress widgets

(How to remove WordPress widgets)

Repeat this process for any widgets you want to remove from the sidebar navigation area. You can always restore widgets by dragging them back into the active widgets area.

Widget Settings

Most widgets can be customized further. This includes making certain types of information hidden to your site visitors but visible to registered users, displaying additional forms, fields, or data, specifying dimensions of sidebar images, videos, etc.

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

Toggle to expand/collapse widget settings

(Toggles expand/collapse widget settings)

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

Widget settings

(Widget settings)

Important

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

Some widgets give you little to no configurable options

(Some widgets give you little to no customizable options)

Widget Customizer Section

Depending on the WordPress theme you use, you’re also able to 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 website or blog.

The ability to manage widgets inside the WP dashboard is a great 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 before publishing any changes you’ve made (to avoid making mistakes), or change widgets on the fly using the Widget editor area.

preview widget changes in the Customize section

(Edit widgets in the Customize section)

If you need to make changes to the site while viewing the front-end, just click on the Customize link …

Customize your site quickly

(Toolbar Customize Link)

This brings you to the Customizer screen in the backend.

You can do several edits to your widgets in preview mode (like adding, deleting and reorganizing your widgets), and see all changes in real time. If you like what you have done, click the “Save and Publish” button and your changes will be instantly updated and reflected on the site’s frontend.

Widget management - work in preview mode

(Widget management – configure widgets on the fly!)

Once you have saved the changes, your new settings will automatically be displayed on your site.

Tip

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

Also, remember to use the Customizer feature to preview your changes. This will save you from having to keep two browsers open while you complete this tutorial.

Now that you know the basics of using widgets, let’s configure various frequently-used WordPress widgets.

Adding Widgets To The WordPress Sidebar

***

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

To view Part Two, click this link:

***

"I am beyond impressed with what you have put together. I can tell that you put a ton of hard work into building what you have. You have the absolute best content on WordPress I have ever seen!" - Robert T. Jillie

***