As we’ve explained in this article, one of the many great benefits of using WordPress is that you can easily add content, expand your site’s functionality, and change the layout of your site with no web coding skills required.
WordPress lets you quickly and easily insert, remove, and control content from your site’s sidebar menu (or 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 theme) like:
- site pages
- blog categories
- post archives
- menus that display only selected pages
- links to external sites
- links to your recent posts
- user comments
- clickable images
- quotations
- poll results
- RSS feed content
- opt-in form
- product images
- social media buttons
- display widgets from other sites (e.g. Facebook friends)
- 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 widgets can make managing your site easier, see this article:
In this step-by-step tutorial we show you how to use and configure various commonly-used WordPress widgets.
Using Widgets
What You Need To Know First
Before configuring and using widgets, it helps to first cover some of the basic concepts of using widgets:
Most WordPress Themes Support Widgetized Layouts
Most WordPress themes support widgets and provide built-in sections in your theme’s layout where widgets can appear, such as the sidebar area, header area, and the footer area. Depending on what theme you are using, widgets can sometimes also be added below or above the content area …
(Many WordPress themes offer users a number of widgetized areas)
These widgetized areas correspond to a feature inside your Widget panel called “Widget Areas” …
(Widget Areas)
The 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 with drag & drop ease)
Available widgets can be made Active or Inactive by dragging-and-dropping items to different sections of the widgets panel.
Widgets dragged from the Available Widgets section to widget areas like the sidebar, footer, etc. become active on your site.
In addition, your Widgets area includes an Inactive Widgets section that lets you remove widgets that you no longer want on your site. Inactive widgets retain their pre-configured settings.
Rearrange Widgets Using Drag-And-Drop
You can easily add, activate, deactivate, rearrange and delete widgets by dragging and dropping items in the Widgets area …
(Rearrange widgets using drag-and-drop)
You can also easily reorder your theme’s layout with drag and drop ease.
For example, in the image below, the widgets have already been configured to display things on your site like:
- An opt-in form,
- A click for support button, and
- ’Click to call’ buttons from a widgetized WordPress plugin (i.e. a WordPress plugin that adds an accompanying widget to your site) …
(Widgets control how certain features on your site appear)
If you took a peek inside the Widget area, you would see that the front-end features appear on the site in the same order as their corresponding widgets have been arranged in the back-end widget area …
Let’s now reorganize the above widgets in the Widget Area using drag and drop …
(Drag-and-drop to rearrange widgets in the widget area)
The widgets have now been reorganized in the sidebar …
As you can see, this instantly reorganizes the order of items in your sidebar.
Reorganizing sidebar elements using widgets can help improve your site’s user experience.
Note in the screenshot below that the ‘click to call’ feature (3) is now first the sidebar, and the support image banner (2) is now found above the newsletter sign-up form (1) …
(Reorganize sidebar layout using widgets to improve your site’s user experience)
Deleting Widgets From Your WordPress Blog Sidebar Navigation Menu
Deleting widgets from your sidebar is very easy.
For example, let’s show you how to remove the Search widget from your sidebar …
(Search widget)
To delete a widget from an active Widget area, either expand the widget settings and click the Delete link …
(How to delete your WP widgets)
Or just drag the widget out of the Active Widgets section and into the Inactive Widgets area …
(Remove widgets)
Repeat this process for any other widgets you want to remove from your sidebar area. You can always restore widgets by dragging them back into the active widgets area.
Widget Settings
Many widgets can be customized. 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 sizes of sidebar images, videos, etc.
Clicking on the little triangle in the corner of a widget expands the item and displays the settings for the widget …
(Toggle to expand/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 settings …
(Widget settings)
Some widgets offer little to no configuration options, or they may only allow you to add something like an optional title …
(Some widgets give you little to no configuration options)
Widget Customizer Section
Depending upon which theme you have installed on your site, you’re also able to preview any changes live without making actual changes to your site. This way, you can be sure that you like what you have done before making any permanent changes to your website.
The ability to manage widgets from within your dashboard 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 mistakes), or manage widgets on the fly using the Widget editor area.
(Edit widgets in the Customize feature)
When viewing your site on the front-end just calick the Customize link in the toolbar …
(Toolbar Customize Link)
This brings you to the Customizer screen in the backend.
You can do several things to widgets in preview mode (like inserting, removing and reorganizing your widgets), and it’s all done in real time. If you are happy with the results, click the “Save and Publish” button and your changes will instantly become visible on your site.
(Widget management – work in preview mode)
After saving changes, your new settings will automatically show on your site.
Since WordPress Themes can display elements differently on your site, we recommend installing your theme first before configuring widgets.
Also, remember to use the WordPress Customizer to preview your changes. This will save you from having to keep two browsers open while you complete this tutorial.
Now that you know the basics of using widgets, the next step is to configure various frequently-used WordPress sidebar widgets.
***
This is the end of part one of this series of tutorials.
Click here to continue:
***
"This is AMAZING! I had learnt about how to use WordPress previously, but this covers absolutely everything and more!! Incredible value! Thank you!" - Monique, Warrior Forum
***