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 Widgets To The WordPress Blog SidebarAs we have discussed in this article, there are lots of great things about using the WordPress web publishing software to build and grow a website. One of these is that WordPress makes it very easy to add content, expand your website’s functionality, and reconfigure your site’s layout without having code editing skills.

WordPress lets you easily add, delete, and rearrange various types of content from your site’s sidebar (or header and footer sections too, depending on what theme is installed on the site) 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 your theme) like:

  • nested page lists
  • blog post categories
  • blog post archive
  • menus that display only selected pages
  • links to external sites
  • links to recent posts
  • recent comments
  • advertising
  • quotations
  • poll results
  • content from RSS feeds
  • shopping cart forms
  • video
  • social media share buttons
  • display widgets from other sites (e.g. Pinterest)
  • 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 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 show you how to use and configure a number of frequently-used WordPress widgets.

Using Widgets

Widgets – Basic Concepts

Before we explain how to configure widgets, it helps to first go over some of the basic concepts about how to use widgets:

Most WordPress Themes Support Widgetized Areas

Many WordPress themes support widgets and provide sections in your theme’s layout where you can add widgets, such as the sidebar, header area, and the footer area. Depending on the theme, widgets can also appear below or above the content area …

(Many themes provide multiple widget-ready sections)

(Many themes offer users multiple widget-enabled sections)

These widgetized layouts correspond to a feature inside your Widget panel called “Widget Areas” …

Widget Areas

(Widget Areas)

The Widgets Panel

The Widgets area 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 by dragging & dropping)

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

Widgets dragged from the Available Widgets section to widget areas like the sidebar, footer, etc. become activated for use on your site.

In addition, the Widgets screen includes an Inactive Widgets section that lets you remove widgets that you no longer want to use on your website. Inactive widgets do not lose their pre-configured settings.

Reorganize Widgets Using Drag & Drop

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

Rearrange widgets using drag and drop

(Rearrange widgets using drag-and-drop)

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

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

  1. An opt-in form,
  2. A click for support button, and
  3. A ‘click to call’ function from a widgetized WP plugin (i.e. a WordPress plugin that adds an accompanying widget to your site) …

Widgets control the order certain features display on your site

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

Looking inside the Widget area, you would see that the front-end features appear on the site’s sidebar menu in the same order as they have been arranged in the active widget section …

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

Let’s now change the order the above widgets in the Active Widget Area using drag and drop …

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

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

The widget features have now been reordered in your sidebar …

Rearrange widgets on your WordPress site using drag and drop

This immediately reorganizes the order of items in the sidebar.

Reorganizing sidebar layout using widgets can help improve user 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) is located above the newsletter subscription form (1) …

Rearranging sidebar elements with widgets can help to improve user experience

(Rearranging sidebar layout using widgets can help to improve visitor experience)

Deleting Widgets From The WordPress Blog Sidebar Navigation Section

Removing widgets from the sidebar navigation section is very easy.

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

Search widget

(WordPress Search widget)

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

Deleting your WP widget

(Delete your WordPress widgets)

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

How to remove widgets

(Removing your widget)

Repeat this process for any widgets you want removed from the sidebar. You can always reinstate widgets by dragging them back into the active widgets area.

Widget Settings

Most widgets can be customized. This can include things like hiding information from 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 toggles between expanding and collapsing the item and displays the settings for that widget …

Toggling expands/collapse widget settings

(Toggles expand/collapse widget settings)

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

Widget settings

(Widget settings)

Important Info

Some widgets provide users with little to no configuration options, or they may only allow you to add something like an optional title …

Some widgets provide users with little to no configurable options

(Some widgets offer little to no customization)

Customize Widgets Section

Depending on the WP theme you have installed, you can also customize and manage widgets without actually making 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.

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 it (to avoid making mistakes), or manage widgets on the fly using the Widget editor screen.

Edit widgets live in the Customize section

(preview widget changes in the Customize section)

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

Customize your site quickly

(Toolbar Customize Link)

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

You can do several modifications and adjustments to your widgets in preview mode (like adding, deleting and moving widgets around), and this will all be done in real time. If you are happy with what you have done, click the “Save and Publish” button and your changes will instantly become visible to your site visitors.

Widget management - configure widgets on the fly!

(Widget management – configure widgets on the fly!)

After saving changes, your new configuration will automatically be displayed on your site.

Useful Tip

Since WordPress Themes can display elements differently on your site, we recommend installing your theme first before configuring widgets on your sidebar.

Also, remember to use the Customizer feature to preview all changes. This saves you from having to keep two browsers open while you go through this tutorial.

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

How To Add And Configure Widgets On Your WordPress Blog Sidebar Navigation Area

***

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

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

***

"I was absolutely amazed at the scope and breadth of these tutorials! The most in-depth training I have ever received on any subject!" - Myke O'Neill, DailyGreenPost.com

***

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

Recommended Video Courses For WordPress Users

Build An e-Commerce Store With WordPressBuild An e-Commerce Store With WordPress

Learn how to set up an e-commerce store on your WordPress site using e-commerce platforms like WooCommerce and Easy Digital Downloads.

More info: Build An e-Commerce Store With WordPress

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 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 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

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

Using S2 MemberUsing S2 Member

Learn how to set up and configure a WordPress membership site using the S2 Member free WordPress membership plugin.

More info: Using S2 Member

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

How To Use CSSHow To Use CSS

CSS (Cascading Style Sheets) allows you to control how web pages and page elements display on your screen. This video course shows you how to use CSS.

More info: How To Use CSS

Recommended Video Courses For WordPress Users

How To Design, Develop & Sell WordPress ThemesHow To Design, Develop & Sell WordPress Themes

Learn how to design, develop, and sell your own WordPress Themes.

More info: How To Design, Develop & Sell WordPress Themes

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.