As discussed in this post, there are loads of great benefits in using WordPress to build and manage a web site. One of these is that you can easily add content, expand your site’s functionality, and rearrange the layout of your site without code editing skills and knowledge required.
WordPress allows you to easily insert, delete, and reconfigure various types of content in your website’s sidebar (and header and footer sections too, depending on what theme you use) 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 the WordPress theme you have installed) like:
- index of pages
- content categories
- archives
- custom page menus
- links to resources
- your most read posts
- comments
- advertisements
- testimonials
- polls
- RSS content excerpts
- registration box
- video
- twitter feeds
- add widgets from other sites (e.g. Facebook friends)
- administrative forms (e.g. login, register, etc.)
(WordPress 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 functionality, go here:
In this tutorial series we show you how to use and configure various commonly-used WordPress widgets.
How To Use Widgets
What You Need To Know First
Before we show you how to configure widgets, it helps to first cover some of the basic concepts of using widgets:
Most WordPress Themes Support Widgetized Areas
Many WordPress themes support widgets and provide widget-ready sections in your theme’s layout where widgets can be used, such as the sidebar area, header area, and the footer area. Depending on the theme, widgets can sometimes also show up below or above the content area …
(Many themes provide a number of widget-enabled sections)
These widgetized layouts correspond to a feature inside your Widget administration area called “Widget Areas” …
(Widget Areas)
The Widgets Screen
The Widgets screen displays a list of all the widgets that are available.
The right-hand section of the screen displays all “active” widgets …
(Activate or deactivate widgets by dragging & dropping)
Available widgets can be activated or deactivated using drag-and-drop.
Widgets dragged from the Available Widgets section to widget areas like the sidebar, footer, etc. become immediately active and available for use on your site.
In addition, your Widgets panel includes an Inactive Widgets section that lets you remove widgets that you no longer want to actively display on your site. Inactive widgets do not lose their settings.
Reorganize WordPress Widgets Using Drag And Drop
You can easily insert, activate, deactivate, rearrange and delete widgets by dragging and dropping items in the Widgets area …
(Rearrange widgets using drag-and-drop)
You can also easily rearrange your theme’s layout with drag-and-drop ease.
For example, in the image below, the widgets have already been configured to display things on your site like:
- A newsletter opt-in form,
- A contact support button, and
- ’Click to call’ buttons from a widgetized WP plugin (i.e. a WordPress plugin that adds an accompanying widget to your site) …
(Widgets control the order certain features on your site appear)
If you look inside this site’s Widget area, you will see that these features correspond to the order of widgets inside the active widget area …
Let’s now reorganize the above widgets in the Sidebar Widget Area by dragging & dropping items …
(Drag and drop widgets in your widget area to rearrange their order)
The widget features have now been reordered in your sidebar …
As you can see, this instantly reorganizes the order of items in the site’s sidebar.
Reorganizing sidebar elements with widgets can help to improve your site’s user 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) is now found above the newsletter sign-up form (1) …
(Reorganize sidebar elements with widgets to improve your site’s visitor experience)
Removing Widgets From Your Sidebar
Removing widgets from your WordPress sidebar is really easy.
For example, let’s delete the Search widget from your sidebar navigation section …
(Search widget)
To remove a widget from an active Widget area, you can either expand the widget settings and click the Delete link …
(How to delete WordPress widgets)
Or just drag the widget out of the Active Widgets section and into the Inactive Widgets area …
(Removing your widget)
Repeat this process for any other widgets you want to remove from your sidebar. You can always reactivate a widget by dragging it back into the active widgets area.
Widget Settings
Most widgets offer various options that allow you to further customize these. 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 …
(Toggles expand/collapse widget settings)
When the widget expands, you can change and save your settings, delete the 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 customization, or they may only allow you to add an optional title …
(Some widgets offer little to no configuration options)
WP Theme Customizer
Depending on which theme you choose, 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.
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 your widget content will appear before publishing any changes (and avoid making mistakes), or manage widgets on the fly using the Widget editor area.
(Edit widgets in the Customize section)
When viewing your site on the front-end just calick the Customize link in the toolbar …
(Customize your site quickly)
This will bring you to the Customizer area in the backend.
You can do many things in preview mode (like adding, removing and moving widgets around), and see all changes in real time. If you like what you’ve done, click the “Save and Publish” button and your changes will be instantly updated and reflected on your site.
(Widget management – configure widgets on the fly!)
After saving the changes, the new settings will automatically be added to your site.
Since WordPress Themes can display elements differently on your site, we recommend installing your theme first before configuring widgets.
Also, remember to use the Customizer feature to preview all changes. This saves you from having to keep two browsers open while you work through this tutorial (one to work in and one to check how the changes are coming along).
Now that you know the basics of using widgets, the next step is to learn how to configure a number of frequently-used WordPress sidebar widgets.
***
This is the end of section one of this series of tutorials about how to use Widgets.
Click on this link to continue:
***
"These tutorials have so much information and are easy to understand. If you use WordPress or plan to in the future these will help you with everything you need to know." - Valisa (Mesa, Arizona)
***