- WordPress adding widget area
- How to Register a Widget Area
- How to display new Widget Areas
- Create New Widget Area Using Custom Function
- Widget Areas
- Prerequisite Skills
- Learning Objectives
- Screening Questions
- Teacher Notes
- Hands-on Walkthrough
- Introduction: What is a Widget Area
- Why use widget areas?
- How do widget areas work?
- Creating a Widget Area
- Step 1: Register a Widget Area
- Step 2: Display the Widget Area
- Step 3: Adding Content to the Widget Area
- How to Add Custom Widget Areas to WordPress
- WordPress Widgets
- Installing Widgets
- Displaying Widgets
- Existing Widgets in Existing Widget Areas
- Widget Areas
- Using Text Widgets
- Adding Code to the Text Widget
- Using RSS Widgets
WordPress adding widget area
Widgetizing is a pseudo word that describes the process of implementing Widgets and Widget Areas into your Theme.
How to Register a Widget Area
The following should be added to your Theme’s functions.php file:
How to display new Widget Areas
You can display your new widget area by:
- Adding the code directly to a theme file like the sidebar.php file; or
- Using a custom function with hook in your functions.php file.
Here’s some example code that is a common way to add your new widget area to a parent or child theme:
The above code can be added to your sidebar.php file. It checks to see if the widget area is populated (i.e. is active) and then displays the contents of the widget if active.
This is the function which outputs the widget:
The code above will display the widget registered with an ID value of ‘home_right_1’. When displaying a widget on your site, remember to replace ‘home_right_1’ with the ID value you specified when you registered your widget.
For more information, please refer to the Widgets API to learn how to, programmatically, display Widgets and Widget Areas.
If you’re not a programmer, you should refer to the WordPress Widgets page.
Create New Widget Area Using Custom Function
You can use WordPress or theme specific hooks to display new widget areas in your theme directly from your parent or child themes functions file.
The above code displays a new widget area before all single posts and pages in any theme using the_content  filter however it is suggested you use theme specific hooks if your theme includes them.
Note: You will also need to register a new widget area using the same ID as what you use in the dynamic sidebar which in this example is before-post.
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.
- 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
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
- 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?
- 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.
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.
- 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.
- 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.
- 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 determine:
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 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.
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 the calendar title and save the changes. Check that your calendar is now displayed in the header area.
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!
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
What is the primary purpose of a widget area?
- To replace the outdated sidebar function
- To place repeating content and features throughout a website
- To embed Facebook comments in a sidebar
- 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?
- Add it to theme’s widget.php file
- Add it to theme’s style.css
- Register it in the theme’s functions.php
- 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?
- Theme’s sidebar
- Theme’s footer
- Theme’s header
- All of the above
Answer: 4. All of the above
- Duration30 mins
- Experience LevelНачинающий
- Instruction TypeДемонстрация
- Версия WordPress:5.7
Found a typo, grammar error or outdated screenshot?
Used this lesson plan in your event and have some suggestions?
How to Add Custom Widget Areas to WordPress
One of the issues every website owner or creator faces is how to make their website more visually engaging and improve user retention. The benefits are quite clear, the longer a visitor stays on the site, the higher the chance of newsletter subscriptions, sales, or ads revenue. You can spark visitors’ interest by making useful and engaging content, but you can also include carefully picked widgets to captivate the visitors and keep them on your site longer. However, you also need to find just the right number of widgets to use, as having either too few or too many can backfire on you. This is, in part, why theme developers have created default widget areas. These areas let users drag and drop different widgets in them. The same widget areas can target different pages or parts of the content. The number of default widget areas can range quite substantially depending on the theme. But, no matter how many are present, having the option to add more custom widget areas that would be tailored to your needs can be quite useful. As such, we decided to make this comprehensive guide explaining how to create additional widget areas. Using the steps outlined in this article, you can make a stunning website that grabs the attention of its visitors and keeps them engaged.
If you’d like to skip to any specific part of the article, just click on one of the links below:
WordPress Widgets add content and features to your Sidebars. Examples are the default widgets that come with WordPress; for Categories, Tag cloud, Search, etc. Plugins will often add their own widgets.
Widgets were originally designed to provide a simple and easy-to-use way of giving design and structure control of the WordPress Theme to the user, which is now available on properly “widgetized” WordPress Themes to include the header, footer, and elsewhere in the WordPress design and structure.
Widgets require no code experience or expertise. They can be added, removed, and rearranged on the Theme Customizer or Appearance > Widgets in the WordPress Administration Screens.
Some WordPress Widgets offer customization and options such as forms to fill out, includes or excludes of data and information, optional images, and other customization features.
The Block-based Widgets Editor explains how to use the updated Widgets experience with blocks.
The Appearance Widgets Screen explains how to use the various Widgets that come with WordPress in the Classic experience.
Plugins that come bundled with widgets can be found in the WordPress Plugin Directory.
WordPress comes pre-packaged with a variety of Widgets. If those are insufficient for your needs you can install new ones by searching the WordPress Plugin Directory which is accessible from the WordPress Administration Plugins > Add New Screen.
Existing Widgets in Existing Widget Areas
Before you can add a Widget you must verify that the Theme you’re using supports Widgets (more specifically: Widget Area). You can do so by simply navigating to the Appearance menu and looking for a sub menu titled “Widgets”.
If your Theme supports Theme Customizer then you can use the following Steps. In Theme Customizer, the live preview of changes is available.
- Go to Appearance > Customize in the WordPress Administration Screens.
- Click the Widget menu in the Theme Customizer to access to the Widget Customize Screen.
- Click the down arrow of Widget Area to list the already registered Widgets.
- Click Add a Widget button at the bottom of sidebar. It shows the list of available widgets.
- Click a widget you want to add. The widgets should be added in the sidebar.
- Preview your site and you should see the content from your new Widget.
- To arrange the Widgets within the Sidebar, drag and drop the widgets in the order you want or click Reorder link and click up arrow and down allow of each widget and click Done after the arrange operation.
- To customize the Widget features, click the down arrow in the right to expand the Widget’s interface.
- To remove the widget, click Remove from Widget’s interface in above step.
If your Theme does not support Theme Customizer then you can use the following conventional steps:
- Go to Appearance > Widgets in the WordPress Administration Screens.
- Choose a Widget and either drag it to the sidebar where you wish it to appear, or click the widget, (select a destination sidebar if your theme has more than one) and click the Add Widget button. There might be more than one sidebar option, so begin with the first one. Once in place, WordPress automatically updates the Theme.
- Preview the site. You should find that the “default” sidebar elements are now gone and only the new addition is visible.
- Return to the Widgets Screen to continue adding Widgets.
- To arrange the Widgets within the sidebar or Widget area, click and drag it into place.
- To customize the Widget features, click the down arrow in the upper right corner to expand the Widget’s interface.
- To save the Widget’s customization, click Save.
- To remove the Widget, click Delete.
If you want to remove the widget but save its setting for possible future use, just drag it into the Inactive Widgets area. You can add them back anytime from there. This is especially helpful when you switch to a theme with fewer or different widget areas.
When changing themes, there is often some variation in the number and setup of widget areas/sidebars and sometimes these conflicts make the transition a bit less smooth. If you changed themes and seem to be missing widgets, scroll down on the screen to the Inactive Widgets area, where all of your widgets and their settings will have been saved.
Enabling Accessibility Mode, via Screen Options, allows you to use Add and Edit buttons instead of using drag and drop.
While widget areas typically occur in webpage sidebars, a theme can place widget areas anywhere on a page. For example, besides the usual sidebar locations, the Twenty Seventeen theme has a widget area in the footer of every page.
Using Text Widgets
The Text Widget is one of the most commonly used WordPress Widgets that comes with every WordPress installation. It allows users to add text, video, images, custom lists, and more to their WordPress sites.
To use the WordPress Text Widget:
- Go to Appearance > Customize in the WordPress Administration Screens and click the Widget menu in the Theme Customizer. Or Go to Appearance > Widgets in the WordPress Administration Screens.
- Open the sidebar to which you wish to add the Text Widget.
- Find the Text Widget in the list of Widgets.
- Click and drag the Widget to the spot you wish it to appear.
To open and edit the Text Widget:
- Click the down arrow to the right of the Text Widget title.
- Set the Text Widget Title (optional).
- Add the text or HTML code to the box or edit what is currently there.
- Choose the option to Automatically add paragraphs to wrap each block of text in an HTML paragraph tag (recommended for text).
- Click Save to save the Text Widget.
- Click Close to close the Text Widget.
- Switch tabs in your browser and preview the results and make changes if necessary.
The Text Widget can hold a variety of HTML, XHTML, and multimedia links and players such as video and object embeds.
Adding Code to the Text Widget
To add active code to the Text Widget, use one of the many WordPress Plugins from the WordPress Plugin Directory that override WordPress restrictions on using PHP in posts. Check that they will work on Widgets as some will not.
Using RSS Widgets
The RSS Widget allows you to integrate an external feed source for content into a Widget area of your site, such as your Twitter account, Facebook posts, Google+ posts, or other blogs.
The RSS Widget displays the most recently published content from any source with an active feed. This is an ideal way of integrating outside content into your site.
By default, WordPress RSS Widget displays the post title or the first 100 or so characters of a Tweet or long untitled post. These are either in the form of a link or features a link to the original source depending upon the feed’s design and structure.
- Enter the RSS feed URL in the first box, copied from the source page for the content you wish to include in your sidebar or other widgetized space.
- Give the feed a title: This is optional and gives you the chance to showcase the source of the content.
- How many items would you like to display?: By default, 10 are show, but you can choose from 1-20 posts.
- Display item content?: This allows you to show an excerpt of the content not just the title.
- Display item author if available?: If you wish to give credit to the original author of the content, check this to display the author.
- Display item date?: If available, the date of the original content will be shown.
You may add multiple RSS Widgets for incoming feeds to your WordPress sidebar and other widgetized areas of your site.