As discussed in this post, one of the many benefits of using WordPress to manage and grow your web presence is that you can easily add content, improve your site’s functionality, or change the layout of your website with no web coding knowledge required.
WordPress gives you the ability to quickly and easily add, delete, and rearrange content in your blog’s sidebar (or header and footer sections too, depending on what theme you have installed) 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 your theme) like:
- website page list
- content categories
- blog post archive
- menus displaying only selected pages
- links to resources
- most read posts
- comments
- clickable images
- customer testimonials
- polls & surveys
- RSS feed items
- customers login section
- video
- twitter feeds
- display widgets from external 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 they work and why they make managing your site easier, go here:
In this tutorial you are going to learn how to use and configure a number of commonly-used WordPress widgets.
Using WordPress Widgets
The Basics
Before configuring and using widgets, let’s cover some of the basic concepts about using widgets:
Most WordPress Themes Support Widgetized Areas
Many WordPress themes support widgets and provide sections in your theme’s layout where widgets can appear, such as the sidebar, header area, and footer. Depending on the theme installed on your site, widgets can also be used below or above the content area …
(Many WordPress themes provide a number of widget areas)
These widget-ready sections correspond to a feature inside your Widget administration area called “Widget Areas” …
(Widget Areas)
Your Widgets Screen
The Widgets panel displays all the widgets that can be used on your site.
The right-hand section of the window displays your “active” widgets …
(Widgets can be activated or deactivated using drag-and-drop)
Available widgets can be made Active or Inactive by dragging & dropping items to different sections of the widgets screen.
Widgets dragged from the Available Widgets section to widget areas like the sidebar, footer, etc. automatically become active on your site.
In addition, your Widgets panel includes an Inactive Widgets section that lets you remove any widgets that you no longer want to use on your website. Inactive widgets do not lose their settings.
Reorganize WordPress Widgets Using Drag-And-Drop
You can easily add functionality to your site, or activate, deactivate, reorder and delete widgets just by dragging and dropping items inside your Widgets area …
(Rearrange your site’s widgets using drag-and-drop)
You can also easily reconfigure the layout of your widget-enabled sections with drag & drop ease.
For example, take a look at the image below. In this example site, the widgets have already been configured to show the following:
- A newsletter subscription form,
- A click for support button, and
- A ‘click to call’ function 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 display)
If we look inside the example site’s Widget area, you will see that these features correspond to the order of widgets inside the active widget section …
Let’s now reorganize these widgets in the Widget Area using drag-and-drop …
(Drag and drop widgets in the widget area to rearrange their order)
The widgets have now been reorganized in the sidebar navigation section …
This immediately reorganizes the layout of your site’s sidebar.
Reorganizing sidebar elements using widgets can help improve your site’s visitor experience.
Note in the screenshot below that the ‘click to call’ feature (3) is now first the sidebar, and the ‘contact us’ section (2) has been moved to the spot above the newsletter subscription form (1) …
(Reorganizing sidebar layout using widgets can help improve user experience)
Deleting Widgets From The WordPress Sidebar
Deleting widgets from your sidebar menu is really easy.
For example, let’s delete the Search widget from the sidebar …
(Search widget)
To delete a widget from an active Widget area, you can either expand the widget and click the Delete link …
(Deleting your WordPress widgets)
Or just drag the widget out of the Active Widgets section and drop it into the Inactive Widgets section …
(Removing a WP widget)
Repeat this process for all 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
Most 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 information, 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 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 provide users with little to no customizing options, or they may only allow you to add something like an optional title …
(Some widgets offer little to no configurable options)
Widget Previews
Depending on which theme you choose, you’re also able to manage widgets without actually making changes to your site. This way, you can be sure that you are happy with your customizations before committing anything live to your website.
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 your widget content will appear prior to publishing changes (to avoid making errors), or change your widgets on the fly using the Widget editor area.
(preview widget changes live in the Customize feature)
If you need to make changes to your site while viewing the frontend, just click on the Customize link …
(Customize link in the toolbar)
This will bring you to the Customizer section in the backend.
You can do many things in preview mode (like inserting, removing and reorganizing your widgets), and it will all be done in real time. If you like the results, click the “Save and Publish” button and your changes will be instantly updated and made visible on the blog’s frontend.
(Widget management – work in preview mode)
After your changes are saved, all changes made to widgets will be automatically updated.
Because the WordPress theme you choose can affect how elements display on your site, we recommend installing your theme first before configuring widgets on the sidebar navigation menu.
Also, remember to use the Customizer feature 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 learn how to configure various commonly-used WordPress sidebar widgets.
***
This is the end of section 1 of this tutorial series about using Widgets.
To view Part 2, click this link:
***
"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
***