As discussed in this article, one of the many great benefits of using WordPress is that you can easily add content, improve your site’s functionality, and reconfigure the layout of your site without web coding skills required.
WordPress gives you the ability to easily insert, remove, and reorganize various types of content in your website’s sidebar (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’s sidebar area (plus headers and footers and other areas, depending on the WordPress theme you have installed) like:
- page lists
- site categories
- archives
- menus displaying only selected pages
- links to resources
- posts that you want to promote
- recent comments from users
- text ads
- quotations
- survey questions & results
- content from RSS feeds
- opt-in subscription form
- images
- social media buttons
- display widgets from external sites (e.g. affiliate programs)
- administrative forms (e.g. login, register, etc.)
(WordPress widgets help make managing and using WordPress easier)
To learn more about what widgets are, how they work and why widgets can make managing your site easier, go here:
In this step-by-step tutorial we show you how to use and configure a number of frequently-used WordPress widgets.
Using Widgets In WordPress
Basic Concepts
Before we explain how to configure widgets, it helps to first cover some of the basics of using widgets:
Most WordPress Themes Support Widgetized Layouts
Most WordPress themes support widgets and provide widgetized sections in the theme’s layout where you can use widgets, such as the sidebar section, header area, and footer sections. Depending on the theme installed on your site, widgets can sometimes also display inside the content area …
(Many themes provide a number of widget-ready sections)
These widget-ready areas correspond to a feature inside the Widget administration screen called “Widget Areas” …
(Widget Areas)
Widgets Screen
The Widgets area displays all the widgets that are currently available for use on your site.
On the right-hand side of the screen, you can see your “active” widgets …
(Activate or deactivate widgets 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. become active on your site.
In addition, the Widgets area includes an Inactive Widgets section that lets you remove any widgets that you no longer want to actively display on your site. Inactive widgets retain their pre-configured settings.
Rearrange Widgets With Drag-And-Drop
You can easily add, activate, deactivate, rearrange and remove things using widgets just by dragging and dropping items in your Widgets section …
(Rearrange your site’s widgets using drag and drop)
You can also easily reconfigure the order and layout of your theme’s widget-enabled layout with drag-and-drop ease.
For example, take a look at the image below. In this site, the widgets have already been configured to display things like:
- A newsletter opt-in form,
- A contact support button, and
- A ‘click to call’ section from a widgetized plugin (i.e. a WordPress plugin with an accompanying widget) …
(Widgets control the order certain features on your site appear)
Inside the Widget area, you would see that the front end features display on the site in exactly the same order as they have been arranged in the active widget section …
Let’s now change the order these widgets in the Sidebar Widget Area by dragging & dropping items …
(Drag and drop widgets in your widget area to rearrange their order)
The widget features have now been reordered in your sidebar navigation menu …
This immediately changes the layout of the site’s sidebar.
Reorganizing sidebar layout with widgets can help to improve 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 ‘contact us’ banner (2) is now located above the newsletter subscription form (1) …
(Rearranging sidebar elements with widgets can help improve visitor experience)
Removing Widgets From Your WordPress Sidebar
Deleting widgets from your sidebar area is very easy.
For example, let’s remove the Search widget from the sidebar …
(WordPress Search widget)
To remove a widget from an active Widget area, either open up the widget settings and click the Delete link …
(Delete your WordPress widgets)
Or just drag the widget out of the Active Widgets area and into the Inactive Widgets area …
(How to remove your WP widget)
Repeat this process for any widgets you want removed from the sidebar. You can always restore widgets by moving them back into the active widgets area.
Widget Settings
Most widgets provide a number of options that allow you to further customize things. This includes hiding information from users, displaying additional forms, fields, or information, specifying dimensions of sidebar images, videos, etc.
Clicking on the little triangle in the corner of a widget toggles between expanding and collapsing the item and displays the settings for the widget …
(Toggle to expand/collapse widget settings)
When the widget expands, you can change and save your settings, delete your widget from the “Active Widgets” section, close the widget, or click on the triangle to collapse the widget …
(Widget settings)
Some widgets give you little to no customizable options, or they may only allow you to add an optional title …
(Some widgets give you little to no configurable options)
Customize Widgets Section
Depending upon the theme you choose, you can also manage your widgets without actually making changes to your site. This way, you can be sure that you like the customized edits before committing anything live to your website or blog.
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 any changes (and avoid making mistakes), or configure widgets on the fly using the Widget editor area.
(preview widget changes in the Customize feature)
If you need to make changes to the site while viewing the frontend, just click on the Customize link …
(Toolbar Customize Link)
This brings you to the Customizer feature in the backend.
You can do many edits and adjustments to your widgets in preview mode (like inserting, deleting and reorganizing your widgets), and this will all be done in real time. If you are happy with what you have done, click the “Save and Publish” button and your changes will then be instantly updated and reflected on your site.
(Widget management – configure widgets on the fly!)
Once you have saved the changes, your site will automatically update the widget settings and display your new configuration to your site visitors.
Since the theme you choose can affect how elements display on your site, we recommend that you install the theme first before configuring widgets.
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 your site is coming along).
Now that you know the basics of using widgets, the next step is to learn how to start configuring various frequently-used WordPress sidebar widgets.
***
This is the end of section one of this tutorial series about using Widgets.
To continue, click here:
***
"I have used the tutorials to teach all of my clients and it has probably never been so easy for everyone to learn WordPress ... Now I don't need to buy all these very expensive video courses that often don't deliver what they promise." - Stefan Wendt, Internet Marketing Success Group
***