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 And Configure WordPress Widgets In The SiteAs we’ve explained in this post, one of the many benefits of choosing the WordPress CMS platform is that WordPress makes it very easy to add content, enhance your website, and reorganize the layout of your site without code editing skills required.

WordPress allows you to easily insert, remove, and control various types of content in your site’s sidebar (or header and footer sections, depending on what theme you are using) using widgets.

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

  • page lists
  • content categories
  • post archives
  • customized menus
  • links to resources
  • links to your recent posts
  • comments
  • clickable ads
  • customer testimonials
  • poll results
  • RSS feed items
  • newsletter registration form
  • video galleries
  • twitter feeds
  • add widgets from other sites (e.g. affiliate programs)
  • administrative forms (e.g. login, register, etc.)

WordPress widgets make managing and using WordPress easier!

(WP widgets help make managing and using WordPress easy)

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 step-by-step tutorial series we explain how to use and configure various frequently-used WordPress widgets.

Using Widgets

What You Need To Know First

Before we show you how to configure widgets, let’s explain some of the basic concepts of using widgets:

Most WordPress Themes Support Widget-Ready Areas

Many WordPress themes support widgets and provide widgetized sections in the theme’s layout where you can add widgets, such as the sidebar, header area, and footer sections. Depending on the theme, widgets can also be used in the content area …

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

(Many WordPress themes offer users multiple widget sections)

These widgetized areas correspond to a feature inside your Widget management area called “Widget Areas” …

Widget Areas

(Widget Areas)

Widgets Panel

The Widgets panel displays all the widgets that you currently have available.

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

Activate or deactivate widgets using drag and drop

(Activate or deactivate widgets 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. become immediately active.

Your Widgets screen 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 do not lose their settings.

Rearrange WordPress Widgets Using Drag And Drop

You can easily add, activate, deactivate, reorder and remove things using widgets using drag & drop inside your Widgets area …

Rearrange widgets on your WordPress site using drag & drop

(Rearrange widgets using drag and drop)

You can also easily reconfigure your theme’s layout using drag-and-drop.

For example, in the image below, the widgets have already been configured to show the following:

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

Widgets control how certain features on your site appear

(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 correspond to the order of widgets inside the active widget area …

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

Let’s now rearrange these widgets in the Widget Area using drag-and-drop …

Drag and drop to rearrange widgets in your widget area

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

The widget features have now been reorganized in your sidebar menu …

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

This instantly reorganizes the layout of the sidebar.

Rearranging sidebar elements with widgets can help to improve your site’s visitor experience.

Note in the screenshot below that the ‘click to call’ feature (3) is now at the top of the sidebar, and the ‘contact us’ section (2) has been moved to the location above the newsletter sign-up form (1) …

Rearranging sidebar elements with widgets can improve visitor experience

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

Deleting Widgets From The WordPress Sidebar

Deleting widgets from your sidebar is very easy.

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

Search widget

(WordPress Search widget)

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

Delete your widgets

(Deleting WordPress widgets)

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

Removing your widgets

(How to remove a widget)

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

Widget Settings

Many widgets can be further 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.

Click on the little triangle in the corner of a widget to display 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, remove the widget from the “Active Widgets” section, close the widget, or click on the triangle to collapse the widget settings …

Widget settings

(Widget settings)

Useful Information

Some widgets offer little to no customizable options, or they may only allow you to add an optional title …

Some widgets provide users with little to no configuration options

(Some widgets give you little to no configuration options)

Widget Previews

Depending upon the WP theme you have installed, you can also customize widgets without actually making changes to your site. This way, you can be sure that you like your customizations before committing anything live 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 prior to publishing any changes you’ve made (and avoid making mistakes), or change your widgets on the fly using the Widget editor screen.

Edit widgets in the Customize section

(Edit widgets in the Customize feature)

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

Customize link in the toolbar

(Toolbar Customize Link)

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

You can do several edits to widgets in preview mode (like inserting, deleting and reorganizing your widgets), and see all changes in real time. If you like the results, click the “Save and Publish” button and the changes will instantly become available to your site visitors.

Widget management - configure widgets on the fly!

(Widget management – work in preview mode)

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

Practical Tip

Since the theme you use tend to 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 will save you from having to keep two browsers open while you go through this tutorial (one to work in and one to see your site the way your visitors will see it).

Now that you know the basics of using widgets, the next step is to learn how to configure various commonly-used WordPress widgets.

How To Add And Configure WordPress Widgets In The Blog

***

This is the end of part 1 of this tutorial series on how to use Widgets.

Click on this link to continue reading:

***

"Your training is the best in the world! It is simple, yet detailed, direct, understandable, memorable, and complete." Andrea Adams, FinancialJourney.org

***

Recommended Video Courses For WordPress Users

Sell Online With PayPalSell Online With PayPal

This video course shows you how to set up PayPal on your website to receive payments online, with additional tips on using PayPal payment tools.

More info: Sell Online With PayPal

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

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 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 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 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 cPanelHow To Use cPanel

cPanel is a powerful and simple-to-use web hosting management software application that gives website owners the ability to quickly and easily manage their servers and websites using a simple and intuitive dashboard.

This video course will teach you how to use the main features of cPanel to manage your web hosting.

More info: How To Use cPanel

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

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!

Author: Martin Aranovitch

Martin Aranovitch is the owner of WPCompendium.org and the author of The WordPress User Manual. 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.