As we discuss in this post, one of the many benefits of choosing WordPress is that you can easily add content, enhance your site, or reconfigure your site’s layout without requiring web coding skills.
WordPress allows you to easily add, delete, and reconfigure content from your blog’s sidebar (and header and footer sections, depending on your theme) using widgets.
Once you know how to use widgets, you can easily add things to your site like:
- list of your web pages
- site categories
- post archives
- menus
- links to resources
- posts that you want to promote
- recent comments from users
- image banners
- user testimonials
- polls & surveys
- content from RSS feeds
- shopping cart information
- video thumbnails
- social media share buttons
- display widgets from other sites (e.g. affiliate programs)
- administrative forms (e.g. login, register, etc.)
(WordPress widgets make managing and using WordPress easier)
To learn more about what WP widgets are, how widgets work and how using widgets can help you expand your site’s capabilities, go here:
In this tutorial we show you how to use and configure various frequently-used widgets in WordPress.
How To Use Widgets
The Basics
Before we get into configuring and using widgets, let’s first go over some of the basic concepts about using widgets:
Most WordPress Themes Support Widget-Ready Layouts
Many WordPress themes support widgets and provide widgetized areas in the theme’s layout where widgets can be added to, such as the sidebar area, header area, and footer. Depending on your theme, widgets can sometimes also get added inside the content area …
(Many themes provide multiple widget areas)
These widgetized sections correspond to a feature inside your Widget panel called “Widget Areas” …
(Widget Areas)
Widgets Screen
The Widgets screen displays all the widgets that can be used on your site.
On the right-hand side of the window, you can see the “active” widgets …
(Activate or deactivate widgets using drag and drop)
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 active and available for use.
Your Widgets screen also includes an Inactive Widgets section that lets you remove widgets that you no longer want to actively display on your website. Inactive widgets retain their pre-configured settings.
Reorganize WordPress Widgets With Drag-And-Drop
You can easily add, activate, deactivate, rearrange and remove things using widgets by dragging and dropping items inside your Widgets section …
(Rearrange widgets using drag-and-drop)
You can also easily reconfigure the order of your widget-ready areas using drag and drop.
For example, take a look at the image below. In this site, the widgets have already been configured to show the following:
- An opt-in form,
- A click for 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 display)
If we could peek inside the Widget area, you would see that the front-end features appear on the site in exactly the same order as they have been arranged in the back-end widget section …
If we reorganize the above widgets in the Active Widget Area by dragging and dropping some things around …
(Drag & drop widgets in the widget area to rearrange their order)
The widgets have now been reorganized in the sidebar navigation area …
As you can see, this immediately reorganizes the layout of the site’s sidebar.
Reorganizing sidebar elements using widgets can 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’ image banner (2) can now be found above the newsletter opt-in form (1) …
(Reorganizing sidebar layout with widgets can help improve visitor experience)
Deleting Widgets From The WordPress Blog Sidebar Section
Deleting widgets from your WordPress sidebar navigation section is really easy.
For example, let’s remove the Search widget from the sidebar navigation menu …
(Search widget)
To remove an active widget, either expand the widget and click the Delete link …
(Deleting your WordPress widgets)
Or just drag the widget out of the Active Widgets section and drop it into the Inactive Widgets section …
(Removing your widgets)
Repeat this process for all widgets you want to remove from your sidebar menu. You can always restore widgets by moving them back into the active widgets area.
Widget Settings
Most widgets can be further customized. This can include things like making certain types of information hidden to your site visitors but visible to registered 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 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 your 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 an optional title …
(Some widgets provide users with little to no configuration options)
Previewing Widgets
Depending upon which WordPress theme you are using, you can also preview any changes live without actually making changes to your site. This way, you can be sure that you like your customizations before committing anything to your website.
The ability to manage widgets inside your own WordPress dashboard 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 before publishing it (and avoid making mistakes), or manage your 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 link in the toolbar)
This will bring you to the Customizer section in the back-end.
You can do lots of things 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 your changes will be instantly applied and made visible on the site’s frontend.
(Widget management – work in preview mode)
After saving your changes, your site will automatically update the widget settings and display the latest changes to your site visitors.
Since the WordPress theme you choose determines how elements display on your site, we recommend installing the theme first before configuring widgets.
Also, remember to use the Customizer feature to preview all changes. This will save you from having to keep two browsers open while you complete this tutorial.
Now that you know the basics of using widgets, the next step is to learn how to configure a number of commonly-used WordPress widgets.
***
This is the end of part 1 of this tutorial on how to use WordPress widgets.
To continue, click here:
***
"Your training is the best in the world! It is simple, yet detailed, direct, understandable, memorable, and complete." Andrea Adams, FinancialJourney.org
***