As we explain in this post, there are many great things about choosing the WordPress CMS platform to manage and grow a business online. One of these is that you can easily add content, expand your website’s functionality, and reconfigure the layout of your website without having any web programming skills and knowledge.
WordPress allows you to easily insert, remove, and reorganize content on your website’s sidebar menu (or 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 like:
- nested page lists
- content categories
- archive
- custom page menus
- links to resources
- posts that you want to promote
- recent comments
- text ads
- testimonials
- surveys
- RSS feed content
- subscriber form
- videos
- social media buttons
- add widgets from other sites (e.g. Facebook friends)
- administrative forms (e.g. login, register, etc.)
(Widgets make managing and using WordPress easier)
To learn more about what WP widgets are, how widgets work and why widgets can make managing your site easier, see this article:
In this step-by-step tutorial series we show you how to use and configure various commonly-used widgets in WordPress.
Using Widgets
Basic Concepts
Before we start configuring and using widgets, it helps to first explain some of the basic concepts about using widgets:
Most WordPress Themes Support Widgetized Layouts
Many WordPress themes support widgets and provide widget-ready sections in the theme’s layout where widgets can be used, such as the sidebar, header area, and footer. Depending on your theme, widgets can sometimes also get added in the content area …
(Many themes offer users multiple widget-ready areas)
These widgetized layouts correspond to a feature inside the Widget administration screen called “Widget Areas” …
(Widget Areas)
Your Widgets Panel
The Widgets area displays all the widgets that you currently have available.
The right-hand section of the window displays your “active” widgets …
(Widgets can be activated or deactivated by dragging and dropping)
Available widgets can be made Active or Inactive by dragging & dropping items to different areas of the screen.
Widgets dragged from the Available Widgets section to widget areas like the sidebar, footer, etc. immediately become active.
Your Widgets area also includes an Inactive Widgets section that lets you remove widgets that you no longer want actively displayed on your website. Inactive widgets do not lose their pre-configured settings.
Rearrange WordPress Widgets With Drag-And-Drop
You can easily add new functionality to your site, and activate, deactivate, reorder and delete things using widgets by dragging and dropping items from the Widgets area …
(Rearrange your site’s widgets using drag and drop)
You can also easily reconfigure the layout of your site’s widgetized layout by using drag-and-drop.
For example, take a look at the image below. In this example site, the widgets have already been configured to show the following:
- A newsletter subscription form,
- A click for support banner, and
- ’Click to call’ buttons from a widgetized WP plugin (i.e. a plugin that adds an accompanying widget to your site) …
(Widgets control how certain features on your site display)
If we take a look inside the Widget area, you would see that the front-end features display on the site’s sidebar section in exactly the same order as their corresponding widgets have been arranged in the back-end widget area …
Let’s now reorganize these widgets in the Active Widget Area by dragging & dropping items …
(Drag-and-drop widgets in your widget area to rearrange their order)
The widget features have now been reordered in the sidebar …
As you can see, this immediately changes the layout of your sidebar.
Rearranging sidebar elements with widgets can improve visitor experience.
Note in the screenshot below that the ‘click to call’ feature (3) is now first the sidebar, and the ‘contact us’ section (2) has been moved to the place above the newsletter sign-up form (1) …
(Rearrange sidebar elements with widgets to improve your site’s user experience)
Removing Widgets From The WordPress Blog Sidebar Navigation Menu
Deleting widgets from your WordPress sidebar navigation area is really easy.
For example, let’s remove the Search widget from your sidebar area …
(Search widget)
To remove an active widget, either expand the widget settings and click the Delete link …
(How to delete a widget)
Or just drag the widget out of the Active Widgets section and into the Inactive Widgets area …
(How to remove your WP widgets)
Repeat this process for any widgets you want removed from the sidebar. You can always restore a widget by dragging it back into the active widgets area.
Widget Settings
Most widgets provide various options that allow you to further configure them. This includes making certain types of information hidden to site visitors but visible to registered users, displaying additional forms, fields, or information, specifying sizes 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 delete the widget from the “Active Widgets” section, close the widget, or click on the triangle to collapse the widget …
(Widget settings)
Some widgets give you little to no configurable options, or they may only allow you to add something like an optional title …
(Some widgets provide users with little to no customization)
Customize Widgets Section
Depending on the WordPress theme you use, you’re also able to preview any changes live without actually making changes to your site. This way, you can be sure that you like your customizations before committing anything to your website.
Widget management is a valuable 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 widgets on the fly using the Widget editor screen.
(preview widget changes live 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 will bring you to the Customizer feature in the backend.
You can do plenty of edits in preview mode (like inserting, deleting and reorganizing your widgets), and it’s all done in real time. If you like what you have done, click the “Save and Publish” button and the changes will be instantly applied and reflected on your site.
(Widget management – work in preview mode)
Once you have saved your changes, the new settings will automatically be added to your site.
Because the WordPress theme you choose determines how elements display on your site, we recommend that you install the theme first before configuring widgets on the sidebar.
Also, remember to use the WordPress Customizer to preview your changes. This will save you from having to keep two browsers open while you work through this tutorial.
Now that you know the basics of using widgets, the next step is to configure various commonly-used WordPress sidebar widgets.
***
This is the end of section one of this series of tutorials.
To view Part 2, click this link:
***
"I love the way your email series "Infinite Web Content Creation Training Series" is documented and presented. It is very absorbing and captivating. The links and tutorials are interesting and educational. This has motivated me to rewrite my content following the concepts I am learning from the email series." - Mani Raju, www.fortuneinewaste.com
***