As we explain in this article, one of the many great benefits of using WordPress is that you can easily add content, enhance your site’s functionality, and reconfigure the layout of your site without web coding skills required.
WordPress lets you easily add, remove, and manage various blocks of content from your site’s sidebar (or header and footer sections too, depending on what theme you are using) using widgets.
Once you know how to use widgets, you can easily add things to your site like:
- nested page lists
- site categories
- archives
- customized menus
- links to resources
- most read posts
- recent comments from users
- image banners
- testimonials
- poll questions & results
- RSS content excerpts
- registration box
- product catalog images
- Facebook feeds
- display widgets from external sites (e.g. Facebook)
- administrative forms (e.g. login, register, etc.)
(WordPress widgets make managing and using WordPress easier)
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 step-by-step tutorial series you will learn how to use and configure a number of frequently-used WordPress widgets.
How To Use Widgets In WordPress
Basic Concepts
Before we show you how to configure widgets, it helps to first make sure that you understand some of the basic concepts of using widgets:
Most WordPress Themes Support Widgetized Areas
Most WordPress themes support widgets and provide widget-ready sections in the theme’s layout where you can add widgets, such as the sidebar navigation menu, header area, and footer sections. Depending on the theme, widgets can sometimes also display inside the content area …
(Many WordPress themes offer users multiple widget-enabled areas)
These widget-ready sections correspond to a feature inside the Widget administration panel called “Widget Areas” …
(Widget Areas)
The Widgets Screen
The Widgets section displays all the widgets that you currently have available.
On the right-hand side of the window, you can see the “active” widgets …
(Widgets can be activated or deactivated using drag-and-drop)
Available widgets can be activated or deactivated by dragging-and-dropping items to different areas of the screen.
Widgets dragged from the Available Widgets section to widget areas like your sidebar, footer, etc. immediately become active and available for use.
Your Widgets area also includes an Inactive Widgets section that lets you remove widgets that you no longer want to use on your site. Inactive widgets retain their pre-configured settings.
Reorganize Widgets With Drag And Drop
You can easily add, activate, deactivate, reorder and delete widgets just by dragging and dropping items inside the Widgets area …
(Rearrange widgets on your WordPress site using drag-and-drop)
You can also easily reconfigure your theme’s layout by using drag-and-drop.
For example, in the image below, the widgets have already been configured to show the following:
- A subscription form,
- A click for support button, and
- A ‘click to call’ section from a widgetized plugin (i.e. a plugin that adds an accompanying widget to your site) …
(Widgets control the order certain features display on your site)
If we 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 reorganize the above widgets in the Widget Area by dragging & dropping some things around …
(Drag-and-drop widgets in your widget area to rearrange their order)
The widgets have now been reorganized in your sidebar …
This immediately reorganizes the order of items in the sidebar.
Reorganizing sidebar elements with widgets can improve visitor experience.
Note in the screenshot below that the ‘click to call’ function (3) is now the first item on the sidebar, and the ‘contact us’ section (2) can now be found above the newsletter sign-up form (1) …
(Reorganizing sidebar layout with widgets can improve user experience)
Deleting Widgets From The WordPress Sidebar Area
Deleting widgets from your sidebar section is really easy.
For example, let’s delete the Search widget from the sidebar …
(Search widget)
To remove a widget from an active Widget area, you can either open up the widget and click the Delete link …
(How to delete a widget)
Or just drag the widget out of the Active Widgets area and drop it into the Inactive Widgets section …
(Removing your WordPress widget)
Repeat this process for any widgets you want to remove from your sidebar. You can always reinstate widgets by dragging them back into the active widgets area.
Widget Settings
Many widgets offer various settings that allow you to further customize things. This can include things like hiding information from users, displaying additional forms, fields, or data, specifying sizes of sidebar images, videos, etc.
Click on the little triangle in the corner of a widget to display the settings for that widget …
(Toggling expands/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 offer little to no customizing 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 the WordPress theme you are using, you can also manage and customize your widgets without actually making changes to your site. This way, you can be sure that you are happy with what you have done before committing anything live to your site.
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 your widget content will appear before publishing any changes you’ve made (to avoid making mistakes), or change your widgets on the fly using the Widget editor screen.
(Edit widgets live in the Customize feature)
If you need to make changes to the site while viewing the frontend, just click on the Customize link …
(Customize your site quickly)
This brings you to the Customizer section in the backend.
You can do a number of modifications and adjustments to your widgets in preview mode (like adding, deleting and moving widgets around), and see all changes in real time. If you are happy with what you have done, click the “Save and Publish” button and the changes will instantly become visible on your site to visitors.
(Widget management – configure widgets on the fly!)
Once you have saved the changes, all changes made to widgets will be automatically updated.
Since the WordPress theme you use affect how elements display on your site, we recommend that you install the theme first before configuring widgets on the sidebar section.
Also, remember to use the Customizer feature to preview your changes. This saves you from having to keep two browsers open while you go through this tutorial.
Now that you know the basics of using widgets, let’s begin configuring various frequently-used WordPress sidebar widgets.
***
This is the end of part 1 of this tutorial.
To view Part 2, click this link:
***
"This is AMAZING! I had learnt about how to use WordPress previously, but this covers absolutely everything and more!! Incredible value! Thank you!" - Monique, Warrior Forum
***