As we have discussed in this post, one of the many benefits of choosing the WordPress CMS platform is that you can easily add content, enhance your site, and reconfigure the layout of your site without the need to have coding skills or knowledge.
WordPress gives you the ability to quickly and easily add, delete, and reorganize various types of content from your site’s sidebar navigation menu (or header and footer sections, depending on your theme) 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:
- list of your web pages
- content categories
- archives
- custom page menus
- links to external sites
- links to your recent posts
- user comments
- advertising
- testimonials
- polls
- RSS feed content
- newsletter registration form
- images
- twitter feeds
- display widgets from other sites (e.g. Facebook)
- administrative forms (e.g. login, register, etc.)
(Widgets help make managing and using WordPress easier)
To learn more about what widgets are, how widgets work and why they make managing your site easier, see this article:
In this tutorial you are going to learn how to use and configure various frequently-used widgets in WordPress.
Using Widgets In WordPress
What You Need To Know First
Before configuring and using widgets, let’s review some of the basics of using widgets:
Most WordPress Themes Support Widget-Ready Areas
Most WordPress themes support widgets and provide built-in widgetized areas in your theme’s layout where widgets can be added, such as the sidebar navigation area, header area, and the footer area. Depending on the theme installed on your site, widgets can sometimes also show up inside the content area …
(Many WP themes provide multiple widgetized areas)
These widgetized layouts correspond to a feature inside the Widget administration panel called “Widget Areas” …
(Widget Areas)
Your Widgets Screen
The Widgets panel displays all the widgets that are currently available for use on your site.
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 areas of the screen.
Widgets dragged from the Available Widgets section to widget areas like your sidebar, footer, etc. automatically become active and available for use.
The Widgets screen also includes an Inactive Widgets section that lets you remove widgets that you no longer want to actively display on your site. Inactive widgets retain their pre-configured settings.
Rearrange WordPress Widgets Using Drag And Drop
You can easily add, activate, deactivate, reorder and remove widgets by dragging and dropping items inside your Widgets area …
(Rearrange widgets on your WordPress site using drag & drop)
You can also easily reorder the order of your widget-enabled layout by dragging & dropping widgets.
For example, in the image below, the widgets have already been configured to display things on your site like:
- A newsletter opt-in form,
- A click for support banner, and
- A ‘click to call’ feature from a widgetized WordPress plugin (i.e. a WordPress plugin with an accompanying widget) …
(Widgets control how certain features on your site appear)
Looking inside the Widget area, you would see that the front-end features appear on the site in the same order as they have been arranged in the active widget section …
If we rearrange the order of these widgets in the Main Sidebar Widget Area by dragging and dropping elements …
(Drag & drop to rearrange widgets in your widget area)
The widget features have now been reordered in the sidebar navigation menu …
This instantly reorganizes the layout of the sidebar.
Rearranging sidebar layout with widgets can help improve user experience.
Note in the screenshot below that the ‘click to call’ feature (3) is now at the top of the sidebar, and the support graphic button (2) now sits above the newsletter subscription form (1) …
(Reorganizing sidebar elements with widgets can improve user experience)
Removing Widgets From The WordPress Sidebar
Deleting widgets from the sidebar area is really easy.
For example, let’s delete the Search widget from your sidebar navigation section …
(Search widget)
To remove a widget from an active Widget area, either expand the widget settings and click the Delete link …
(Deleting your widgets)
Or just drag the widget out of the Active Widgets area and into the Inactive Widgets section …
(Removing a widget)
Repeat this process for all widgets you want to remove from your sidebar. You can always reinstate widgets by dragging them back into the active widgets area.
Widget Settings
Many widgets can be further customized. This can include things like hiding information from 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 toggle between expanding and collapsing the item …
(Toggles expand/collapse widget settings)
When the widget expands, you can change and save your settings, click Delete to remove your 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 give you little to no customizing options)
Previewing Widgets
Depending on which WordPress theme you use, you can also customize your widgets without actually making changes to your site. This way, you can be sure that you like what you see before committing anything to your website or blog.
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 it (to avoid making errors), or manage your widgets on the fly using the Widget editor screen.
(Edit widgets live in the Customize section)
Wherever you are on the front-end just calick the Customize link in the toolbar …
(Customize your site quickly)
This brings you to the Customizer feature in the backend.
You can do many edits, modifications and adjustments to widgets in preview mode (like inserting, deleting and reorganizing your widgets), and see all changes in real time. If you like the results, click the “Save and Publish” button and the changes will instantly become visible on your site to visitors.
(Widget management – work in preview mode)
After saving changes, the new settings will automatically be displayed on your site.
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 your 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 go through this tutorial.
Now that you know the basics of using widgets, it’s time to learn how to begin configuring various commonly-used widgets in WordPress.
***
This is the end of section one of this series of tutorials.
To view Part Two, click here:
***
"These tutorials have so much information and are easy to understand. If you use WordPress or plan to in the future these will help you with everything you need to know." - Valisa (Mesa, Arizona)
***