As discussed in this post, there are many benefits in choosing WordPress to manage and grow a website. One of these is that you can easily add content, enhance your website, and rearrange your site’s layout with no programming skills and knowledge required.
WordPress lets you quickly and easily insert, remove, and manage various types of content in your site’s sidebar (and 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’s sidebar area (plus headers and footers and other areas, depending on the theme you have installed) like:
- site pages
- site categories
- archive
- menus
- links to external sites
- links to recent posts
- comments
- text ads
- testimonials
- surveys & polls
- RSS feed items
- shopping cart forms
- product images
- twitter feeds
- display widgets from external sites (e.g. Facebook)
- administrative forms (e.g. login, register, etc.)
(WordPress widgets make managing and using WordPress easier)
To learn more about what WordPress widgets are, how widgets work and why they make managing your site easier, go here:
In this step-by-step tutorial we show you how to use and configure a number of frequently-used WordPress widgets.
Using WordPress Widgets
Basic Concepts
Before configuring and using widgets, let’s first make sure that you understand some of the basics of using widgets:
Most WordPress Themes Support Widget-Ready Areas
Many WordPress themes support widgets and provide built-in sections in your theme’s layout where you can add widgets, such as the sidebar navigation section, header area, and footer. Depending on your theme, widgets can also get added in the content area …
(Many WP themes offer users a number of widget areas)
These widgetized areas correspond to a feature inside your Widget administration panel called “Widget Areas” …
(Widget Areas)
The Widgets Panel
The Widgets screen displays all the widgets that can be used on your site.
On the right-hand side of the screen, you can see all “active” widgets …
(Activate or deactivate widgets with drag and drop ease)
Available widgets can be activated or deactivated by dragging-and-dropping items to different sections of the screen.
Widgets dragged from the Available Widgets section to widget areas like your sidebar, footer, etc. become immediately active and available for use.
Your Widgets area also includes an Inactive Widgets section that lets you remove any widgets that you no longer want on your website. Inactive widgets retain their pre-configured settings.
Reorganize Widgets Using Drag-And-Drop
You can easily add new functionality to your site, or activate, deactivate, reorder and remove widgets just by dragging and dropping items from the Widgets section …
(Rearrange widgets using drag-and-drop)
You can also easily rearrange your theme’s layout 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:
- An opt-in form,
- A contact support banner, and
- A ‘click to call’ section from a widgetized plugin (i.e. a plugin with an accompanying widget) …
(Widgets control how certain features display on your WordPress site)
If we take a look inside the example site’s Widget area, you will see that these features appear on the site in the same order as they are arranged in the active widget section …
If we reorganize these widgets in the Active Widget Area by dragging and dropping some things around …
(Drag & drop widgets in the widget area to rearrange their order)
The widgets have now been reorganized in the sidebar area …
As you can see, this instantly reorganizes the order of items in the site’s sidebar.
Rearranging sidebar elements with widgets can improve user experience.
Note in the screenshot below that the ‘click to call’ feature (3) is now first the sidebar, and the ‘contact us’ image banner (2) is now located above the newsletter opt-in form (1) …
(Rearrange sidebar elements with widgets to improve your site’s visitor experience)
Deleting Widgets From Your Sidebar Navigation Menu
Removing widgets from your sidebar is really easy.
For example, let’s delete the Search widget from the sidebar area …
(WordPress Search widget)
To delete an active widget, either expand the widget settings and click the Delete link …
(How to delete WordPress widgets)
Or just drag the widget out of the Active Widgets area and into the Inactive Widgets section …
(Remove a WordPress widget)
Repeat this process for all widgets you want removed from the sidebar. You can always reinstate widgets by dragging them back into the active widgets area.
Widget Settings
Most widgets can be customized further. This includes hiding information from 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 display the settings for the widget …
(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 may require or offer no customization, or they may only allow you to add an optional title …
(Some widgets provide users with little to no configuration options)
Theme Customizer
Depending upon which WordPress theme you have installed on your site, you’re also able to manage and customize widgets without actually making changes to your site. This way, you can be sure that you like your customizations before making any permanent changes to your site.
The ability to manage widgets inside 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 it (to avoid making mistakes), or manage your widgets on the fly using the Widget editor screen.
(preview widget changes live in the Customize section)
Wherever you are on the front-end just calick the Customize link in the toolbar …
(Toolbar Customize Link)
This brings you to the Customizer section in the backend.
You can do many edits, modifications and adjustments to your widgets in preview mode (like adding, deleting and reorganizing your widgets), and see all changes in real time. If you like what you have done, click the “Save and Publish” button and your changes will instantly become available on your site.
(Widget management – configure widgets on the fly!)
Once you have saved your changes, your new configuration will automatically be displayed on your site.
Since WordPress Themes can display elements differently on your site, we recommend that you install your theme first before configuring widgets on the sidebar.
Also, remember to use the WordPress Customizer 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 check how your changes are coming along).
Now that you know the basics of using widgets, the next step is to learn how to configure various frequently-used sidebar widgets in WordPress.
***
This is the end of section one of this tutorial.
Click on this link to view Part 2:
***
"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
***