In WordPress, widgets are blocks of content that you can add to your site’s sidebars, footers, and other areas. Ever visit someone’s blog and see a photo, signup form, or menu in the sidebar? Those are all widgets. Each widget can add a feature or function to your site, without having to write any code. Some widgets already come with WordPress, by default. These include post categories, tag clouds, search bars, navigation, and so on. If you need these elements, you have to add them as widgets, to the predefined widget areas. These depend on the theme you’re using, but in most cases they include your website’s sidebar, as well as the footer. WordPress widgets are a powerful means to add content and features that repeat throughout a website, such as category lists, tag clouds, calendars, subscription signup, social media feeds, etc. Widget areas, also known as “widgetized areas” allow themes to manage the placement of repeating widget content in various locations in left.

• Wordpress Widgets Sidebar
• Wordpress Widgets Disappeared
• Cool Wordpress Widgets
• Wordpress Widgets Plugin
• How To Use Wordpress Widgets

Topics

• Developing Widgets
• Examples

A widget adds content and features to a widget area (also called a sidebar). Widget areas provide a way for users to customize their site. A widget area can appear on multiple pages or on only one page. Your theme might have just one widget area or many of them.

Some examples of ways you can use widget areas are:

• Lay out a homepage using widgets. This allows site owners to decide what should appear in each section of their homepage.
• Create a footer that users can customize with their own content.
• Add a customizable sidebar to a blog.

A widget is a PHP object that outputs some HTML. The same kind of widget can be used multiple times on the same page (e.g. the Text Widget). Widgets can save data in the database (in the options table).

When you create a new kind of widget, it will appear in the user’s Administration Screens at Appearance > Widgets. The user can add the widget to a widget area and customize the widget settings from the WordPress admin.

Built-in versus stand-alone widgets #Built-in versus stand-alone widgets

A set of widgets is included with the default WordPress installation. In addition to these standard widgets, extra widgets can be included by themes or plugins. An advantage of widgets built into themes or plugins is to provide extra features and increase the number of widgets.

A disadvantage is that if a theme is changed or a plugin is deactivated, the plugin or theme widget’s functionality will be lost. However, the data and preferences from the widget will be saved to the options table and restored if the theme or plugin is reactivated.

If you include a widget with your theme, it can only be used if that theme is active. If the user decides to change their theme they will lose access to that widget. However, if the widget is included with a plugin, the user can change their theme without losing access to the widget functionality.

Anatomy of a Widget #Anatomy of a Widget

Visually, a widget comprises two areas:

1. Title Area
2. Widget Options

For example, here is the layout of the built-in text widget in the admin and on the front-end:

HTML output for this widget looks like this:

Each widget has its own way of outputting HTML that is relevant to the data being displayed. The wrapper tags for the widget are defined by the widget area in which it is being displayed. Massive for mac download.

The PHP code necessary to create a widget like the built-in text widget looks like this:

The code above will be explained in detail later in the article.

Developing Widgets #Developing Widgets

To create and display a widget, you need to do the following:

1. Create your widget’s class by extending the standard WP_Widget class and some of its functions.
2. Register your widget so that it’s made available in the Widgets screen.
3. Make sure that your theme has at least one widget area in which to add the widgets.

Your Widget Class #Your Widget Class

The WP_Widget class is located in wp-includes/class-wp-widget.php

The documentation for each of these functions can be found in the widget class code:

1. construct: Set up your widget with a description, name, and display width in your admin.
2. widget: Process the widget options and display the HTML on your page. The $args parameter provides the HTML you can use to display the widget title class and widget content class.
3. form: Display the form that will be used to set the options for your widget. If your widget doesn’t have any options, you can skip this function (although it is still best practice to include it even if it’s empty).
4. update: Save the widget options to the database. If your widget doesn’t have any options, you can skip this function (although it is still best practice to include it even if it’s empty).

Registering a Widget #Registering a Widget

The register_widget() function is used to register a widget.

Call this function using the widgets_init hook:

The HTML that wraps the widget, as well as the class for the title and widget content, is specified at the time you register the widget area using register_sidebar().

Examples #Examples

Example Text Widget #Example Text Widget

