As we have discussed in this article, one of the many great benefits of using WordPress to manage your website or blog is that you can easily add content, enhance your site’s functionality, or change the layout of your website without web coding knowledge required.
WordPress gives you the ability to quickly and easily insert, delete, and control content in your blog’s sidebar navigation area (and header and footer sections, depending on what theme is installed on the site) using widgets.
Once you know how to use widgets, you can easily add things to your site like:
- website page list
- blog post categories
- archive
- custom menus
- links to resources
- links to your recent posts
- user comments
- image banners
- client testimonials
- poll results
- RSS content
- opt-in subscription form
- image galleries
- social media sharing buttons
- add widgets from external sites (e.g. affiliate programs)
- administrative forms (e.g. login, register, etc.)
(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 your site’s functionality, see this article:
In this tutorial we explain how to use and configure a number of commonly-used widgets in WordPress.
How To Use Widgets
What You Need To Know First
Before configuring and using widgets, let’s make sure that you understand some of the basics about using widgets:
Most WordPress Themes Support Widget-Ready Layouts
Many WordPress themes support widgets and provide built-in areas in your theme’s layout where widgets can appear, such as the sidebar navigation section, header area, and the footer area. Depending on the theme, widgets can sometimes also display below or above the content area …
(Many WordPress themes provide a number of widget-ready sections)
These widget-ready sections correspond to a feature inside the Widget panel called “Widget Areas” …
(Widget Areas)
The Widgets Panel
The Widgets area displays a list of 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 & drop)
Available widgets can be made Active or Inactive by dragging-and-dropping items to different areas of the screen.
Widgets dragged from the Available Widgets section to widget areas like your sidebar, footer, etc. automatically become active and can be used to perform their function on your site.
Your Widgets screen also includes an Inactive Widgets section that lets you remove any widgets that you no longer want on your website. Inactive widgets do not lose their settings.
Rearrange Widgets Using Drag & Drop
You can easily insert, activate, deactivate, reorder and delete widgets using simple drag and drop in the Widgets area …
(Rearrange your site’s widgets using drag-and-drop)
You can also easily rearrange your theme’s layout using drag-and-drop.
For example, in the image below, the widgets have already been configured to show the following:
- A subscription form,
- A contact support button, and
- ’Click to call’ feature from a widgetized plugin (i.e. a plugin with an accompanying widget) …
(Widgets control how certain features display on your site)
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 active widget area …
Let’s now change the order these widgets in the Widget Area by dragging & dropping elements …
(Drag & drop to rearrange widgets in your widget area)
The widget features have now been reorganized in the sidebar …
As you can see, this immediately reorganizes the order of items in the site’s sidebar.
Rearranging sidebar layout using widgets can improve your site’s visitor experience.
Note in the screenshot below that the ‘click to call’ function (3) is now first the sidebar, and the support graphic button (2) now sits above the newsletter opt-in form (1) …
(Reorganizing sidebar layout using widgets can help to improve visitor experience)
Removing Widgets From The WordPress Sidebar Section
Removing widgets from your WordPress sidebar is really easy.
For example, let’s show you how to remove the Search widget from your sidebar …
(WordPress Search widget)
To remove a widget from an active Widget area, either expand the widget settings and click the Delete link …
(Delete your widget)
Or just drag the widget out of the Active Widgets area and drop it into the Inactive Widgets area …
(Removing widgets)
Repeat this process for any widgets you want removed from your sidebar. You can always reactivate widgets by moving them back into the active widgets area.
Widget Settings
Most widgets can be further customized. This can include things like hiding information from users (but allowing access to registered users), displaying additional forms, fields, or data, specifying dimensions of sidebar images, videos, etc.
Clicking on the little triangle in the corner of a widget expands the item and displays the widget’s settings …
(Toggles 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 provide users with little to no customizing options, or they may only allow you to add an optional title …
(Some widgets offer little to no customizing options)
WordPress Theme Customizer
Depending upon 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 your customizations before making any permanent changes to your site.
The ability to manage widgets from within your own WP dashboard 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 before publishing it (and avoid making mistakes), or change widgets on the fly using the Widget editor area.
(Edit widgets live in the Customize feature)
When viewing your site 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 several edits, modifications and adjustments to widgets in preview mode (like inserting, deleting and moving widgets around), 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 the changes will instantly become visible on your site.
(Widget management – work in preview mode)
Once you have saved your changes, all changes made to widgets will be automatically updated.
Because WordPress Themes can display elements differently on your site, we recommend installing the theme first before configuring widgets on the sidebar navigation menu.
Also, remember to use the Customizer feature to preview your changes. This will save you from having to keep two browsers open while you go through this tutorial.
Now that you know the basics of using widgets, the next step is to start configuring various frequently-used widgets in WordPress.
***
This is the end of section one of this tutorial.
To continue, click this link:
***
"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
***