Managing Widgets
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.
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 using the Block Editor
- Add widgets from plugins
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)
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 the Twenty Sixteen theme.
- We will start with the Twenty Sixteen theme activated.
- Use the Customizer for modifications
Lesson Outline
Hands-on Walkthrough
Introduction
This lesson will walk you through managing widgets through Dashboard>Appearance>Widgets>Customizer.
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 have 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, or an Instagram feed. Look at a website that has used widgets cleverly.
The current version of WordPress provides the functionality to add widgets to posts. However, some creative authors have created plugins that provide users with the capability to add widgets to posts or within page content. We will not be covering this nuance in this tutorial.
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 using the Block Editor, or by installing and activating certain plugins. In today’s tutorial, we will be using the Twenty Sixteen theme. 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?
- Widgets may be included with your theme.
- Widgets can be added with the Block Editor
- Many plugins provide widgets.
We’ll work with the existing widgets in the Twenty Sixteen theme, add our own using the Block Editor, and 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
- You can drag and drop widgets where you want it to be displayed.
Take a moment to find where these “widget areas” appear on your webpage.
Modify and Add Widgets
The Customizer allows you to see changes live in preview. The first thing I will do is change the existing search widget. Instead of displaying ‘search’ twice, I will change the button on the right to “Go”. I am happy with the rest of the display.
I will add a widget to the sidebar using the Block Editor. Remember, you could add a widget block or any other block that meets your needs. I want visitors to my site to subscribe to my newsletter. Firstly, I will group my blocks and then add a heading, image and button. Don’t forget to add the link to your button.
Next, I will add social icon links to Content Bottom 1. As you add a link, the icon will appear in the preview.
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.
Widgets added with a plugin
There are many types of widget plugins available to add things like contact forms, calendars, polls and surveys, weather information and even live chat support.
- Many WordPress plugins will give you a widget to use on your site.
- Install (or activate) the plugin. I have installed a map with WP Map Block.
- Make the necessary changes before publishing.
Classic Widgets Plugin
A user may install and activate the Classic Widgets plugin to opt-out of using block-based widgets editor.
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
Exercises
- Add a search widget to your bottom footer 1 area.
- Add a YouTube video.
- Add a calendar to the sidebar.
- Save your map widget to the inactive widget area.
Assessment
Comprehension Questions
- What is the function of a widget?
- Describe how you change or include widgets on a freshly installed website.
- What is the difference between existing widgets, third party widgets and block-based widgets?
Quiz Questions
- How many widget areas are there in the Twenty Sixteen theme? (Answer: 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: Save it in the Inactive Widgets area at the bottom of the Widgets page.)
- You need a plugin to add social icon links? (Answer: False)
- Where will you be able to see a live preview of changes made to widgets? (Answer: Customizer)
- Existing widgets depend on the pre-installed theme you are using. (Answer: True)