Widgets provide a convenient means of adding content and features to a website and require no coding experience. This lesson will provide an introduction to finding and including widgets on your website for up-to WordPress 5.2.

Objectives

After completing this lesson, participants will be able to:

• Demonstrate how to use widgets included in the installed theme on a website
• Add widgets from plugins
• Customize a widget using simple HTML

Prerequisite Skills

Participants will get the most from this lesson if they have familiarity with:

• Basic understanding of the WordPress dashboard
• Basic understanding of a theme, pages, and posts
• Basic understanding of the layout of a page including the header, footer, sidebar, and body
• Understanding of installing a plugin (helpful for the last part of the lesson)
• Understanding of simple HTML formatting is helpful but not necessary

Readiness Questions

• Do you have admin access to your website? (Preferred answer: yes)
• What theme are you currently using? (Preferred answer: anything but “I don’t know”)

Materials Needed

• A local installation of WordPress
• Twenty Fifteen theme
• Twenty Sixteen theme
• WordPress Importer
• Theme Unit Test Data
• Example Plugin Image Widget

Notes for the Presenter

• Ensure that the students’ WordPress installations include both the Twenty Fifteen and Sixteen themes.
• Theme Unit Test Data and the WordPress Importer plugin are not critical but provide additional content to demonstrate the effects of changes to widget parameters.
• We will start with the Twenty Sixteen theme activated and the Twenty Fifteen deactivated.
• We will add the “Image Widget” plugin. This can be installed beforehand but not activated.

Lesson Outline

Hands-on Walkthrough

Introduction

This lesson will walk you through managing widgets through Dashboard>Appearance>Widgets.

What are widgets?

Widgets are tools that allow a user to add and control features or content to a sidebar, header, or footer. In fact, they are cleverly disguised pieces of PHP, HTML, JavaScript, or CSS that a user can manipulate without knowing any code by simply dragging and dropping a widget into the desired location on a page. If the widget offers this option, the author can further modify the content of the widget via a provided menu.

Examples of Widgets

Widgets can add features to a page such as a calendar, a map, an archive list, a list of profile photos for users that are currently logged in.

Review the homepage of the Twenty Sixteen theme and its predefined existing widgets in the footer. We’ll discuss in a bit more detail where widgets come from, but suffice it to say that they either come bundled in a theme or can be added by installing and activating certain plugins. In today’s tutorial, we will be using the Twenty Sixteen and Twenty Fifteen themes. Let’s have a look at how the theme authors are using widgets in a standard install of the Twenty Sixteen theme.

Identify areas on the page where widgets can be included (e.g. footer, sidebars).

Where do widgets come from?

• Some widgets come from your WordPress install.
• Other widgets may be included with your theme.
• Many plugins provide widgets.

We’ll work with the existing widgets in the Twenty Sixteen theme, then install a plugin from the repository that adds a widget.

Where are your widgets?

• Open your Dashboard >Appearance>Widgets.
• Available Widgets: These are the widgets available for you to use.
• Sidebar Widget Area: This region will be pre-populated with widgets at install.
• Content Bottom 1 Widget Area: This area appears at the bottom of a post or page
• Content Bottom 2 Widget Area: This area appears at the bottom of a post or page

Take a moment to find where these “widget areas” appear on your webpage.

Modify, Add and Delete Widgets

You can drag and drop the widgets into these areas.  Let’s start by deleting the “Recent Comments” widget from your sidebar.

When you click on the arrow to the right on the title line (see select and add widgets image), it will open your widgets options.

“Title”, “Delete” and “Close” are the only options for the search widget.

Next, let’s modify the “Category” widget to work as a dropdown. Save your work and view your site. Let’s add a “Custom Menu” widget. You can drag and drop the widget into the widget area.  Now you can drag and drop your widget to place it where you like.

Last we will add a “Tag Cloud” to the “Content Bottom 1 Widget Area”. Save your changes and view your site.

Another way to add a widget is to select the widget you want to use. A pull-down list of the widget areas will show up. Select the area in which you want to place your widget and click the “Add Widget” button.

The Text Widget

The text widget is very handy for adding simple HTML, images, or text into your widget area. Drag or place the “Text” widget into your “Sidebar”. Type a name and some text. Save your changes and view your site. You can add a Google map, also. Retrieve the Google map, and cut and paste the embed code into the text widget (see Text widget displaying Google map image). Voilà … your map appears in your sidebar!

Inactive Widgets

Often your widget will require some customization. If you have created a widget and want to save your settings, but need to remove it temporarily, you can save your widget and its settings in the “Inactive Widgets” area. Let’s drag and drop the “Text” widget into the “Inactive Widgets” area. Now your widget is saved for future use. (see Text widget displaying a Google map)

Widgets added with a plugins

• Many WordPress plugins will give you a widget to use on your site.
• Install (or activate) the plugin “Image Widget“
  
  A new widget will appear in your active widget area (active widget area image).
• Drag the new widget into your sidebar.
• Select an image you would like to place in your sidebar. After selection, many other options and fields will appear for including your image, title, alt-text, size, caption, link, etc… Configure accordingly.
• Save your configuration and then view your site.

Other Widget Areas

Let’s change your theme to Twenty Fifteen. You can see you have the same widgets but have them show in a new and different widget area.  Twenty Fifteen comes with only one widget area labelled “Widget Area.”  Other themes can have five, six, ten, or more widget areas. These are features of your theme and vary greatly. Let’s change our theme back to Twenty Sixteen now. Widget visibility is theme dependent. Whether a widget appears to the left, right, or top of the page or on pages versus posts could all be unique to each theme.

Wrap Up

• Final result
• Summary – You should be able to:
  • Describe what a widget is
  • Identify where to include widgets on a website
  • Identify the widget areas built to a website theme
  • Demonstrate how to add/delete/modify a widget
  • Customize a simple widget using the “Text Widget”

Exercises

• Add a search widget to your bottom footer 1 area.
• Add a YouTube video.
• Add a location map to the sidebar.
• Save your map widget to the inactive widget area.
• Add an image to your sidebar using the Image Widget

Assessment

Quiz Question

1. Describe how you change or include widgets on a freshly installed website.
2. Name the locations of the widget areas on the Twenty Sixteen theme. (Answer: 3)
3. On the Dashboard widget page, how can you remove a widget from the widget area, but preserve the customizations made to the widget for future use? (Answer: Drop it into the Inactive Widgets area at the bottom of the Widgets page.)

Additional Resources

1. WordPress Widgets @ Codex
2. Widget List @ Codex
3. Widget Customizer
4. Codex
5. Plugin Directory

Lesson Wrap Up