As we explain in this article, one of the many great benefits of using WordPress to manage your website or blog is that you can easily add content, improve your site’s functionality, and change the layout of your website without web coding skills required.
WordPress gives you the ability to quickly and easily insert, delete, and control various types of content from your website’s sidebar (or header and footer sections too, depending on your theme) 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 your theme) like:
- index of pages
- blog post categories
- archived blog post entries
- menus that display only the pages you choose
- links to resources
- your most popular posts
- excerpts of recent comments added to your posts
- clickable ad banners
- testimonials
- survey results
- RSS content
- shopping cart forms
- video galleries
- twitter feeds
- add widgets from other sites (e.g. Facebook friends)
- administrative forms (e.g. login, register, etc.)
(Widgets help make managing and using WordPress easier)
To learn more about what WordPress widgets are, how widgets work and why they make managing your site easier, see this article:
In this step-by-step tutorial series we explain how to use and configure a number of commonly-used WordPress widgets.
Using Widgets
Widgets – The Basics
Before we begin configuring and using widgets, it helps to first go over some of the basics about using widgets:
Most WordPress Themes Support Widget-Ready Layouts
Most WordPress themes support widgets and provide widget-ready sections in your theme’s layout where widgets can be added, such as the sidebar, header area, and footer. Depending on the theme installed on your site, widgets can sometimes also get added inside the content area …
(Many WordPress themes offer users multiple widget-enabled sections)
These widgetized layouts 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 are available.
On the right-hand side of the screen, you can see all “active” widgets …
(Activate or deactivate widgets by dragging and dropping)
Available widgets can be activated or deactivated by dragging & dropping items to different sections of the widgets screen.
Widgets dragged from the Available Widgets section to widget areas like the sidebar, footer, etc. become immediately active.
The Widgets area also includes an Inactive Widgets section that lets you remove any widgets that you no longer want to actively display on your website. Inactive widgets do not lose their settings.
Reorganize WordPress Widgets With Drag & Drop
You can easily add, activate, deactivate, reorder and remove things using widgets by dragging and dropping items from the Widgets area …
(Rearrange your site’s widgets using drag and drop)
You can also easily rearrange the order of your website’s widget-ready sections by dragging and dropping widgets.
For example, take a look at the image below. In this example site, the widgets have already been configured to show the following:
- An opt-in form,
- A contact support button, and
- ’Click to call’ feature from a widgetized WordPress plugin (i.e. a plugin with an accompanying widget) …
(Widgets control the order certain features on your site appear)
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 …
If we rearrange the order of these widgets in the Active Widget Area using drag and drop …
(Drag and drop widgets in the widget area to rearrange their order)
The widgets have now been reordered in the sidebar navigation menu …
As you can see, this immediately reorganizes the layout of your site’s sidebar.
Rearranging sidebar layout using widgets can help to 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’ image banner (2) is found above the newsletter opt-in form (1) …
(Reorganizing sidebar elements using widgets can help improve visitor experience)
Deleting Widgets From The WordPress Sidebar
Removing widgets from your sidebar is very easy.
For example, let’s show you how to remove the Search widget from your sidebar …
(Search widget)
To remove an active widget, you can either open up the widget settings and click the Delete link …
(Delete a WP widget)
Or just drag the widget out of the Active Widgets area and into the Inactive Widgets section …
(How to remove widgets)
Repeat this process for all widgets you want to remove from the sidebar navigation section. You can always reinstate widgets by dragging them back into the active widgets area.
Widget Settings
Many widgets can be customized further. 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 the widget …
(Toggle to expand/collapse widget settings)
When the widget expands, you can change and save your settings, 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 give you little to no customizing options)
Widget Previews
Depending on which WP theme you have installed on your site, you can also preview any changes live without actually making changes to your site. This way, you can be sure that you like the customized edits before committing anything live to your website or blog.
The ability to manage widgets inside your dashboard 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 before publishing any changes you’ve made (to avoid making errors), or manage your widgets on the fly using the Widget editor area.
(Edit widgets in the Customize feature)
If you need to make changes to your site while viewing the front-end, just click on the Customize link …
(Customize link in the toolbar)
This brings you to the Customizer screen in the backend.
You can do several edits to widgets in preview mode (like inserting, 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 your changes will instantly become available on your site to visitors.
(Widget management – work in preview mode)
After saving the changes, the new updates will automatically show on your site.
Because the WordPress theme you choose determines how elements display on your site, we recommend that you install your theme first before configuring widgets.
Also, remember to use the Customizer feature to preview your changes. This will save you from having to keep two browsers open while you complete 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, let’s configure various frequently-used WordPress sidebar widgets.
***
This is the end of section 1 of this tutorial series.
Click here to view Part Two:
***
"I was absolutely amazed at the scope and breadth of these tutorials! The most in-depth training I have ever received on any subject!" - Myke O'Neill, DailyGreenPost.com
***