As we have discussed in this post, one of the many benefits of choosing WordPress is that WordPress makes it very easy to add content, enhance your website, or reorganize the site’s layout with no web coding skills and knowledge required.
WordPress gives you the ability to easily add, remove, and manage content in your site’s sidebar area (or header and footer sections too, depending on what theme is installed on the site) using widgets.
Once you know how to use widgets, you can easily add things to your site like:
- nested list of pages
- post categories
- archives
- custom menus
- links to external sites
- most popular posts
- post comments
- clickable images
- customer testimonials
- surveys
- RSS feed items
- newsletter registration form
- product catalog images
- Facebook feeds
- display widgets from other sites (e.g. StumbleUpon)
- administrative forms (e.g. login, register, etc.)
(Widgets help make managing and using WordPress easy)
To learn more about what WP widgets are, how widgets work and why widgets make managing your site easier, see this article:
In this tutorial series we teach you how to use and configure a number of commonly-used WordPress widgets.
How To Use WordPress Widgets
Widgets – The Basics
Before we begin configuring and using widgets, let’s explain some of the basic concepts of how to use widgets:
Most WordPress Themes Support Widget-Ready Areas
Many WordPress themes support widgets and provide sections in the theme’s layout where widgets can be added, such as the sidebar, header area, and the footer area. Depending on your theme, widgets can also be used in the content area …
(Many themes offer users multiple widget sections)
These widgetized sections correspond to a feature inside the Widget management area called “Widget Areas” …
(Widget Areas)
The Widgets Screen
The Widgets area displays a list of all the widgets you have available.
On the right-hand side of the window, you can see all “active” widgets …
(Widgets can be activated or deactivated with drag & drop ease)
Available widgets can be made Active or Inactive using drag-and-drop.
Widgets dragged from the Available Widgets section to widget areas like your sidebar, footer, etc. instantly become active and available for use on your site.
Your Widgets panel also includes an Inactive Widgets section that lets you remove any widgets that you no longer want actively displayed on your site. Inactive widgets do not lose their pre-configured settings.
Reorganize Widgets Using Drag-And-Drop
You can easily add functionality to your site, or activate, deactivate, rearrange and delete things using widgets using simple drag & drop in the Widgets section …
(Rearrange widgets on your WordPress site using drag-and-drop)
You can also easily rearrange your theme’s layout using drag & drop.
For example, take a look at the image below. In this site, the widgets have already been configured to display things on your site like:
- A subscription form,
- A contact support button, and
- ’Click to call’ feature from a widgetized plugin (i.e. a plugin that adds an accompanying widget to your site) …
(Widgets control how certain features display on your site)
If you take a look inside the example site’s Widget area, you will see that these features display on the site’s sidebar area in the same order as they have been arranged in the active widget section …
If we reorganize these widgets in the Active Widget Area using drag-and-drop …
(Drag and drop to rearrange widgets in your widget area)
The widgets have now been reorganized in your sidebar menu …
As you can see, this immediately reorganizes the order of items in the site’s sidebar.
Reorganizing sidebar layout using widgets can help improve visitor experience.
Note in the screenshot below that the ‘click to call’ feature (3) is now at the top of the sidebar area, and the ‘contact us’ banner (2) has been moved to the place above the newsletter sign-up form (1) …
(Rearrange sidebar layout with widgets to improve your site’s visitor experience)
Deleting Widgets From The WordPress Blog Sidebar
Deleting widgets from the sidebar area is very easy.
For example, let’s delete the Search widget from your sidebar …
(Search widget)
To remove an active widget, you can either open up the widget settings and click the Delete link …
(Delete a widget)
Or just drag the widget out of the Active Widgets area and into the Inactive Widgets section …
(Remove a widget)
Repeat this process for all widgets you want to remove from the sidebar. You can always reinstate widgets by dragging them back into the active widgets area.
Widget Settings
Most widgets offer a number of options that allow you to further configure your site features. This can include things like making certain types of information hidden to site visitors but visible to registered 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 toggles between expanding and collapsing the item and displays the widget’s settings …
(Toggling expands/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 may require or offer no customization, or they may only allow you to add an optional title …
(Some widgets offer little to no configuration options)
WordPress Theme Customizer
Depending on which theme you have installed, you can also manage and customize 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.
The ability to manage widgets from within the dashboard is a great 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 before publishing changes (to avoid making errors), or change widgets on the fly using the Widget editor area.
(preview widget changes in the Customize feature)
When viewing your site on the front-end just calick the Customize link in the toolbar …
(Customize your site quickly)
This will bring you to the Customizer feature in the backend.
You can do plenty of edits and adjustments to the widgets in preview mode (like inserting, deleting and moving widgets around), and see all changes in real time. If you like the results, click the “Save and Publish” button and your changes will instantly become visible to your site visitors.
(Widget management – configure widgets on the fly!)
As soon as your changes are saved, WordPress will automatically update the widget settings and display your new configuration to your site visitors.
Because the WordPress theme you choose 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 will save you from having to keep two browsers open while you work through 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, the next step is to configure a number of commonly-used widgets in WordPress.
***
This is the end of part 1 of this tutorial.
Click here to continue:
***
"Your training is the best in the world! It is simple, yet detailed, direct, understandable, memorable, and complete." Andrea Adams, FinancialJourney.org
***