To build the text widget from the example at the beginning of this article. You will start by setting up a widget class that extends the WP_Widget class.

In the class constructor you will call the parent constructor and pass it your widget’s base ID and name. Also in the class constructor you will hook into the widgets_init action to register your widget.

Next you will declare the arguments you will use when creating your widget. There are four arguments you must define, before_title, after_title, before_widget, and after_widget. These arguments will define the code that wraps your widgets title and the widget itself.

After defining your arguments, you will define the widgets function. This function takes two parameters, the $args array from before, and the $instance of the widget, and is the function that will process options from the form and display the HTML for the widget on the front-end of your site. In the example above the widget function simply outputs the widget title, while passing it through the widget_title filter. It then out puts a simple widget wrapper and the content of the widget’s text field. As outlined in the example, you can access the options from the widget that are stored in the $instance.

Next you will define the form function. This function takes one parameter, $instance, and outputs the form that the user uses to create the widget in the Widgets admin screen. In the example above, the function starts by defining the $title and $text variables and setting them to the previously entered values, if those values exist. Then it outputs a simple form with a text field for the title and a textarea for the text content.

Lastly you will define the update function. This function takes two parameters, $new_instance and $old_instance, and is responsible for updating your widgets with new options when they are submitted. Here you simply define $instance as an empty array. You then set the title and text keys to the $new_instance values if they exist. You then return $instance.

Finally, when all of the above is defined, you instantiate your new widget class and test your work.

Sample Widget #Sample Widget

This sample widget can then be registered in the widgets_init hook:

Example with a Namespace #Example with a Namespace

If you use PHP 5.3 with namespaces you should call the constructor directly as in the following example:

and call the register widget with:

See this answer at stack exchange for more detail.

Special considerations #Special considerations

If you want to use a widget inside another template file, rather than in a sidebar, you can use the_widget() to display it programmatically. The function accepts widget class names. You pass the widget class name to the function like this:

You may want to use this approach if you need to use a widget in a specific area on a page, such as displaying a list of events next to a form in a section on the front page of your site or displaying an email capture form on a mega-menu alongside your navigation.

Description

Wordpress Widgets Sidebar

What is a widget area? Why would you add one to your theme? This lesson demonstrates how to add widget areas to your theme and how to add content to these areas.

Prerequisite Skills

• Basic knowledge of HTML and PHP
• Basic knowledge of WordPress widgets
• Understanding of the basic file structure of a WordPress theme
• Understanding of WordPress child themes
• Ability to manage files with FTP
• Ability to edit files with a text editor

Learning Objectives

After completing this lesson, you will be able to:

• Describe the purpose and functions of widget areas
• Practice the steps of adding a widget area to a theme
• Add widgets and content to a new widget area in a site

Assets

• Twenty Sixteen theme

Screening Questions

• Are you familiar with using widgets via the WordPress Dashboard?
• Do you have a basic knowledge of HTML and PHP?
• Are you able to use FTP and a text editor to edit code files?
• Do you understand the basic file structure of WordPress, including child themes?

Teacher Notes

• Performing a live demo while teaching the steps to add a widget area to a child theme is crucial to having the material “click” for students.
• It is easiest for students to work on a locally installed copy of WordPress. Set some time aside before class to assist students with installing WordPress locally if they need it. For more information on how to install WordPress locally, please visit our Local Install lesson plan.
• The preferred answers to the screening questions is “yes.” Participants who reply “no” to all 5 questions may not be ready for this lesson.

Hands-on Walkthrough

Introduction: What is a Widget Area

Today, you are going to learn how to add widget areas to a WordPress theme. Widget areas are used to create locations in theme template layouts that can hold widget content. In WordPress, the terms “sidebar” and “widget area” are related, but may seem confusing. For initial WordPress releases the sidebar could only be stationed on the side, and that’s where the name came from. Over time the requirements became more flexible and it’s now possible to add “sidebars” anywhere in a theme layout, so the name “widget areas” best describes this capability. The management of widgets in widget areas is managed in the Appearance > Widgets section of the Dashboard, where widgets can be added to and configured in widget areas with a drag and drop visual interface. In addition to the set of standard WordPress widgets, themes and plugins often provide custom widgets for adding specialized content and functionality.

