As we discuss in this post, there are so many great benefits in choosing the WordPress CMS platform for building and managing your website. One of these is that WordPress makes it very easy to add content, expand your website’s functionality, and reconfigure the site’s layout with no code editing skills and knowledge required.
WordPress allows you to easily insert, delete, and rearrange various types of content on your site’s sidebar (or 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:
- pages on your website
- blog categories
- blog post archive
- menus
- links to resources
- links to recent posts
- recent comments from users
- advertisements
- user testimonials
- polls
- content from RSS feeds
- newsletter subscription form
- videos
- social media buttons
- add widgets from other sites (e.g. Pinterest)
- 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 functionality, see this article:
In this step-by-step tutorial we will show you how to use and configure various frequently-used WordPress widgets.
How To Use Widgets In WordPress
The Basics
Before we begin configuring and using widgets, it helps to first cover some of the basic concepts of using widgets:
Most WordPress Themes Support Widget-Ready Areas
Many WordPress themes support widgets and provide widget-ready sections in the theme’s layout where widgets can be used, such as the sidebar navigation area, header area, and footer sections. Depending on your theme, widgets can sometimes also be added below or above the content area …
(Many themes provide a number of widgetized areas)
These widget-ready sections correspond to a feature inside the Widget management panel called “Widget Areas” …
(Widget Areas)
Your Widgets Panel
The Widgets section displays all the widgets you can use on your site.
On the right-hand side of the window, you can see all “active” widgets …
(Activate or deactivate widgets with drag and drop ease)
Available widgets can be activated or deactivated by dragging & dropping items to different areas of the widgets screen.
Widgets dragged from the Available Widgets section to widget areas like your sidebar, footer, etc. become immediately available for use.
In addition, your Widgets area includes an Inactive Widgets section that lets you remove widgets that you no longer want to actively display on your website. Inactive widgets retain their settings.
Reorganize Widgets With Drag-And-Drop
You can easily insert, activate, deactivate, rearrange and remove widgets using drag and drop inside your Widgets section …
(Rearrange widgets on your WordPress site using drag-and-drop)
You can also easily reconfigure your theme’s layout by with drag & drop ease.
For example, take a look at the image below. In this site, the widgets have already been configured to display the following to visitors:
- A newsletter opt-in form,
- A contact support button, and
- ’Click to call’ feature from a widgetized plugin (i.e. a WordPress plugin with an accompanying widget) …
(Widgets control the order certain features on your site display)
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 backend widget section …
Let’s now change these widgets in the Main Sidebar Widget Area using drag & drop …
(Drag and drop widgets in your widget area to rearrange their order)
The widgets have now been reordered in your sidebar …
As you can see, this immediately reorganizes the layout of the site’s sidebar.
Rearranging sidebar layout using widgets can help improve your site’s visitor experience.
Note in the screenshot below that the ‘click to call’ function (3) is now the first item on the sidebar area, and the support image banner (2) is now found above the newsletter opt-in form (1) …
(Reorganize sidebar elements with widgets to improve your site’s visitor experience)
Removing Widgets From The WordPress Blog Sidebar Navigation Area
Removing widgets from your sidebar is very easy.
For example, let’s delete the Search widget from your sidebar …
(WordPress Search widget)
To delete an active widget, you can either open up the widget settings and click the Delete link …
(Deleting widgets)
Or just drag the widget out of the Active Widgets section and into the Inactive Widgets area …
(Remove your WordPress widget)
Repeat this process for any other widgets you want removed from the sidebar. You can always reactivate a widget by dragging it back into the active widgets area.
Widget Settings
Most widgets can be customized. This includes making certain types of information hidden to your 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 expands the item and displays the widget’s settings …
(Toggles expand/collapse widget settings)
When the widget expands, you can change and save your settings, remove the 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 configuration options)
Widget Previews
Depending upon the WordPress theme you choose, you can also customize widgets without actually making changes to your site. This way, you can be sure that you are happy with your customizations before committing anything live to your website or blog.
The ability to manage widgets from within the WordPress dashboard 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 prior to publishing any changes you’ve made (to avoid making mistakes), or change your widgets on the fly using the Widget editor screen.
(Edit widgets in the Customize section)
If you need to make changes to the site while viewing the front-end, just click on the Customize link …
(Customize your site quickly)
This brings you to the Customizer screen in the back-end.
You can do several edits, modifications and adjustments to widgets in preview mode (like inserting, removing and reorganizing your widgets), and this will all be done in real time. If you like what you have done, click the “Save and Publish” button and the changes will then be instantly applied and made visible to your site visitors.
(Widget management – work in preview mode)
Once you have saved the changes, all changes made to widgets will be automatically updated.
Since WordPress Themes can display elements differently on your site, we recommend installing your theme first before configuring widgets.
Also, remember to use the WordPress Customizer to preview your 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 site is coming along).
Now that you know the basics of using widgets, let’s begin configuring a number of frequently-used widgets in WordPress.
***
This is the end of part one of this series of tutorials.
Click here to continue:
***
"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
***