As we explain in this article, one of the many great benefits of using WordPress to manage your web presence is that you can easily add content, improve your site’s functionality, and reconfigure the layout of your website with no web coding skills required.
WordPress lets you easily insert, remove, and reorganize content in your blog’s sidebar area (and header and footer sections, 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:
- nested list of your web pages
- categories
- archives
- customized menus
- links to resources
- links to your recent posts
- user comments
- clickable images
- quotations
- polls
- RSS feed content
- newsletter registration form
- video
- twitter feeds
- add widgets from external sites (e.g. affiliate programs)
- administrative forms (e.g. login, register, etc.)
(WordPress widgets help make managing and using WordPress easy)
To learn more about what WordPress widgets are, how widgets work and how using widgets can help you expand the functionality of your website, see this article:
In this tutorial series you are going to learn how to use and configure a number of frequently-used WordPress widgets.
Using Widgets In WordPress
Basic Concepts
Before we get into configuring and using widgets, let’s first explain some of the basics of using widgets:
Most WordPress Themes Support Widget-Ready Areas
Most WordPress themes support widgets and provide widgetized sections in your theme’s layout where widgets can be added, such as the sidebar navigation section, header area, and footer sections. Depending on the theme, widgets can sometimes also be found inside the content area …
(Many WordPress themes provide a number of widgetized sections)
These widget-ready areas correspond to a feature inside your Widget administration area called “Widget Areas” …
(Widget Areas)
Widgets Panel
The Widgets section displays a list of all the widgets that can be used on your site.
On the right-hand side of the window, you can see your “active” widgets …
(Activate or deactivate widgets with drag and drop ease)
Available widgets can be made Active or Inactive using drag-and-drop.
Widgets dragged from the Available Widgets section to widget areas like the sidebar, footer, etc. become immediately active on your site.
In addition, your Widgets area includes an Inactive Widgets section that lets you remove any widgets that you no longer want actively displayed on your site. Inactive widgets do not lose their pre-configured settings.
Rearrange WordPress Widgets With Drag-And-Drop
You can easily add, activate, deactivate, rearrange and remove widgets using simple drag and drop inside your Widgets section …
(Rearrange widgets using drag & drop)
You can also easily rearrange your theme’s layout with drag and drop ease.
For example, take a look at the image below. In this example site, the widgets have already been configured to show the following:
- A newsletter opt-in form,
- A click for support button, and
- ’Click to call’ feature from a widgetized WordPress plugin (i.e. a WordPress plugin that adds an accompanying widget to your site) …
(Widgets control the order certain features appear on your site)
If you take a 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 …
If we reorganize these widgets in the Active Widget Area by dragging and dropping some of the items around …
(Drag & drop to rearrange widgets in the widget area)
The widget features have now been reordered in your sidebar area …
As you can see, this instantly changes the layout of your sidebar.
Reorganizing sidebar layout with widgets can improve your site’s visitor experience.
Note in the screenshot below that the ‘click to call’ function (3) is now at the top of the sidebar, and the support image banner (2) can now be found above the newsletter sign-up form (1) …
(Rearranging sidebar elements with widgets can improve your site’s user experience)
Removing Widgets From The Sidebar
Deleting widgets from your sidebar navigation menu is really easy.
For example, let’s delete the Search widget from your sidebar …
(WordPress Search widget)
To delete a widget from an active Widget area, you can either open up the widget settings and click the Delete link …
(Deleting a widget)
Or just drag the widget out of the Active Widgets area and into the Inactive Widgets area …
(How to remove WordPress widgets)
Repeat this process for any widgets you want removed from the sidebar menu. You can always reinstate widgets by moving them back into the active widgets area.
Widget Settings
Most widgets can be customized further. This can include things like making certain types of information hidden to visitors but visible to registered users, displaying additional forms, fields, or data, specifying dimensions of sidebar images, videos, etc.
Click on the little triangle in the corner of a widget to toggle between expanding and collapsing the item …
(Toggle to 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 give you little to no customizing options, or they may only allow you to add something like an optional title …
(Some widgets offer little to no customizable options)
Widget Customizer Section
Depending upon the theme you are using, you can also customize and manage your 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 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 prior to publishing it (to avoid making errors), or manage your widgets on the fly using the Widget editor screen.
(preview widget changes in the Customize section)
Wherever you are on the front-end just calick the Customize link in the toolbar …
(Toolbar Customize Link)
This will bring you to the Customizer section in the back-end.
You can do lots of modifications and adjustments to widgets in preview mode (like adding, deleting and reorganizing your widgets), and see all changes in real time. If you are happy with the results, click the “Save and Publish” button and the changes will be instantly updated and made visible on the site’s frontend.
(Widget management – work in preview mode)
After saving changes, the new updates will automatically be displayed on your site.
Because the WordPress theme you use tend to affect how elements display on your site, we recommend installing the theme first before configuring widgets on the sidebar menu.
Also, remember to use the Customizer feature to preview your changes. This saves 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 begin configuring a number of frequently-used WordPress widgets.
***
This is the end of section 1 of this series of tutorials about using Widgets.
Click on this link to continue:
***
"I love the way your email series "Infinite Web Content Creation Training Series" is documented and presented. It is very absorbing and captivating. The links and tutorials are interesting and educational. This has motivated me to rewrite my content following the concepts I am learning from the email series." - Mani Raju, www.fortuneinewaste.com
***