Why use widget areas?

WordPress widgets are a powerful means to add content and features that repeat throughout a website, such as category lists, tag clouds, calendars, subscription signup, social media feeds, etc. Widget areas, also known as “widgetized areas” allow themes to manage the placement of repeating widget content in various locations in left or right sidebars, headers, footers, and any other specific section defined by a theme.

How do widget areas work?

There are three main steps to perform when adding a new widget area to a WordPress theme.

1. First, for WordPress to recognize a widget area, you need to register a new widget area in the functions.php file. After it’s registered, WordPress will add it as an option for placing widgets.
2. Next, you need to add the widget area to the desired location in your website’s theme. The file you need to modify depends on the location you want the widget to be displayed: header.php, footer.php, index.php, single.php, or another theme template file.
3. Finally, after the widget area is registered and after it is added to a theme file, you may add widgets to this new area to display on your website.

Creating a Widget Area

Scenario: You want to add a new widget to your website’s header section: a calendar for visitors to be able to switch between dates. You are going to create a new widget area in the default WordPress theme Twenty Sixteen. In actual practice, you should always modify a child theme and NOT a parent theme. Also, it’s important to make a backup of your site before you make any changes to code files.

Step 1: Register a Widget Area

If you are using a remote sandbox site, you may want to download files via FTP for editing. If you are using a local >sandbox site, you do not need to use FTP. You may use any text editor for this exercise, but do not use a word processor.

Open your theme’s functions.php file in your text editor. The file’s path should be: /wp-content/themes/twentysixteen. Add the following code to the end of the file and save it when you are finished:

You need to choose a name for this add_action function to distinguish it from others, and the function declares an array of values to characterize it. Here are what these values are determine:

• name – the name of the widget area as it will display in the WordPress administration dashboard
• id – a unique ID for this widget area
• description – description of the widget area
• before_widget – the markup generated before any widgets that will be added later on
• after_widget – the markup generated after any user-added widgets
• before_title – the markup generated before the title of any widgets that will be added later on
• after_title – the markup generated after the title of any user-added widgets

Now if you go to the Appearance > Widgets section in your WordPress administration dashboard, you’ll see new a new widget area (Header Sidebar) that appears in the list.

Step 2: Display the Widget Area

To be able to display the new widget area in the header, you need to edit the theme’s header.php. In actual practice, you would determine a proper placement of the widget area in the layout of the header template. For this exercise, you will simply add the new widget area at the bottom of the header, as a proof of concept to test that your new widget area works. Open header.php and add the following line to the bottom of the file:

This code checks that the theme is able to find the sidebar in functions.php, and then it is added to the page. Be sure to save the file with your edits.

Wordpress Widgets Disappeared

Step 3: Adding Content to the Widget Area

Now to add a calendar widget in your website’s header, go to Appearance > Widgets in the Dashboard and drag Calendar to Header Sidebar. Type in calendar title and save the changes. Check that your calendar is now displayed in the header area.

Summary

You have successfully added a new widget area to your website. You or a content manager could continue adding widgets to this widget area. Go forth and conquer!

Cool Wordpress Widgets

Exercises

Practice adding an additional widget area to your website. You may use the following scenario:

• You need to add a new widget area to the site’s footer
• The widget area needs to add a widget to list your site’s most recent comments

Quiz

What is the primary purpose of a widget area?

1. To replace the outdated sidebar function
2. To place repeating content and features throughout a website
3. To embed Facebook comments in a sidebar
4. To embed media in a post

Answer: 2. To place repeating content and features throughout a website What is the first step for adding a new widget area?

Wordpress Widgets Plugin

1. Add it to theme’s widget.php file
2. Add it to theme’s style.css
3. Register it in the theme’s functions.php
4. Find a new theme that has the widget area you need

Answer: 3. Register it in the theme’s functions.php Which of the following locations can hold a widget area?

1. Theme’s sidebar
2. Theme’s footer
3. Theme’s header
4. All of the above

How To Use Wordpress Widgets

Answer: 4. All of the above