As 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.)

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

• What You Need To Know About WordPress Widgets

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 multiple widgetized sections)

These widget-ready layouts correspond to a feature inside your Widget administration screen called “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 …

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

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

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

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

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

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

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

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)

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 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 live in the Customize section)

Wherever you are on the front-end just calick the Customize link in the toolbar …

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

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

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.

***

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

Click here to continue:

• How To Add WordPress Widgets To Your Blog – Part 2

***

***