WordPress Tutorials Index | Web Page Design Tutorials Home

WordPress Create Widget Area for Child Theme (Part 2)

Creating a new WordPress widget area is rather easy and simple. Two files are usually involved – functions.php and the file that used to display the widget. Actually it involves the following two steps in order to create a new widget area:

  1. Register the new widget in functions.php file. We need to tell WordPress program that we need to add a new widget.
  2. Add the new widget to the required location, for example, header, so that it will be displayed when the codes are executed.

Confused? Okay, let’s start creating a new widget area and everything should be cleared.

Create New Widget Area at Navigation Bar

We are going to create a new widget area in the top navigation bar. Remember that the new widget area can be anywhere on the blog.

Create widget area for WordPress child theme

Register New Widget in functions.php File

The first step is to register the new widget in functions.php file. I noticed that many web designers register the new widget in functions.php of the parent theme directly as shown below:

Create widget area for WordPress child theme

Since we are going to create the new widget area for our WordPress child theme, this is better not to modify the functions.php file of the parent twentyten theme. The procedures are very simple:

1. Create a new functions.php under the alexten child theme.

Create widget area for WordPress child theme

2. Register the new widget area with the new functions.php file of the child theme. The codes are:

<?php


// New Widget Area, located in the navigation menu. Empty by default.
register_sidebar( array(
‘name’ => __( ‘Navigation Menu Widget Area’, ‘twentyten’ ),
‘id’ => ‘navigation-menu-widget-area’,
‘description’ => __( ‘The navigation widget area’, ‘twentyten’ ),
‘before_widget’ => ‘<li id=”%1$s” class=”widget-container %2$s”>’,
‘after_widget’ => ‘</li>’,
‘before_title’ => ‘<h3 class=”widget-title”>’,
‘after_title’ => ‘</h3>’,
) );

?>

3. Add the new widget to the required location. As we learned before that the navigation menu can be managed with the header.php file.

Open the header.php file. Delete the codes as shown below since we will use a widget in the navigation menu.

Create widget area for WordPress child theme

Now we need to insert the widget codes in the navigation menu. But how do we know the codes of the widget? Of course, the best way is to copy the existing widget codes to the navigation menu.

The widget codes can be found in the sidebar-footer.php of twentyten parent theme.

Create widget area for WordPress child theme

Open the sidebar-footer.php file, the widget codes of individual area can easily be identified:

Create widget area for WordPress child theme

Copy the codes to the navigation menu of functions.php of alexten child theme. Remember to change the name of id of the widget as shown below:

Create widget area for WordPress child theme

Okay! Visit the WordPress blog to see what it looks like now:

Create widget area for WordPress child theme

Oh! The navigation menu disappear! Why? Because the new widget area is empty by default. Let’s add a widget to the new widget area.

Log in WordPress Admin Panel, navigate to Dashboard -> Appearance -> Widgets

The new Navigation Menu Widget Area appear above the Primary Widget Area.

Create widget area for WordPress child theme

Drag a Text Widget to the empty Navigation Menu Widget Area. Write something to test if the new widget is working properly or not.

Create widget area for WordPress child theme

Refresh browser again to see the changes:

Create widget area for WordPress child theme

Yeah! The new Navigation Menu Widget Area is working properly.