As we’ve discussed in this post, one of the many benefits of using the WordPress web publishing tool for managing and growing your website is that you can easily add content, expand your website’s functionality, and reorganize the layout of your website without having any code editing skills and knowledge.

WordPress allows you to quickly and easily insert, delete, and reorganize content in your website’s sidebar section (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 like:

• index of pages
• categories
• archived posts
• custom menus
• links to external sites
• your most read posts
• recent comments
• clickable ad banners
• client testimonials
• survey questions & results
• RSS content
• shopping cart forms
• product catalog images
• social media buttons
• add widgets from other sites (e.g. Facebook friends)
• administrative forms (e.g. login, register, etc.)

(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 functionality, see this article:

• All You Need To Know About Widgets

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

Using Widgets

Widgets – The Basics

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

Most WordPress Themes Support Widgetized Areas

Many WordPress themes support widgets and provide built-in widget-ready sections in the theme’s layout where widgets can be used, such as the sidebar, header area, and footer. Depending on your theme, widgets can sometimes also show up in the content area …

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

These widgetized areas correspond to a feature inside the Widget screen called “Widget Areas” …

(Widget Areas)

Widgets Screen

The Widgets area displays all the widgets that can be used on your site.

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

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

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

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

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

Rearrange WordPress Widgets Using Drag-And-Drop

You can easily insert, activate, deactivate, rearrange and remove widgets just by dragging and dropping items in your Widgets section …

(Rearrange widgets using drag-and-drop)

You can also easily rearrange the order and layout of your theme’s widget-enabled layout using drag-and-drop.

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

1. A newsletter subscription form,
2. A contact support banner, and
3. ’Click to call’ buttons from a widgetized WordPress plugin (i.e. a WordPress plugin that adds an accompanying widget to 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 in exactly the same order as they have been arranged in the back-end widget section …

Let’s now rearrange the order of these widgets in the Active Widget Area by dragging & dropping elements …

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

The widgets have now been reordered in the sidebar …

As you can see, this instantly changes the order of items in your site’s sidebar.

Reorganizing sidebar layout with 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, and the ‘contact us’ graphic button (2) has been moved to the location above the newsletter subscription form (1) …

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

Removing Widgets From The WordPress Blog Sidebar Section

Removing widgets from your WordPress sidebar menu is very easy.

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

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

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

(Remove WordPress widgets)

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

Widget Settings

Many widgets provide various options that allow you to further customize these. This includes hiding information from 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 …

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

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

(Some widgets offer little to no configurable options)

Previewing Widgets

Depending upon which WordPress theme you choose, you can also customize your widgets without making actual changes to your site. This way, you can be sure that you are happy with your customizations before committing anything live to your site.

The ability to manage widgets inside your WordPress dashboard is a valuable 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 any changes you’ve made (and avoid making mistakes), or manage your widgets on the fly using the Widget editor screen.

(Edit widgets live in the Customize section)

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

(Customize link in the toolbar)

This will bring you to the Customizer screen in the back-end.

You can do many edits and adjustments to widgets in preview mode (like adding, removing and moving widgets around), and see all changes 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 – work in preview mode)

After saving your changes, WordPress will automatically update the widget settings and display the new configuration to your site visitors.

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

Also, remember to use the WordPress Customizer to preview your changes. This saves you from having to keep two browsers open while you work through this tutorial.

Now that you know the basics of using widgets, it’s time to learn how to begin configuring various frequently-used WordPress widgets.

***

This is the end of section one of this tutorial about how to use Widgets.

Click here to view the rest of this tutorial series:

• Adding And Configuring WordPress Widgets In The Website – Part 2

***

***