As we’ve discussed in this article, one of the many benefits of choosing the WordPress web publishing software for building and growing your business online is that you can easily add content, expand your site’s functionality, and reconfigure the layout of your website without the need to have web coding skills.
WordPress allows you to easily insert, delete, and reconfigure content from your site’s sidebar menu (and 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 like:
- nested page lists
- categories
- post archives
- menus
- links to resources
- posts that you want to promote
- user comments
- image banners
- user testimonials
- poll results
- RSS feed items
- subscriber form
- product images
- social media share buttons
- add widgets from external sites (e.g. Facebook)
- administrative forms (e.g. login, register, etc.)
(WP widgets make managing and using WordPress easy)
To learn more about what widgets are, how they work and why widgets make managing your site easier, see this article:
In this tutorial you will learn how to use and configure various frequently-used widgets in WordPress.
Using WordPress Widgets
Widgets – The Basics
Before configuring and using widgets, let’s first cover some of the basic concepts about how to use widgets:
Most WordPress Themes Support Widget-Ready Areas
Most WordPress themes support widgets and provide widgetized areas in the theme’s layout where widgets can be used, such as the sidebar, header area, and footer. Depending on the theme installed on your site, widgets can sometimes also be added in the content area …
(Many WP themes offer users a number of widget-ready sections)
These widgetized sections correspond to a feature inside the Widget screen called “Widget Areas” …
(Widget Areas)
The Widgets Panel
The Widgets section displays a list of all the widgets you can use on your site.
The right-hand section of the screen displays all “active” widgets …
(Widgets can be activated or deactivated using drag & drop)
Available widgets can be made Active or Inactive using drag-and-drop.
Widgets dragged from the Available Widgets section to widget areas like the sidebar, footer, etc. become available for use on your site.
The Widgets panel also includes an Inactive Widgets section that lets you remove widgets that you no longer want actively displayed on your site. Inactive widgets do not lose their settings.
Rearrange WordPress Widgets With Drag And Drop
You can easily add functionality to your site, and activate, deactivate, rearrange and remove widgets by dragging and dropping items inside your Widgets section …
(Rearrange widgets using drag-and-drop)
You can also easily reorder your theme’s layout by dragging and dropping widgets.
For example, take a look at the image below. In this site, the widgets have already been configured to display things on your site like:
- An opt-in form,
- A contact support button, and
- A ‘click to call’ feature from a widgetized WP plugin (i.e. a plugin with an accompanying widget) …
(Widgets control the order certain features on your site display)
If you look inside the example site’s Widget area, you will see that these features display on the site in the same order as their corresponding widgets have been arranged in the active widget area …
If we change the order these widgets in the Widget Area by dragging & dropping some of these elements around …
(Drag-and-drop to rearrange widgets in the widget area)
The widget features have now been reordered in the sidebar section …
This instantly reorganizes the layout of the site’s sidebar.
Rearranging sidebar layout using widgets can help to improve visitor experience.
Note in the screenshot below that the ‘click to call’ feature (3) is now at the top of the sidebar, and the ‘contact us’ section (2) can now be found above the newsletter subscription form (1) …
(Rearrange sidebar elements using widgets to improve visitor experience)
Removing Widgets From Your WordPress Blog Sidebar Area
Removing widgets from your sidebar area is really easy.
For example, let’s show you how to remove the Search widget from your sidebar …
(WordPress Search widget)
To delete an active widget, you can either open up the widget and click the Delete link …
(How to delete a WP widget)
Or just drag the widget out of the Active Widgets section and drop it into the Inactive Widgets section …
(How to remove WordPress widgets)
Repeat this process for any widgets you want to remove from the sidebar. You can always reinstate a widget by dragging it back into the active widgets area.
Widget Settings
Most widgets offer various settings that allow you to further customize them. This can include things like hiding information from users (but allowing access to registered users), displaying additional forms, fields, or information, specifying dimensions of sidebar images, videos, etc.
Click on the little triangle in the corner of a widget to toggle between expanding and collapsing the item …
(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 settings …
(Widget settings)
Some widgets provide users with little to no customizable options, or they may only allow you to add something like an optional title …
(Some widgets give you little to no configurable options)
Widget Previews
Depending on which theme you use, you can also customize and manage your 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 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 your widget content will appear prior to publishing changes (to avoid making mistakes), or configure widgets on the fly using the Widget editor screen.
(Edit widgets live in the Customize section)
Wherever you are on the front-end just calick the Customize link in the toolbar …
(Customize your site quickly)
This will bring you to the Customizer feature in the back-end.
You can do several edits and adjustments to widgets in preview mode (like inserting, deleting and reorganizing your widgets), and see all changes in real time. If you like what you’ve done, click the “Save and Publish” button and your changes will then be instantly applied and made visible on your site to visitors.
(Widget management – configure widgets on the fly!)
Once the changes are saved, your site will automatically update the widget settings and display your latest changes to your site visitors.
Because the WordPress theme you choose determines how elements display on your site, we recommend that you install the theme first before configuring widgets on the sidebar navigation menu.
Also, remember to use the WordPress Customizer to preview all changes. This saves you from having to keep two browsers open while you work through this tutorial (one to work in and one to check how the site is coming along).
Now that you know the basics of using widgets, the next step is to begin configuring various commonly-used widgets in WordPress.
***
This is the end of part 1 of this series of tutorials about how to use Widgets.
Click here to access Part 2:
***
"If you're new to WordPress, this can stand on its own as a training course and will stay with you as you progress from beginner to advanced and even guru status." - Bruce (Columbus, Ohio)
***