As we discuss in this post, there are many great benefits in using the WordPress CMS platform for building, managing and growing a business online. One of these is that WordPress makes it very easy to add content, enhance your website, or rearrange the site’s layout with no coding skills required.
WordPress allows you to quickly and easily add, delete, and control content from your site’s sidebar (or header and footer sections too, depending on your theme) using widgets.
Once you know how to use widgets, you can easily add things to your site like:
- website page list
- blog categories
- archived blog post entries
- menus that display only the pages you choose
- links to resources
- most read posts
- comments
- clickable images
- testimonials
- surveys
- RSS content excerpts
- newsletter registration form
- video
- Facebook feeds
- display widgets from external sites (e.g. StumbleUpon)
- administrative forms (e.g. login, register, etc.)
(WordPress widgets help make managing and using WordPress easy)
To learn more about what widgets are, how widgets work and how using widgets can help you expand your site’s capabilities, see this article:
In this step-by-step tutorial series you are going to learn how to use and configure various commonly-used WordPress widgets.
How To Use WordPress Widgets
What You Need To Know First
Before configuring and using widgets, let’s first cover some of the basic concepts of using widgets:
Most WordPress Themes Support Widget-Ready Layouts
Most WordPress themes support widgets and provide areas in your theme’s layout where widgets can be used, such as the sidebar menu, header area, and footer. Depending on your theme, widgets can also get added in the content area …
(Many WordPress themes provide a number of widget-enabled areas)
These widgetized layouts correspond to a feature inside the Widget management panel called “Widget Areas” …
(Widget Areas)
Widgets Screen
The Widgets screen displays a list of all the widgets that can be used on your site.
On the right-hand side of the screen, you can see the “active” widgets …
(Activate or deactivate widgets by dragging & dropping)
Available widgets can be activated or deactivated using drag-and-drop.
Widgets dragged from the Available Widgets section to widget areas like the sidebar, footer, etc. become immediately available for use on your site.
In addition, the Widgets screen includes an Inactive Widgets section that lets you remove any widgets that you no longer want to actively display on your website. Inactive widgets do not lose their settings.
Reorganize WordPress Widgets Using Drag And Drop
You can easily insert, activate, deactivate, rearrange and remove widgets using simple drag & drop inside your Widgets section …
(Rearrange your site’s widgets using drag & drop)
You can also easily rearrange the layout and order of your website’s widget-ready sections with drag & drop ease.
For example, in the image below, the widgets have already been configured to display the following to visitors:
- A subscription form,
- A click for support button, and
- A ‘click to call’ function from a widgetized WP plugin (i.e. a WordPress plugin with an accompanying widget) …
(Widgets control the order certain features on your site display)
If you take a look inside the example site’s Widget area, you will see that these features correspond to the order of widgets inside the active widget area …
If we change the above widgets in the Widget Area using drag and drop …
(Drag-and-drop to rearrange widgets in your widget area)
The widgets have now been reorganized in your sidebar section …
As you can see, this immediately changes the order of items in the sidebar.
Reorganizing sidebar elements using widgets can help improve your site’s user experience.
Note in the screenshot below that the ‘click to call’ function (3) is now at the top of the sidebar menu, and the support section (2) is located above the newsletter sign-up form (1) …
(Rearrange sidebar layout with widgets to improve user experience)
Deleting Widgets From The Sidebar
Removing widgets from the sidebar is very easy.
For example, let’s remove the Search widget from the sidebar area …
(Search widget)
To remove an active widget, you can either expand the widget settings and click the Delete link …
(How to delete your WordPress widget)
Or just drag the widget out of the Active Widgets area and into the Inactive Widgets area …
(How to remove a widget)
Repeat this process for any other widgets you want removed from the sidebar. You can always reinstate widgets by moving them back into the active widgets area.
Widget Settings
Most widgets offer additional options that allow you to further customize these. This can include things like hiding information from users (but allowing access to registered users), displaying additional forms, fields, or information, 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 …
(Toggling expands/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 configurable options)
Previewing Widgets
Depending on which WordPress theme you have installed, you’re also able to preview any changes live without making actual changes to your site. This way, you can be sure that you are happy with what you see before making any permanent changes to your website or blog.
The ability to manage widgets inside your own 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 any changes (and avoid making mistakes), or manage widgets on the fly using the Widget editor area.
(Edit widgets in the Customize feature)
If you need to make changes to the site while viewing the frontend, just click on the Customize link …
(Customize your site quickly)
This will bring you to the Customizer section in the backend.
You can do several edits to the widgets in preview mode (like inserting, removing and moving widgets around), and it will all be done in real time. If you like what you’ve done, click the “Save and Publish” button and your changes will instantly become visible on your site.
(Widget management – configure widgets on the fly!)
After saving the changes, the new settings will automatically show on your site.
Since the theme you use tend to affect how elements display on your site, we recommend that you install your theme first before configuring widgets on the sidebar.
Also, remember to use the WordPress Customizer to preview all changes. This saves you from having to keep two browsers open while you complete this tutorial (one to work in and one to see your site the way your visitors will see it).
Now that you know the basics of using widgets, let’s start configuring a number of commonly-used WordPress widgets.
***
This is the end of part one of this tutorial.
Click here to keep reading:
***
"Wow! I never knew there's so much to learn about WordPress! I bought one of the WordPress for Dummies three years ago, such authors need to be on this course!" - Rich Law, Create A Blog Now
***