As we’ve discussed in this article, one of the many benefits of using the WordPress web publishing application for building, managing and growing a business online is that you can easily add content, expand your website’s functionality, and reorganize the layout of your website with no web coding skills required.
WordPress allows you to easily add, delete, and manage various blocks of content on your website’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 WordPress theme you have installed) like:
- nested list of your web pages
- site categories
- post archives
- custom menus
- links to external sites
- links to recent posts
- comments
- clickable ad banners
- customer testimonials
- polls & surveys
- content from RSS feeds
- subscriber form
- video thumbnails
- Facebook feeds
- display widgets from external sites (e.g. Facebook)
- administrative forms (e.g. login, register, etc.)
(WordPress widgets make managing and using WordPress easy)
To learn more about what widgets are, how they work and why widgets make managing your site easier, go here:
In this step-by-step tutorial we will show you how to use and configure a number of frequently-used widgets in WordPress.
Using Widgets
What You Need To Know First
Before configuring and using widgets, it helps to first go over some of the basics about how to use widgets:
Most WordPress Themes Support Widgetized Areas
Most WordPress themes support widgets and provide widgetized sections in your theme’s layout where widgets can be added, such as the sidebar area, header area, and the footer area. Depending on what theme you are using, widgets can sometimes also get added inside the content area …
(Many WordPress themes provide a number of widget-ready sections)
These widget-ready layouts correspond to a feature inside the Widget management area called “Widget Areas” …
(Widget Areas)
Widgets Panel
The Widgets screen displays all the widgets that are currently available for use on your site.
The right-hand section of the window displays the “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 widgets panel.
Widgets dragged from the Available Widgets section to widget areas like your sidebar, footer, etc. become immediately activated for use on your site.
In addition, your Widgets screen includes an Inactive Widgets section that lets you remove widgets that you no longer want to actively display on your site. Inactive widgets do not lose their pre-configured settings.
Rearrange WordPress Widgets Using Drag And Drop
You can easily add, activate, deactivate, reorder and delete widgets just by dragging and dropping items from the Widgets area …
(Rearrange your site’s widgets using drag-and-drop)
You can also easily reconfigure your theme’s layout with drag and drop ease.
For example, in the image below, the widgets have already been configured to display the following to visitors:
- An opt-in form,
- A click for support banner, and
- A ‘click to call’ feature from a widgetized plugin (i.e. a WordPress plugin with an accompanying widget) …
(Widgets control the order certain features display on your site)
Inside the Widget area, you would see that the front end features display on the site in exactly the same order as they have been arranged in the active widget section …
Let’s now reorganize these widgets in the Active Widget Area using drag & drop …
(Drag and drop to rearrange widgets in your widget area)
The widget features have now been reorganized in your sidebar …
As you can see, this immediately changes the layout of your site’s sidebar.
Rearranging sidebar elements with widgets can help to improve your site’s user experience.
Note in the screenshot below that the ‘click to call’ feature (3) is now the first item on the sidebar, and the support section (2) has been moved to the location above the newsletter sign-up form (1) …
(Reorganizing sidebar layout using widgets can improve user experience)
Removing Widgets From The Sidebar Menu
Deleting widgets from your sidebar is very easy.
For example, let’s show you how to delete the Search widget from your sidebar …
(Search widget)
To delete a widget from an active Widget area, you can either expand the widget and click the Delete link …
(Delete a widget)
Or just drag the widget out of the Active Widgets area and drop it into the Inactive Widgets section …
(Remove a WordPress widget)
Repeat this process for all widgets you want to remove from the sidebar. You can always reactivate widgets by moving them back into the active widgets area.
Widget Settings
Many widgets can be customized further. This can include things like making certain types of information hidden to your site visitors but visible to registered 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 widget’s settings …
(Toggling expands/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 provide users with little to no configurable options, or they may only allow you to add an optional title …
(Some widgets give you little to no customization)
Widget Customizer Section
Depending on which theme you have installed, you’re also able to manage your widgets without making actual changes to your site. This way, you can be sure that you are happy with your customizations before making any permanent changes to your site.
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 changes (to avoid making mistakes), or change your 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 …
(Customize link in the toolbar)
This brings you to the Customizer area in the back-end.
You can do many edits, modifications and adjustments in preview mode (like adding, removing and reorganizing your widgets), and see all changes in real time. If you like what you’ve done, click the “Save and Publish” button and your changes will instantly become visible on your site.
(Widget management – work in preview mode)
Once your changes have been saved, all changes made to widgets will be automatically updated.
Since the WordPress theme you choose can affect 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 saves you from having to keep two browsers open while you work through this tutorial (one to work in and one to check how your 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 section one of this tutorial series.
To view Part Two, click this link:
***
"This is an awesome training series. I have a pretty good understanding of WordPress already, but this is helping me to move somewhere from intermediate to advanced user!" - Kim Lednum
***