As we explain in this post, one of the many benefits of using the WordPress web publishing application for building, managing and growing a website is that WordPress makes it very easy to add content, enhance your site, or rearrange the layout of your website without having programming skills.
WordPress lets you easily add, remove, and control content in your site’s sidebar (and header and footer sections, 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
- site categories
- archives
- custom page menus
- links to external sites
- links to recent posts
- user comments
- image banners
- quotations
- surveys & polls
- RSS feed items
- member login section
- video galleries
- Facebook feeds
- add widgets from other sites (e.g. Twitter)
- administrative forms (e.g. login, register, etc.)
(WP widgets make managing and using WordPress easy)
To learn more about what widgets are, how widgets work and why they make managing your site easier, go here:
In this step-by-step tutorial we explain how to use and configure various frequently-used widgets in WordPress.
Using WordPress Widgets
The Basics
Before configuring and using widgets, let’s go over some of the basic concepts about how to use widgets:
Most WordPress Themes Support Widget-Ready Areas
Most WordPress themes support widgets and provide built-in sections in your theme’s layout where you can use widgets, such as the sidebar, header area, and footer. Depending on the theme installed on your site, widgets can sometimes also show up in the content area …
(Many WordPress themes provide multiple widget-ready sections)
These widgetized sections correspond to a feature inside your Widget administration area called “Widget Areas” …
(Widget Areas)
Widgets Screen
The Widgets area displays a list of all the widgets that you currently have available.
The right-hand section of the window displays your “active” widgets …
(Widgets can be activated or deactivated with drag & drop ease)
Available widgets can be activated or deactivated by dragging-and-dropping items to different sections of the panel.
Widgets dragged from the Available Widgets section to widget areas like the sidebar, footer, etc. immediately become active on your site.
In addition, the Widgets area includes an Inactive Widgets section that lets you remove widgets that you no longer want to use on your website. Inactive widgets retain their settings.
Rearrange Widgets With Drag-And-Drop
You can easily insert, activate, deactivate, rearrange and remove things using widgets just by dragging and dropping items in your Widgets area …
(Rearrange your site’s widgets using drag-and-drop)
You can also easily rearrange your theme’s layout with drag and drop ease.
For example, in the image below, the widgets have already been configured to display things like:
- A subscription form,
- A click for support banner, and
- A ‘click to call’ section from a widgetized plugin (i.e. a plugin that adds an accompanying widget to your site) …
(Widgets control the order certain features on your site display)
If you were to peek inside the Widget area, you would see that the front-end features appear on the site’s sidebar section in the same order as they have been arranged in the backend widget area …
If we rearrange these widgets in the Main Sidebar Widget Area using drag and drop …
(Drag & drop to rearrange widgets in your widget area)
The widget features have now been reordered in your sidebar section …
This instantly reorganizes the order of items in the sidebar.
Rearranging sidebar elements using widgets can improve user experience.
Note in the screenshot below that the ‘click to call’ function (3) is now the first item on the sidebar section, and the support image button (2) is now found above the newsletter subscription form (1) …
(Rearranging sidebar elements using widgets can help to improve user experience)
Deleting Widgets From Your WordPress Blog Sidebar Section
Deleting widgets from the sidebar navigation menu is really easy.
For example, let’s show you how to remove the Search widget from the sidebar navigation menu …
(Search widget)
To delete a widget from an active Widget area, you can either expand the widget and click the Delete link …
(Delete WordPress widgets)
Or just drag the widget out of the Active Widgets area and drop it into the Inactive Widgets area …
(Removing your WP widget)
Repeat this process for any other widgets you want removed from your sidebar area. You can always reinstate a widget by dragging it back into the active widgets area.
Widget Settings
Many widgets can be customized. This can include things like 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 that widget …
(Toggles expand/collapse widget settings)
When the widget expands, you can change and save your settings, remove the 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 something like an optional title …
(Some widgets offer little to no customization)
Theme Customizer
Depending on which theme you choose, you can also customize widgets without making actual changes to your site. This way, you can be sure that you like the customized edits before making any permanent changes to your website.
The ability to manage widgets from within the WP dashboard 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 (and avoid making mistakes), or configure widgets on the fly using the Widget editor screen.
(preview widget changes in the Customize section)
If you need to make changes to the site while viewing the frontend, just click on the Customize link …
(Toolbar Customize Link)
This will bring you to the Customizer section in the back-end.
You can do several edits, modifications and adjustments in preview mode (like adding, deleting and reorganizing your widgets), and this will all be done in real time. If you like the results, click the “Save and Publish” button and the changes will be instantly updated and reflected to your site visitors.
(Widget management – configure widgets on the fly!)
Once the changes have been saved, all changes made to widgets will be automatically updated.
Since WordPress Themes can display elements differently on your site, we recommend installing 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 go through this tutorial.
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 section one of this tutorial series.
To continue, click here:
***
"If you're new to WordPress, this can stand on its own as a training course and will stay with you as you progress from beginner to advanced and even guru status." - Bruce (Columbus, Ohio)
***