As discussed in this post, there are loads of great benefits in choosing the WordPress web publishing tool to build and manage a website. One of these is that you can easily add content, enhance your website, or reconfigure the site’s layout without requiring any web coding skills.
WordPress lets you easily add, delete, and rearrange content in your website’s sidebar (and header and footer sections too, depending on what theme you have installed) using widgets.
Once you know how to use widgets, you can easily add things to your site like:
- page lists
- blog categories
- archives
- menus displaying only selected pages
- links to external sites
- posts that you want to promote
- excerpts of recent comments added to your posts
- advertising banners
- quotations
- polls
- content from RSS feeds
- shopping cart information
- product catalog images
- Facebook feeds
- display widgets from other sites (e.g. Amazon)
- administrative forms (e.g. login, register, etc.)
(WordPress widgets help make managing and using WordPress easier)
To learn more about what widgets are, how they work and why widgets make managing your site easier, go here:
In this step-by-step tutorial we teach you how to use and configure a number of commonly-used WordPress widgets.
How To Use Widgets In WordPress
What You Need To Know First
Before we show you how to configure widgets, it helps to first review some of the basic concepts about how to use widgets:
Most WordPress Themes Support Widgetized Layouts
Most WordPress themes support widgets and provide sections in the theme’s layout where widgets can be used, such as the sidebar, header area, and footer. Depending on the theme installed on your site, widgets can also appear inside the content area …
(Many WordPress themes offer users a number of widget-enabled sections)
These widgetized layouts correspond to a feature inside the Widget screen called “Widget Areas” …
(Widget Areas)
Your Widgets Panel
The Widgets screen displays all the widgets that can be used on your site.
The right-hand section of the screen displays all “active” widgets …
(Widgets can be activated or deactivated with drag & drop ease)
Available widgets can be made Active or Inactive using drag & drop.
Widgets dragged from the Available Widgets section to widget areas like your sidebar, footer, etc. become active on your site.
In addition, the Widgets panel includes an Inactive Widgets section that lets you remove any widgets that you no longer want to actively display on your website. Inactive widgets retain their pre-configured settings.
Reorganize WordPress Widgets With Drag-And-Drop
You can easily add, activate, deactivate, reorder and remove things using widgets by dragging and dropping items in your Widgets section …
(Rearrange your site’s widgets using drag & drop)
You can also easily reorder your theme’s layout using drag & drop.
For example, take a look at the image below. In this example site, the widgets have already been configured to display things on your site like:
- An opt-in form,
- A contact support banner, and
- ’Click to call’ buttons from a widgetized plugin (i.e. a plugin that adds an accompanying widget to your site) …
(Widgets control how certain features display on your site)
If we look inside this site’s Widget area, you will see that these features display on the site’s sidebar section in the same order as they are arranged in the active widget section …
Let’s now change the order the above widgets in the Widget Area by dragging and dropping some things around …
(Drag & drop widgets in the widget area to rearrange their order)
The widget features have now been reordered in your sidebar …
This immediately reorganizes the order of items in your sidebar.
Reorganizing sidebar layout using widgets can help improve user experience.
Note in the screenshot below that the ‘click to call’ function (3) is now first the sidebar navigation section, and the ‘contact us’ banner (2) has been moved to the spot above the newsletter opt-in form (1) …
(Rearrange sidebar elements with widgets to improve your site’s visitor experience)
Deleting Widgets From Your WordPress Blog Sidebar
Deleting widgets from your sidebar section is very easy.
For example, let’s delete the Search widget from the sidebar area …
(WordPress Search widget)
To remove a widget from an active Widget area, either open up the widget and click the Delete link …
(Delete your WordPress widget)
Or just drag the widget out of the Active Widgets area and drop it into the Inactive Widgets area …
(How to remove your WordPress widget)
Repeat this process for any widgets you want to remove from your sidebar. You can always reactivate widgets by dragging them back into the active widgets area.
Widget Settings
Many widgets can be customized further. This can include things like making certain types of information hidden to site visitors but visible to registered users, displaying additional forms, fields, or information, specifying dimensions of sidebar images, videos, etc.
Clicking on the little triangle in the corner of a widget toggles between expanding and collapsing the item and displays the widget’s settings …
(Toggles 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 settings …
(Widget settings)
Some widgets offer little to no configurable options, or they may only allow you to add something like an optional title …
(Some widgets offer little to no customizing options)
Widget Customizer Section
Depending upon which theme you have installed on your site, you can also manage and customize your widgets without actually making changes to your site. This way, you can be sure that you like the customized edits before making any permanent changes to your website or blog.
The ability to manage widgets inside the 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 widget content will appear before publishing changes (to avoid making errors), or configure widgets on the fly using the Widget editor screen.
(preview widget changes 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 area in the backend.
You can do many edits to widgets in preview mode (like adding, removing and reorganizing your widgets), and it will all be done in real time. If you are happy with what you have done, click the “Save and Publish” button and the changes will then be instantly updated and reflected on your site to visitors.
(Widget management – configure widgets on the fly!)
After saving changes, the new updates will automatically show on your site.
Because the WordPress theme you choose tend to affect how elements display on your site, we recommend that you install your theme first before configuring widgets.
Also, remember to use the WordPress Customizer 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 site is coming along).
Now that you know the basics of using widgets, let’s start configuring various commonly-used WordPress widgets.
***
This is the end of section one of this series of tutorials about using WordPress widgets.
To continue, click this link:
***
"Learning WordPress has been a huge stumbling block for me. I've been looking for something that covers absolutely everything but doesn't cost an arm and a leg. Thank you so much ... you have just provided me with what I have been looking for! Truly appreciated!" - Tanya
***