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.

How To Add WordPress Widgets To Your BlogAs we’ve discussed in this article, one of the many benefits of using WordPress is that you can easily add content, enhance your site’s functionality, and change the layout of your website without web coding knowledge required.

WordPress gives you the ability to quickly and easily add, remove, and manage various types of content in your website’s sidebar navigation section (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:

  • nested page lists
  • blog categories
  • blog post archive
  • menus that display only the pages you choose
  • links to resources
  • links to your recent posts
  • user comments
  • advertising banners
  • quotations
  • survey results
  • RSS feed items
  • shopping cart forms
  • image galleries
  • Facebook feeds
  • add widgets from external sites (e.g. StumbleUpon)
  • administrative forms (e.g. login, register, etc.)

Widgets make managing and using WordPress easier!

(WP widgets help make managing and using WordPress easy)

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

In this step-by-step tutorial series we teach you how to use and configure various commonly-used WordPress widgets.

Using WordPress Widgets

Widgets – Basic Concepts

Before configuring and using widgets, it helps to first review some of the basic concepts about how to use widgets:

Most WordPress Themes Support Widget-Ready Areas

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

(Many WordPress themes provide a number of widget-enabled sections)

(Many WordPress themes provide multiple widgetized sections)

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

Widget Areas

(Widget Areas)

Widgets Screen

The Widgets section displays a list of all the widgets you have available.

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

Activate or deactivate widgets using drag-and-drop

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

Available widgets can be made Active or Inactive using drag & drop.

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

Your Widgets area also includes an Inactive Widgets section that lets you remove any widgets that you no longer want to use on your website. Inactive widgets do not lose their settings.

Reorganize Widgets Using Drag-And-Drop

You can easily add, activate, deactivate, reorder and remove widgets by dragging and dropping items from the Widgets area …

Rearrange your site's widgets using drag and drop

(Rearrange widgets on your WordPress site using drag and drop)

You can also easily rearrange the order and layout of your site’s widget-ready sections using drag & drop.

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

  1. A newsletter opt-in form,
  2. A click for support banner, and
  3. ’Click to call’ buttons from a widgetized plugin (i.e. a WordPress plugin with an accompanying widget) …

Widgets control the order certain features appear on your WordPress site

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

If we look inside the example site’s Widget area, you will see that these features appear on the site in the same order as their corresponding widgets have been arranged in the active widget screen …

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

If we rearrange the above widgets in the Sidebar Widget Area by dragging & dropping some things around …

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

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

The widgets have now been reordered in your sidebar navigation section …

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

This immediately reorganizes the layout of your sidebar.

Reorganizing sidebar layout using widgets can help to improve your site’s user experience.

Note in the screenshot below that the ‘click to call’ feature (3) is now first the sidebar section, and the support image button (2) can now be found above the newsletter sign-up form (1) …

Rearrange sidebar elements with widgets to improve user experience

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

Removing Widgets From Your Sidebar Menu

Deleting widgets from the sidebar menu is very easy.

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

WordPress Search widget

(WordPress Search widget)

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

Deleting widgets

(Deleting your WP widgets)

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

How to remove a widget

(How to remove your widgets)

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

Widget Settings

Many widgets can be further customized. This includes making certain types of information hidden to visitors but visible to registered users, displaying additional forms, fields, or information, 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 …

Toggles expand/collapse widget settings

(Toggles 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 settings …

Widget settings

(Widget settings)

Useful 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 provide users with little to no configurable options)

Widget Previews

Depending upon the theme you are using, you can also customize and manage your widgets without making actual changes to your site. This way, you can be sure that you like what you have done before committing anything live to your site.

The ability to manage widgets inside the 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 prior to publishing it (and avoid making errors), or change widgets on the fly using the Widget editor screen.

preview widget changes in the Customize feature

(preview widget changes live 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 area in the backend.

You can do several edits and adjustments to widgets in preview mode (like inserting, removing and reorganizing your widgets), and everything is done in real time. If you like what you have done, click the “Save and Publish” button and your changes will instantly become available to your site visitors.

Widget management - work in preview mode

(Widget management – work in preview mode)

After saving changes, the new settings will automatically be added to your site.

Useful Tip

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

Also, remember to use the Customizer feature to preview all 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, the next step is to start configuring various commonly-used widgets in WordPress.

How To Add Widgets To The WordPress Blog Sidebar

***

This is the end of section one of this tutorial about using WordPress widgets.

Click here to continue:

***

"Learning WordPress has been a huge stumbling block for me. I've been looking for something that covers absolutely everything but doesn't cost an arm and a leg. Thank you so much ... you have just provided me with what I have been looking for! Truly appreciated!" - Tanya

***

Recommended Video Courses For WordPress Users

Build A WordPress Site ... Fast!Build A WordPress Site ... Fast!

Need a new website or blog in a hurry?

This video course shows you how to quickly install and configure a WordPress website or blog on your own domain name and be up and running in no time!

More info: Build A WordPress Site ... Fast!

Recommended Video Courses For WordPress Users

WordPress SecurityWordPress Security

Learn how to keep your WordPress site or blog secure and protected from malware, hackers and brute-force attacks.

More info: WordPress Security

Recommended Video Courses For WordPress Users

Using Password ManagersUsing Password Managers

Password Managers provide an easy and secure way to keep track of all your passwords. This video course shows you how to use two FREE powerful password management tools.

More info: Using Password Managers

Recommended Video Courses For WordPress Users

How To Use Amazon S3How To Use Amazon S3

Learn how to set up and use Amazon S3 to upload, store, manage, and protect your site’s images, large media files, downloadable files, stream videos and more.

More info: How To Use Amazon S3

Recommended Video Courses For WordPress Users

How To Set Up WordPress On LocalhostHow To Set Up WordPress On Localhost

Learn how to install, set up, and locally host a fully functioning WordPress site on your computer.

More info: How To Set Up WordPress On Localhost

Recommended Video Courses For WordPress Users

How To Install, Set Up & Use WordPress MultisiteHow To Install, Set Up & Use WordPress Multisite

Learn how to quickly and securely set up an online community of websites or blogs using the powerful WordPress Multisite feature.

More info: WordPress Multisite

Recommended Video Courses For WordPress Users

How To Set Up A Forum On WordPressHow To Set Up A Forum On WordPress

Learn how to set up a forum for your visitors, prospects, customers, members, or affiliates using WordPress.

More info: How To Set Up A Forum On WordPress

Recommended Video Courses For WordPress Users

Using Layers WPUsing Layers WP

Learn how to use Layers WP, a powerful, flexible and user-friendly WordPress theme that lets you build professional and stunning websites easily using point-and-click.

More info: Using Layers WP

Recommended Video Courses For WordPress Users

How To Add A WordPress Site To FacebookHow To Add A WordPress Site To Facebook

Learn how to add your WordPress site to Facebook. Learn how to obtain and set up a free SSL (Secure Sockets Layer) certificate for your WordPress site, how to change your site protocol from "http" to "https" (secure site) and how to set up a Facebook app and import your entire WordPress site into Facebook.

More info: How To Add A WordPress Site To Facebook

Recommended Video Courses For WordPress Users

How To Use FTPHow To Use FTP

This video course shows you how to use FTP (File Transfer Protocol) to transfer and upload files between your hard drive and your server using a free FTP program called Filezilla.

More info: How To Use FTP

Author: Martin Aranovitch

Martin Aranovitch is the founder of WPCompendium.org and the author of The Small Business Digital Manager. WPCompendium.org provides hundreds of FREE tutorials that show you how to use WordPress to grow your business online with no coding skills required! Get our FREE "101+ WordPress Tips, Tricks & Hacks For Non-Techies" e-course with loads of useful WordPress tips!

Originally published as How To Use And Configure WordPress Widgets.