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.
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
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)
- 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”)
- 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
This lesson will walk you through managing widgets through Dashboard>Appearance>Widgets>Customizer.
What are widgets?
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.
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.
- 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
- 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.
- 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?
- 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)
- WordPress Widgets @ Codex
- Widget List @ Codex
- Widget Customizer
- Plugin Directory
Lesson Wrap Up
Tip: 💡 Follow with the Exercises and Assessment outlined above.