As we discuss in this article, there are many great benefits in using the WordPress CMS platform for building, managing and growing your website or blog. One of these is that you can easily add content, expand your website’s functionality, and rearrange the layout of your website without coding skills and knowledge required.
WordPress allows you to quickly and easily insert, delete, and manage content from your site’s sidebar (and header and footer sections too, depending on what theme you use) 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 you have installed) like:
- site pages
- site categories
- archived blog posts
- custom page menus
- links to external sites
- links to recent posts
- user comments
- advertising banners
- user testimonials
- poll results
- RSS feed content
- shopping cart information
- image galleries
- social media buttons
- add widgets from external sites (e.g. affiliate programs)
- 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 widgets make managing your site easier, go here:
In this step-by-step tutorial series we show you how to use and configure a number of commonly-used widgets in WordPress.
Using Widgets
The Basics
Before we show you how to configure widgets, let’s go over some of the basic concepts about how to use widgets:
Most WordPress Themes Support Widgetized Areas
Many WordPress themes support widgets and provide built-in sections in the theme’s layout where widgets can be added to, such as the sidebar navigation menu, header area, and footer. Depending on the theme, widgets can sometimes also get added inside the content area …
(Many WP themes provide a number of widgetized areas)
These widget-ready areas correspond to a feature inside your Widget management screen called “Widget Areas” …
(Widget Areas)
The Widgets Panel
The Widgets screen displays a list of all the widgets that you currently have available.
On the right-hand side of the screen, you can see your “active” widgets …
(Activate or deactivate widgets with drag and drop ease)
Available widgets can be activated or deactivated by dragging & dropping items to different sections of the screen.
Widgets dragged from the Available Widgets section to widget areas like your sidebar, footer, etc. become active and can be used for their purpose.
In addition, your Widgets panel includes an Inactive Widgets section that lets you remove widgets that you no longer want on your website. Inactive widgets retain their settings.
Reorganize Widgets Using Drag-And-Drop
You can easily insert, activate, deactivate, reorder and remove things using widgets just by dragging and dropping items from the Widgets area …
(Rearrange widgets using drag-and-drop)
You can also easily rearrange your theme’s layout using drag and drop.
For example, in the image below, the widgets have already been configured to display things like:
- A subscription form,
- A click for support banner, and
- ’Click to call’ feature from a widgetized plugin (i.e. a plugin with an accompanying widget) …
(Widgets control how certain features display on your WordPress site)
If we look inside this site’s Widget area, you will see that these features correspond to the order of widgets inside the active widget section …
Let’s now rearrange these widgets in the Main Sidebar Widget Area using drag and drop …
(Drag and drop widgets in your widget area to rearrange their order)
The widget features have now been reordered in the sidebar …
This instantly reorganizes the layout of the site’s sidebar.
Reorganizing sidebar elements using widgets can help to improve visitor experience.
Note in the screenshot below that the ‘click to call’ feature (3) is now first the sidebar navigation area, and the support graphic banner (2) now sits above the newsletter sign-up form (1) …
(Rearrange sidebar elements with widgets to improve visitor experience)
Deleting Widgets From The WordPress Blog Sidebar Area
Removing widgets from your sidebar area is very easy.
For example, let’s show you how to delete the Search widget from the sidebar …
(Search widget)
To remove an active widget, either open up the widget and click the Delete link …
(Deleting your widget)
Or just drag the widget out of the Active Widgets area and drop it into the Inactive Widgets section …
(How to remove widgets)
Repeat this process for any widgets you want to remove from the sidebar. You can always reactivate widgets by moving them back into the active widgets area.
Widget Settings
Most widgets can be customized. This can include things like 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, 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 may require or offer no customization, or they may only allow you to add something like an optional title …
(Some widgets provide users with little to no configuration options)
Preview Widgets
Depending on which theme you have installed on your site, you’re also able to preview any changes live without making actual 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.
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 prior to publishing any changes you’ve made (to avoid making mistakes), or configure widgets on the fly using the Widget editor screen.
(Edit widgets in the Customize feature)
If you need to make changes to the site while viewing the frontend, just click on the Customize link …
(Toolbar Customize Link)
This brings you to the Customizer screen in the back-end.
You can do several edits, modifications and adjustments in preview mode (like adding, deleting and moving widgets around), and it will all be done in real time. If you are happy with what you’ve done, click the “Save and Publish” button and the changes will be instantly applied and reflected on the site’s frontend.
(Widget management – work in preview mode)
After saving the changes, your new settings will automatically show on your site.
Because the WordPress theme you use tend to affect how elements display on your site, we recommend that you install your theme first before configuring widgets on your sidebar section.
Also, remember to use the Customizer feature to preview your changes. This will save you from having to keep two browsers open while you go through this tutorial.
Now that you know the basics of using widgets, the next step is to start configuring various commonly-used sidebar widgets in WordPress.
***
This is the end of part one of this tutorial.
To view the rest of this tutorial series, click here:
***
"If you're new to WordPress, this can stand on its own as a training course and will stay with you as you progress from beginner to advanced and even guru status." - Bruce (Columbus, Ohio)
***