As we discuss in this post, there are lots of great benefits in choosing the WordPress web publishing software to build and grow your business online. One of these is that you can easily add content, expand your site’s functionality, or rearrange the layout of your site with no web programming skills required.
WordPress allows you to quickly and easily add, delete, and control content from your site’s sidebar (or header and footer sections too, depending on what theme is installed on your site) 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 your web pages
- content categories
- blog post archive
- menus displaying only selected pages
- links to external sites
- posts that you want to promote
- excerpts of recent comments added to posts
- clickable text ads
- user testimonials
- poll results
- RSS feed items
- subscription form
- video galleries
- twitter feeds
- add widgets from other 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 widgets work and how using widgets can help you expand the functionality of your website, go here:
In this tutorial series we are going to show you how to use and configure various frequently-used widgets in WordPress.
Using WordPress Widgets
What You Need To Know First
Before we explain how to configure widgets, let’s cover some of the basic concepts about using widgets:
Most WordPress Themes Support Widgetized Layouts
Many WordPress themes support widgets and provide built-in sections in the theme’s layout where widgets can be added to, such as the sidebar navigation menu, header area, and footer sections. Depending on what theme you are using, widgets can sometimes also display inside the content area …
(Many themes offer users multiple widget sections)
These widgetized areas correspond to a feature inside the Widget screen called “Widget Areas” …
(Widget Areas)
The Widgets Panel
The Widgets area displays a list of all the widgets that you currently have available.
The right-hand section of the screen displays all “active” widgets …
(Widgets can be activated or deactivated using drag and drop)
Available widgets can be made Active or Inactive using drag-and-drop.
Widgets dragged from the Available Widgets section to widget areas like your sidebar, footer, etc. immediately become active and available for use on your site.
In addition, your Widgets panel includes an Inactive Widgets section that lets you remove widgets that you no longer want actively displayed on your website. Inactive widgets do not lose their settings.
Reorganize Widgets With Drag-And-Drop
You can easily add, activate, deactivate, rearrange and delete widgets just by dragging and dropping items in your Widgets section …
(Rearrange your site’s widgets using drag and drop)
You can also easily rearrange your theme’s layout using drag & drop.
For example, take a look at the image below. In this site, the widgets have already been configured to display things like:
- An opt-in form,
- A contact support banner, and
- A ‘click to call’ function from a widgetized WordPress plugin (i.e. a WordPress plugin that adds an accompanying widget to your site) …
(Widgets control how certain features display on your WordPress site)
If we took a peek inside the Widget area, you would see that the front end features appear on the site’s sidebar area in exactly the same order as their corresponding widgets were arranged in the back-end widget section …
Let’s now reorganize these widgets in the Widget Area by dragging & dropping elements …
(Drag-and-drop to rearrange widgets in your widget area)
The widgets have now been reorganized in the sidebar menu …
This instantly changes the layout of the sidebar.
Rearranging sidebar elements using widgets can improve user experience.
Note in the screenshot below that the ‘click to call’ feature (3) is now at the top of the sidebar, and the support section (2) has been moved to the place above the newsletter opt-in form (1) …
(Reorganizing sidebar layout with widgets can improve user experience)
Deleting Widgets From The WordPress Sidebar Navigation Menu
Removing widgets from your WordPress sidebar is really easy.
For example, let’s show you how to delete the Search widget from the sidebar navigation section …
(WordPress Search widget)
To remove a widget from an active Widget area, either expand the widget settings and click the Delete link …
(How to delete a widget)
Or just drag the widget out of the Active Widgets section and into the Inactive Widgets section …
(Removing a widget)
Repeat this process for all widgets you want removed from your sidebar navigation menu. You can always reactivate a widget by dragging it 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.
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 may require or offer no customization, or they may only allow you to add something like an optional title …
(Some widgets provide users with little to no customization)
Customize Widgets Section
Depending upon the theme you have installed on your site, you can also preview any changes live without making actual changes to your site. This way, you can be sure that you like the customized edits before committing anything live to your website.
The ability to manage widgets from within the 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 (to avoid making errors), or change widgets on the fly using the Widget editor screen.
(preview widget changes in the Customize feature)
If you need to make changes to your site while viewing the front-end, just click on the Customize link …
(Customize your site quickly)
This brings you to the Customizer screen in the back-end.
You can do many things in preview mode (like inserting, removing and reorganizing your widgets), and everything is done in real time. If you like the results, click the “Save and Publish” button and your changes will be instantly updated and reflected on the site’s frontend.
(Widget management – work in preview mode)
After saving changes, your site will automatically update the widget settings and display your latest changes to your site visitors.
Since the WordPress theme you use can affect how elements display on your site, we recommend that you install your 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, let’s configure a number of frequently-used widgets in WordPress.
***
This is the end of section 1 of this tutorial.
Click on this link to continue:
***
"Your training is the best in the world! It is simple, yet detailed, direct, understandable, memorable, and complete." Andrea Adams, FinancialJourney.org
***