As we’ve discussed in this post, one of the many benefits of using WordPress is that you can easily add content, improve your site’s functionality, and redesign the layout of your website without web coding knowledge required.
WordPress allows you to easily insert, remove, and reconfigure content on your site’s sidebar area (and header and footer sections, 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:
- list of pages
- blog categories
- blog post archive
- custom page menus
- links to resources
- links to your recent posts
- comments
- clickable text ads
- quotations
- polls & surveys
- RSS content excerpts
- opt-in subscription form
- video thumbnails
- social media buttons
- display widgets from other sites (e.g. Facebook friends)
- administrative forms (e.g. login, register, etc.)
(WP widgets make managing and using WordPress easy)
To learn more about what widgets are, how widgets work and how using widgets can help you expand the functionality of your website, see this article:
In this tutorial we are going to show you how to use and configure a number of commonly-used WordPress widgets.
Using WordPress Widgets
What You Need To Know First
Before we explain how to configure widgets, let’s go over some of the basic concepts about how to use widgets:
Most WordPress Themes Support Widget-Ready Layouts
Many WordPress themes support widgets and provide built-in widgetized sections in the theme’s layout where widgets can be used, such as the sidebar area, header area, and footer sections. Depending on the theme, widgets can sometimes also get added below or above the content area …
(Many WP themes offer users multiple widget areas)
These widget-ready areas correspond to a feature inside the Widget management area called “Widget Areas” …
(Widget Areas)
Your Widgets Screen
The Widgets section displays a list of all the widgets that are available.
On the right-hand side of the window, you can see your “active” widgets …
(Widgets can be activated or deactivated by dragging and dropping)
Available widgets can be activated or deactivated using drag & drop.
Widgets dragged from the Available Widgets section to widget areas like the sidebar, footer, etc. immediately become active on your site.
In addition, the Widgets screen 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 Widgets Using Drag And Drop
You can easily insert, activate, deactivate, reorder and remove widgets using simple drag and drop in your Widgets area …
(Rearrange your site’s widgets using drag and drop)
You can also easily reconfigure the layout and order of your site’s widget-enabled layout using drag-and-drop.
For example, take a look at the image below. In this example site, the widgets have already been configured to show the following:
- A subscription form,
- A click for support button, and
- A ‘click to call’ function from a widgetized plugin (i.e. a plugin with an accompanying widget) …
(Widgets control how certain features display on your site)
If we take a 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 are arranged in the active widget screen …
Let’s now change the order these widgets in the Sidebar Widget Area using drag and drop …
(Drag & drop widgets in your widget area to rearrange their order)
The widgets have now been reordered in the sidebar navigation area …
This instantly changes the layout of the site’s sidebar.
Reorganizing sidebar layout with widgets can improve user experience.
Note in the screenshot below that the ‘click to call’ function (3) is now first the sidebar section, and the ‘contact us’ banner (2) has been moved to the place above the newsletter sign-up form (1) …
(Rearranging sidebar layout with widgets can improve user experience)
Deleting Widgets From The WordPress Blog Sidebar Menu
Removing widgets from the sidebar is very easy.
For example, let’s remove the Search widget from the sidebar menu …
(WordPress Search widget)
To remove a widget from an active Widget area, either open up the widget settings and click the Delete link …
(Deleting your widget)
Or just drag the widget out of the Active Widgets area and drop it into the Inactive Widgets area …
(How to remove WordPress widgets)
Repeat this process for any other widgets you want removed from your sidebar. You can always reactivate widgets by dragging them back into the active widgets area.
Widget Settings
Most widgets can be customized. This includes 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 expand 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 customization, or they may only allow you to add something like an optional title …
(Some widgets give you little to no customizing options)
Previewing Widgets
Depending upon the WordPress theme you choose, you’re also able to preview any changes live without making actual changes to your site. This way, you can be sure that you like the customized edits before making any permanent changes to your website or blog.
The ability to manage widgets inside your WordPress 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 changes (to avoid making mistakes), or change widgets on the fly using the Widget editor screen.
(Edit widgets 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 section in the backend.
You can do lots of edits, modifications and adjustments to your widgets in preview mode (like adding, deleting and moving widgets around), and see all changes in real time. If you are happy with the results, click the “Save and Publish” button and the changes will instantly become visible on your site.
(Widget management – work in preview mode)
Once you have saved the changes, all changes made to widgets will be automatically updated.
Since the WordPress theme you use can affect how elements display 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 all changes. This saves you from having to keep two browsers open while you complete 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 configure various commonly-used sidebar widgets in WordPress.
***
This is the end of section one of this tutorial.
To continue, click this link:
***
"This is an awesome training series. I have a pretty good understanding of WordPress already, but this is helping me to move somewhere from intermediate to advanced user!" - Kim Lednum
***