As we have explained in this article, there are many benefits in using WordPress to build and grow your digital presence. One of these is that you can easily add content, expand your website’s functionality, and reconfigure the site’s layout with no coding skills required.
WordPress gives you the ability to quickly and easily insert, remove, and reorganize various blocks of content in your site’s sidebar (or header and footer sections too, depending on what theme is installed on your site) using widgets.
Once you know how to use widgets, you can easily add things to your site like:
- nested page lists
- site categories
- blog post archive
- custom menus
- links to external sites
- most read posts
- recent comments from users
- clickable ad banners
- quotations
- survey results
- RSS content excerpts
- opt-in subscription form
- videos
- twitter feeds
- add widgets from external sites (e.g. Amazon)
- administrative forms (e.g. login, register, etc.)
(WP widgets help make managing and using WordPress easy)
To learn more about what widgets are, how they work and how using widgets can help you expand your site’s functionality, see this article:
In this tutorial series 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, it helps to first review some of the basic concepts about how to use widgets:
Most WordPress Themes Support Widgetized Layouts
Many WordPress themes support widgets and provide areas in your theme’s layout where widgets can be added to, such as the sidebar, header area, and the footer area. Depending on what theme you are using, widgets can sometimes also show up below or above the content area …
(Many themes offer users multiple widgetized areas)
These widgetized layouts correspond to a feature inside your Widget management area called “Widget Areas” …
(Widget Areas)
The Widgets Screen
The Widgets area displays a list of all the widgets that are available.
The right-hand section of the screen displays your “active” widgets …
(Widgets can be activated or deactivated using drag and drop)
Available widgets can be activated or deactivated using drag & drop.
Widgets dragged from the Available Widgets section to widget areas like your sidebar, footer, etc. automatically become active and available for use.
Your Widgets screen also includes an Inactive Widgets section that lets you remove widgets that you no longer want to use on your site. Inactive widgets do not lose their pre-configured settings.
Reorganize Widgets With Drag And Drop
You can easily add functionality to your site, or activate, deactivate, rearrange and delete widgets by dragging and dropping items in the Widgets area …
(Rearrange your site’s widgets using drag and drop)
You can also easily reorder the layout of your website’s widgetized sections using drag & drop.
For example, in the image below, the widgets have already been configured to show the following:
- A newsletter subscription form,
- A click for support banner, and
- A ‘click to call’ function from a widgetized plugin (i.e. a WordPress plugin with an accompanying widget) …
(Widgets control how certain features display on your WordPress site)
Inside the Widget area, you would see that the front end features appear on the site’s sidebar menu in the same order as their corresponding widgets have been arranged in the backend widget section …
Let’s now reorganize these widgets in the Widget Area by dragging and dropping some of these widgets around …
(Drag-and-drop widgets in your widget area to rearrange their order)
The widget features have now been reorganized in your sidebar …
This instantly changes the order of items in the site’s sidebar.
Reorganizing sidebar elements using widgets can help to improve your site’s visitor experience.
Note in the screenshot below that the ‘click to call’ feature (3) is now at the top of the sidebar, and the support banner (2) is now placed above the newsletter sign-up form (1) …
(Reorganizing sidebar layout with widgets can help improve your site’s visitor experience)
Removing Widgets From The Sidebar
Removing widgets from the sidebar section 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 settings and click the Delete link …
(Delete your widget)
Or just drag the widget out of the Active Widgets section and drop it into the Inactive Widgets area …
(How to remove your WordPress widgets)
Repeat this process for any other widgets you want to remove from the sidebar. You can always restore a widget by dragging it back into the active widgets area.
Widget Settings
Many widgets can be further 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 dimensions of sidebar images, videos, etc.
Click on the little triangle in the corner of a widget to display the widget’s settings …
(Toggle to expand/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 …
(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 configuration options)
Preview Your Widgets
Depending upon the WordPress theme you use, you can also preview any changes live without making actual changes to your site. This way, you can be sure that you are happy with what you have done before making any permanent changes to your site.
The ability to manage widgets from your own 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 any changes (and avoid making mistakes), or manage your widgets on the fly using the Widget editor area.
(preview widget changes live in the Customize section)
If you need to make changes to the site while viewing the front-end, just click on the Customize link …
(Customize link in the toolbar)
This brings you to the Customizer feature in the back-end.
You can do many edits to widgets in preview mode (like inserting, deleting and moving widgets around), and see all changes in real time. If you like the results, click the “Save and Publish” button and your changes will instantly become visible to your site visitors.
(Widget management – work in preview mode)
After saving changes, your site will automatically update the widget settings and display your latest configuration to your site visitors.
Because WordPress Themes can display elements differently on your site, we recommend that you install the theme first before configuring widgets on the sidebar area.
Also, remember to use the WordPress Customizer to preview your changes. This will save you from having to keep two browsers open while you work through 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, it’s time to learn how to configure a number of frequently-used WordPress sidebar widgets.
***
This is the end of part one of this tutorial.
To continue, click this link:
***
"Your training is the best in the world! It is simple, yet detailed, direct, understandable, memorable, and complete." Andrea Adams, FinancialJourney.org
***