As we’ve explained in this article, there are many great benefits in choosing the WordPress CMS platform to build, manage and grow a web site. One of these is that WordPress makes it very easy to add content, expand your site’s functionality, and reconfigure your site’s layout without requiring any code editing skills and knowledge.
WordPress lets you quickly and easily add, remove, and manage various blocks of content from your website’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:
- page lists
- post categories
- archives
- customized menus
- links to external sites
- links to your recent posts
- user comments
- advertising
- customer testimonials
- polls & surveys
- RSS content
- newsletter subscription form
- image galleries
- social media buttons
- display widgets from other sites (e.g. Amazon)
- administrative forms (e.g. login, register, etc.)
(WordPress widgets help make managing and using WordPress easy)
To learn more about what widgets are, how they work and why they make managing your site easier, go here:
In this step-by-step tutorial we teach you how to use and configure various commonly-used widgets in WordPress.
How To Use WordPress Widgets
The Basics
Before we show you how to configure widgets, let’s review some of the basic concepts about using widgets:
Most WordPress Themes Support Widget-Ready Layouts
Many WordPress themes support widgets and provide sections in the theme’s layout where widgets can appear, such as the sidebar, header area, and footer. Depending on your theme, widgets can sometimes also get added inside the content area …
(Many WordPress themes offer users a number of widgetized sections)
These widgetized areas correspond to a feature inside your Widget administration panel called “Widget Areas” …
(Widget Areas)
The Widgets Panel
The Widgets section displays all the widgets you have available.
On the right-hand side of the screen, you can see all “active” widgets …
(Activate or deactivate widgets using drag and drop)
Available widgets can be made Active or Inactive by dragging-and-dropping items to different sections of the widgets screen.
Widgets dragged from the Available Widgets section to widget areas like the sidebar, footer, etc. become immediately active and available for use.
The Widgets screen also 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 insert, activate, deactivate, reorder and delete things using widgets by dragging and dropping items in your Widgets area …
(Rearrange widgets using drag and drop)
You can also easily reconfigure the order and layout of your website’s widget-ready layout using drag & drop.
For example, in the image below, 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 plugin (i.e. a plugin that adds an accompanying widget to your site) …
(Widgets control the order certain features appear on your WordPress site)
If you look inside the example site’s Widget area, you will see that these features appear on the site in exactly the same order as they have been arranged in the active widget area …
Let’s now rearrange the above widgets in the Widget Area by dragging and dropping items …
(Drag & drop to rearrange widgets in the widget area)
The widget features have now been reorganized in your sidebar navigation area …
This instantly changes the layout of the site’s sidebar.
Reorganizing sidebar elements with widgets can help to improve your site’s user experience.
Note in the screenshot below that the ‘click to call’ function (3) is now the first item on the sidebar navigation menu, and the support image button (2) has been moved to the location above the newsletter sign-up form (1) …
(Rearrange sidebar layout using widgets to improve visitor experience)
Removing Widgets From Your WordPress Sidebar Section
Deleting widgets from your WordPress sidebar area is really 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 …
(How to delete your WordPress widgets)
Or just drag the widget out of the Active Widgets area and into the Inactive Widgets section …
(How to remove your WordPress widgets)
Repeat this process for any other widgets you want removed from your sidebar. You can always reactivate widgets by dragging them back into the active widgets area.
Widget Settings
Most widgets can be customized further. This includes making certain types of information hidden to your site visitors but visible to registered users, displaying additional forms, fields, or data, specifying dimensions of sidebar images, videos, etc.
Click on the little triangle in the corner of a widget to expand the item …
(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 an optional title …
(Some widgets give you little to no customization)
Widget Previews
Depending upon which theme you use, you’re also able to customize your widgets without making actual changes to your site. This way, you can be sure that you are happy with your customizations before committing anything to your website.
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 errors), or manage widgets on the fly using the Widget editor area.
(Edit widgets live in the Customize section)
When viewing your site on the front-end just calick the Customize link in the toolbar …
(Toolbar Customize Link)
This will bring you to the Customizer area in the back-end.
You can do many things to the widgets in preview mode (like adding, deleting and reorganizing your widgets), and see all changes in real time. If you are happy with what you’ve done, click the “Save and Publish” button and your changes will instantly become available to your site visitors.
(Widget management – configure widgets on the fly!)
After saving changes, your new updates will automatically show on your site.
Since the theme you use affect how elements display on your site, we recommend installing your theme first before configuring widgets.
Also, remember to use the Customizer feature to preview all changes. This will save you from having to keep two browsers open while you complete this tutorial (one to work in and one to see the site the way your visitors will see it).
Now that you know the basics of using widgets, it’s time to learn how to configure various frequently-used sidebar widgets in WordPress.
***
This is the end of part one of this series of tutorials on how to use Widgets.
Click here to continue:
***
"I was absolutely amazed at the scope and breadth of these tutorials! The most in-depth training I have ever received on any subject!" - Myke O'Neill, DailyGreenPost.com
***