As I’ve shared in this post, there are many great benefits in using WordPress to build, manage and grow a website or blog. One benefit is that you can easily add content, expand your site’s functionality, and rearrange the layout of your site without having code editing skills.
WordPress lets you quickly and easily add, delete, and rearrange various types of content on your blog’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’s sidebar area (plus headers and footers and other areas, depending on the theme*) like:
- pages on your site
- blog categories
- custom menus
- links to resources
- links to recent posts
- image banners
- survey questions & results
- RSS feed content
- opt-in subscription form
- social media buttons
- add widgets from other sites (e.g. affiliate programs)
- administrative forms (e.g. login, register, etc.)
(Widgets help make managing and using WordPress easier)
To learn more about what WordPress widgets are, how they work and why widgets can make managing your site easier, check out Using WordPress: A Basic Guide To WordPress Widgets
In this step-by-step tutorial I’ll will show you how to use and configure various frequently-used WordPress widgets.
Using WordPress Widgets
Before we start learning how to configure widgets, let’s first go over some of the basic concepts of using widgets:
Most WordPress Themes Support Widgetized Layouts
Most WordPress themes support widgets and provide built-in widgetized areas in the theme’s layout where you can add widgets, such as the sidebar, header area, and footer. Depending on your theme, widgets can also be found in the content area …
(Many WP themes offer users a number of widget-ready sections)
These widgetized sections correspond to a feature inside your Widget management panel called “Widget Areas” …
Your Widgets Screen
The Widgets section displays all the widgets you have available.
The right-hand section of the screen displays the “active” widgets …
(Widgets can be activated or deactivated by dragging and dropping)
Available widgets can be activated or deactivated using drag-and-drop.
Widgets dragged from the Available Widgets section to widget areas like your sidebar, footer, etc. become activated for use.
Your Widgets area also includes an Inactive Widgets section that lets you remove widgets that you no longer want to use on your website. Inactive widgets do not lose their settings.
Rearrange WordPress Widgets Using Drag And Drop
You can easily add, activate, deactivate, rearrange and delete widgets by dragging and dropping items inside your Widgets area …
(Rearrange widgets on your WordPress site using drag-and-drop)
You can also easily reconfigure your theme’s layout with drag and drop ease.
For example, in the image below, the widgets have already been configured to show the following:
- A subscription form,
- A contact support button, and
- A ‘click to call’ function from a widgetized WP plugin (i.e. a WordPress plugin with an accompanying widget) …
(Widgets control how certain features on your site display)
If we could peek inside the Widget area, you would see that the front-end features appear on the site’s sidebar menu in the same order as they have been arranged in the active widget area …
If we reorganize these widgets in the Widget Area using drag & drop …
(Drag-and-drop widgets in the widget area to rearrange their order)
The widget features have now been reordered in your sidebar …
As you can see, this immediately changes the layout of the site’s sidebar.
Rearranging sidebar layout with widgets can help to improve your site’s visitor experience.
Note in the screenshot below that the ‘click to call’ function (3) is now at the top of the sidebar navigation area, and the ‘contact us’ banner (2) is found above the newsletter sign-up form (1) …
(Reorganizing sidebar layout with widgets can improve your site’s user experience)
Removing Widgets From Your WordPress Blog Sidebar
Removing widgets from your WordPress sidebar area is very easy.
For example, let’s show you how to delete the Search widget from your sidebar …
To remove an active widget, you can either expand the widget and click the Delete link …
Or just drag the widget out of the Active Widgets section and into the Inactive Widgets area …
(How to remove your widget)
Repeat this process for any other widgets you want removed from the sidebar navigation section. You can always reactivate a widget by dragging it back into the active widgets area.
Many widgets provide various options that allow you to further configure these. This includes making certain types of information hidden to your site visitors but visible to registered users, displaying additional forms, fields, or data, 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 remove your widget from the “Active Widgets” section, close the widget, or click on the triangle to collapse the widget …
Some widgets provide users with little to no configurable options, or they may only allow you to add something like an optional title …
(Some widgets provide users with little to no customization)
Depending upon the theme you have installed on your site, you’re also able to customize and manage widgets without actually making changes to your site. This way, you can be sure that you like the customized edits before making any permanent changes to your site.
Widget management 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 prior to publishing it (to avoid making errors), or manage your widgets on the fly using the Widget editor screen.
(Edit widgets in the Customize section)
If you need to make changes to the site while viewing the front-end, 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 to your widgets in preview mode (like adding, removing and moving widgets around), and see all changes in real time. If you like what you’ve done, click the “Save and Publish” button and the changes will instantly become visible to your site visitors.
(Widget management – work in preview mode)
Once the changes are saved, all changes made to widgets will be automatically updated.
Because the theme you use affects how elements display on your site, I recommend installing your theme first before configuring widgets.
Also, remember to use the Customizer feature to preview your changes. This will save you from having to keep two browsers open while you go 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, let’s configure a number of commonly-used sidebar widgets in WordPress.
This is the end of part one of this tutorial series.
Click on this link to view Part Two: Using Widgets In WordPress – Part Two
Be sure to take a look around the site, I have lots of tutorials to help you use WordPress more effectively and if you’d like information on all the ways that you can use WordPress to grow your business online, then I recommend subscribing (green box bleow), so you can be instantly notified when I publish new articles and tutorials. Also, please feel free to contact us if you need any help with WordPress.
Has this helped you become a better website owner? Please add your thoughts below or share this article with your friends.
*Headway Themes is my absolute favorite theme and theme framework because it’s so diverse and flexible