How To Use Widgets In WordPressAs discussed in this post, there are many benefits in using the WordPress web publishing software for building and managing a website. One of these is that you can easily add content, expand your site’s functionality, and rearrange the site’s layout without coding skills or knowledge required.

WordPress allows you to quickly and easily insert, delete, and reconfigure content from your blog’s sidebar section (and header and footer sections, depending on your theme) using widgets.

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

  • nested page lists
  • blog categories
  • blog post archive
  • custom menus
  • links to resources
  • links to recent posts
  • excerpts of recent comments added to your posts
  • advertising banners
  • testimonials
  • survey results
  • RSS feed content
  • subscriber form
  • video
  • social media buttons
  • add them from external sites (e.g. affiliate programs)
  • administrative forms (e.g. login, register, etc.)

Widgets make managing and using WordPress easy!

(They make managing and using WordPress easy)

To learn more about what widgets are, how they work and why they can make managing your site easier, go here: An Overview Of Widgets

In this tutorial series we will show you how to use and configure various frequently-used ones in WordPress.

Their Use

Basic Concepts

Before we show you how to configure widgets, it helps to first explain some of the basic concepts about using them:

Most WordPress Themes Support Widget-Ready Layouts

Many WordPress themes support them and provide built-in widget-ready areas in your theme’s layout where they can be added, such as the sidebar navigation menu, header area, and footer sections. Depending on the theme, they can also be added inside the content area …

(Many themes provide a number of widget-ready areas)

(Many themes provide multiple widgetized areas)

These widget-ready layouts correspond to a feature inside their administration area…

Widget Areas

( Areas)

Your Panel

The area displays a list of all the those that are currently available for use on your site.

The right-hand section of the screen displays all “active” ones …

Activate or deactivate widgets using drag-and-drop

(Activate or deactivate any using drag and drop)

Available ones can be activated or deactivated using drag & drop.

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

In addition, your Widgets screen includes an Inactive Widgets section that lets you remove widgets that you no longer want actively displayed on your site. Inactive widgets retain their pre-configured settings.

Rearrange WordPress Widgets With Drag-And-Drop

You can easily add new functionality to your site, or activate, deactivate, reorder and delete widgets just by dragging and dropping items in the Widgets section …

Rearrange widgets on your WordPress site using drag and drop

(Rearrange your them using drag and drop)

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

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

  1. A subscription form,
  2. A contact support button, and
  3. A ‘click to call’ feature from a widgetized WP plugin (i.e. a WordPress plugin that adds an accompanying widget to your site) …

Widgets control how certain features on your site display

(They control how certain features appear on your WordPress site)

If you were to peek inside the area, you would see that the front-end features display on the site in exactly the same order as they have been arranged in the back-end widget area …

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

If we change the order the above ones in the Area by dragging & dropping some of these around …

Drag and drop to rearrange widgets in the widget area

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

They have now been reorganized in your sidebar navigation area …

Rearrange widgets on your WordPress site using drag & drop

As you can see, this instantly reorganizes the layout of your site’s sidebar.

Rearranging sidebar elements can help improve user experience.

Note in the screenshot below that the ‘click to call’ function (3) is now the first item on the sidebar, and the support section (2) is placed above the newsletter subscription form (1) …

Reorganizing sidebar elements using widgets can improve your site's user experience

(Reorganize sidebar elements to improve visitor experience)

Deleting  From Your Sidebar

Deleting from your WordPress sidebar is really easy.

For example, let’s delete the Search one from your sidebar navigation section …

WordPress Search widget

(WordPress Search )

To delete any that are active , either open it up and click the Delete link …

Delete your widgets

(Delete WordPress widgets)

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

How to remove your widgets

(Removing your widgets)

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

 Settings

Most widgets provide additional options that allow you to further customize your site features. 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 toggle between expanding and collapsing the item …

Toggles expand/collapse widget settings

(Toggle to expand/collapse settings)

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

Widget settings

(Settings)

Important

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

Some widgets offer little to no customizing options

(Some give you little to no customizable options)

Preview Widgets

Depending upon which theme you have installed on your site, you can also preview any changes live without making actual changes to your site. This way, you can be sure that you like the customized edits before making any permanent changes to your site.

The ability to manage widgets from your own dashboard is a great feature of WordPress. You can work in preview mode inside the WordPress Theme Customizer screen (Appearance > Customize) and see how the content will appear prior to publishing it (to avoid making errors), or change them on the fly using the editor area.

preview widget changes live in the Customize section

(preview widget changes live in the Customize section)

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

Customize your site quickly

(Toolbar Customize Link)

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

You can do a number of edits to the widgets in preview mode (like adding, removing and moving them around), and see all changes in real time. If you are happy with the results, click the “Save and Publish” button and the changes will instantly become available on your site to visitors.

Widget management - configure widgets on the fly!

(Widget management – configure them on the fly!)

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

Practical Tip

Since the theme you use determines how elements display on your site, we recommend that you install the theme first before configuring widgets on your 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 work through this tutorial (one to work in and one to check how your site is coming along).

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

How To Add WordPress Widgets To Your Blog

***

This is the end of part one of this tutorial.

Has this tutorial helped you gain a better understanding? Feel free to take a moment to share this article with your friends.