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 in your website. We will demonstrate how to use the widgets included in the theme installed on a website, add widgets from plugins and customize a widget using simple HTML.
This lesson will walk you through managing widgets through Dashboard>Appearance>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 a 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.
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.
The current version of WordPress provide 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 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.
(image 1)
Identify areas on the page where widgets can be included (e.g. footer, sidebars).
We’ll work with the existing widgets in the Twenty Sixteen theme, then install a plugin from the repository that adds a widget.
Take a moment to find where these “widget areas” appear on your webpage.
You can drag and drop the widgets into these areas. Let’s start by deleting the “Recent Comments” widget from your sidebar.
(image 2)
When you click on the arrow to the right on the title line (see image 2), 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 “Navigation 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.
If you have not installed the “test data“ or created any menus, nothing will show up in the menu on your site.
Last we will add a “Tag Cloud” to the “Content Bottom 1” widget area. Save your changes and view your site.
Note: The bottom 1 & 2 widget areas do not show up on blog front page of Twenty-Sixteen.
(image 3)
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. (see image 3)
(image 4)
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 your 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 image 4). Voilà… your map appears in your sidebar!
(image 5)
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 image 5)
(image 6)
A new widget will appear in your active widget area (image 6).
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 labeled “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.
Exercise Name
Quiz Question
