As we have discussed in this post, one of the many benefits of using WordPress to manage your web presence is that you can easily add content, improve your site’s functionality, and redesign the layout of your site without web coding skills required.
WordPress gives you the ability to quickly and easily insert, remove, and rearrange various blocks of content in your blog’s sidebar navigation menu (and header and footer sections too, 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’s sidebar area (plus headers and footers and other areas, depending on the theme) like:
- list of your web pages
- blog categories
- post archives
- custom menus
- links to external sites
- posts that you want to promote
- recent comments from users
- clickable text ads
- customer testimonials
- poll results
- RSS content excerpts
- newsletter registration form
- videos
- social media sharing buttons
- add widgets from other sites (e.g. Amazon)
- administrative forms (e.g. login, register, etc.)
(Widgets help make managing and using WordPress easy)
To learn more about what widgets are, how widgets work and how using widgets can help you expand your site’s capabilities, see this article:
In this step-by-step tutorial series we will show you how to use and configure a number of commonly-used widgets in WordPress.
How To Use Widgets In WordPress
What You Need To Know First
Before we begin configuring and using widgets, it helps to first go over some of the basics of how to use widgets:
Most WordPress Themes Support Widgetized Areas
Most WordPress themes support widgets and provide widget-ready sections in the theme’s layout where widgets can be added to, such as the sidebar navigation section, header area, and the footer area. Depending on your theme, widgets can sometimes also get added in the content area …
(Many WP themes provide a number of widget-ready areas)
These widget-ready layouts correspond to a feature inside the Widget management area called “Widget Areas” …
(Widget Areas)
Widgets Panel
The Widgets area 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 all “active” widgets …
(Activate or deactivate widgets with drag & drop ease)
Available widgets can be made Active or Inactive by dragging & dropping items to different areas of the panel.
Widgets dragged from the Available Widgets section to widget areas like your sidebar, footer, etc. immediately become activated for use on your site.
Your Widgets panel also includes an Inactive Widgets section that lets you remove any widgets that you no longer want on your website. Inactive widgets do not lose their pre-configured settings.
Reorganize Widgets With Drag And Drop
You can easily add new functionality to your site, and activate, deactivate, reorder and remove widgets by dragging and dropping items in your Widgets area …
(Rearrange widgets using drag and drop)
You can also easily rearrange your theme’s layout by with drag and drop ease.
For example, in the image below, the widgets have already been configured to show the following:
- A subscription form,
- A click for support banner, and
- ’Click to call’ buttons from a widgetized plugin (i.e. a plugin with an accompanying widget) …
(Widgets control how 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 screen …
Let’s now rearrange the order of the above widgets in the Widget Area by dragging & dropping some things around …
(Drag & drop to rearrange widgets in the widget area)
The widgets have now been reordered in the sidebar area …
This immediately reorganizes the layout of the sidebar.
Reorganizing sidebar elements with widgets can improve your site’s visitor experience.
Note in the screenshot below that the ‘click to call’ feature (3) is now first the sidebar, and the support graphic banner (2) is now placed above the newsletter opt-in form (1) …
(Reorganize sidebar elements with widgets to improve user experience)
Removing Widgets From Your WordPress Sidebar
Deleting widgets from your sidebar area is really easy.
For example, let’s remove the Search widget from the sidebar navigation menu …
(Search widget)
To delete an active widget, you can either open up the widget settings and click the Delete link …
(Delete widgets)
Or just drag the widget out of the Active Widgets section and drop it into the Inactive Widgets area …
(Removing your widgets)
Repeat this process for all widgets you want removed from your sidebar. You can always restore a widget by dragging it back into the active widgets area.
Widget Settings
Many widgets can be further customized. This includes hiding information from users (but allowing access to registered 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 widget’s settings …
(Toggle to expand/collapse widget settings)
When the widget expands, you can change and save your settings, click Delete to remove your widget from the “Active Widgets” section, close the widget, or click on the triangle to collapse the widget …
(Widget settings)
Some widgets may require or offer no customization, or they may only allow you to add something like an optional title …
(Some widgets give you little to no configurable options)
Preview Your Widgets
Depending upon the theme you use, you’re also able to preview any changes live without making actual changes to your site. This way, you can be sure that you are happy with your customizations before making any permanent changes to your website.
Widget management is a great 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 any changes you’ve made (to avoid making mistakes), or manage your widgets on the fly using the Widget editor screen.
(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 your site quickly)
This brings you to the Customizer section in the backend.
You can do many edits to your widgets in preview mode (like adding, deleting and reorganizing your widgets), and it’s all done in real time. If you are happy with the results, click the “Save and Publish” button and the changes will instantly become visible to your site visitors.
(Widget management – configure widgets on the fly!)
After saving changes, your site will automatically update the widget settings and display your new configuration to your site visitors.
Since the WordPress theme you use determines how elements display on your site, we recommend installing your theme first before configuring widgets on your sidebar menu.
Also, remember to use the WordPress Customizer to preview your changes. This saves you from having to keep two browsers open while you go through this tutorial (one to work in and one to check how your 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 commonly-used WordPress sidebar widgets.
***
This is the end of section 1 of this series of tutorials.
To view the rest of this tutorial series, click here:
***
"Your training is the best in the world! It is simple, yet detailed, direct, understandable, memorable, and complete." Andrea Adams, FinancialJourney.org
***