How to Easily Add Additional Widget or Navigation Areas to Your WordPress Website

WordPress is the most popular content management system (CMS) in the world used by many websites including popular blogs such as the Smashing Magazine. When using WordPress as the platform for your website, you will quickly discover that you need to have more widget or navigation menu areas. There are many tutorials out there that cover this topic in depth, but sometimes they are hard to wrap your head around, as the tutorials can be unnecessarily complicated.

More WordPress tutorials you can find here: WordPress video tutorials

Related Posts:

• Responsive Design Books for Smarter Design
• 40+ Best Responsive Design Tutorials
• Secrets of Responsive Web Design
• How to Create Responsive WordPress Web Design?

Let’s take a step back and simplify the process.

Adding a New Widget Area

There are two files that we should modify in order to add a new widget area. One is your theme’s functions.php file and the other file will depend on where you want to locate  the widget area. If you want a new widget area in the header, then you would need to modify header.php file as well.

In this tutorial, we will want to add a new widget area in the header (header.php file). In WordPress, a widget area function is called dynamic_sidebar. It is mainly used for sidebars, but there are no limitations as to where it can appear on the page.

Step 1: Edit the functions.php file

Open your functions.php file and search for “register_sidebar”. You should find code similar to the one shown below.

function blankslate_widgets_init() {
register_sidebar( array (
'name' => __('Sidebar Widget Area', 'blankslate'),
'id' => 'primary-widget-area',
'before_widget' => '<li id="%1$s" class="widget-container %2$s">',
'after_widget' => "</li>",
'before_title' => '<h3 class="widget-title">',
'after_title' => '</h3>',
));
}


Register_sidebar is the function that defines each sidebar or widget area. So we will just add additional one to our code as shown below.

function blankslate_widgets_init() {
register_sidebar( array (
'name' => __('Sidebar Widget Area', 'blankslate'),
'id' => 'primary-widget-area',
'before_widget' => '<li id="%1$s" class="widget-container %2$s">',
'after_widget' => "</li>",
'before_title' => '<h3 class="widget-title">',
'after_title' => '</h3>',
));
register_sidebar(array(
'name' => __('Top Right', 'blankslate'),
'id' => 'top-right-widget-area',
'before_widget' => '',
'before_title' => '<h3 class="widget-title">',
'after_title' => '</h3>',
'after_widget' => ''
));
}

The crucial parts are the name, the theme name, and the ID. I named my widget area “Top Right”, the theme name is blankslate, and the ID is “top-right-widget-area”.

Step 2: Edit the header.php file

Find the place in the code where you want your widget area to live. If you want it to be in the top right section of the header, then add the code after the DIV for the logo. After that you can float it to the right with your CSS styles.

In our example, we will add the widget area with the following code:

<div id="top-right">
<?php dynamic_sidebar('top-right-widget-area'); ?>
</div>

Remember the ID of the widget area (“top-right-widget-area”) in the previous step? This is where we will use it to call that widget area.

Once these two changes are saved, you should see the new widget area appear in your WordPress admin screen. Keep in mind that in most cases you will also need to style the DIV around your widget area so that you can control its exact size and location.

Adding a New Navigation Menu Area

Similar to the widget area, the navigation menu area allows you to specify which navigation menu goes into which navigation location. This feature is new since WordPress 3.0.

The WordPress function that is used to load the navigation is called wp_nav_menu. Just like the widget area, the navigation area will require two files to be changed. One is the  functions.php file again, and the other is the file where you want the navigation to appear. For our sake, we will say we want the navigation to be in the footer, so we will change the footer.php file.

Step 1: Edit the functions.php file

Search for “register_nav_menus”in your functions file. You should find the code similar to the one below.

register_nav_menus( array(
'main-menu' => __( 'Main Menu', 'blankslate' )
) );

We will add an additional item in the array, so it should look like this:

register_nav_menus( array(
'main-menu' => __( 'Main Menu', 'blankslate' ),
'footer-menu' => __( 'Footer Menu', 'blankslate' )
) );


Note the line we added for the footer menu. The first quoted part of the array (“footer-menu”) is what we will use to call the navigation menu area in our code.

Also keep in mind that the last item in a PHP array should not have a comma at the end.

Step 2: Edit the footer.php file

Now that our new navigation area is registered in the functions file, we are ready to add it to our footer file. Open the footer.php file and find the location where you want to add your new navigation area.

In this example, we will just add it directly after the <footer> HTML tag. This tag might not necessarily appear in your footer file as it varies depending on how your theme was originally coded.

<div class="footer-nav">
<?php wp_nav_menu( array( 'theme_location' => footer-menu' ) ); ?>
</div>

Once we save our footer file, the new navigation area should show up in the WordPress admin screen.

As with new widget areas, we will still need to add CSS to our stylesheet to make sure the new navigation menu looks exactly as we want it. The navigation menu will automatically have CSS classes applied for active, parent, and child list elements so the possibilities of how it can look are endless.

And there you have it! Knowing how to add additional widget and navigation areas to your WordPress theme are crucial to customizing your website just the way you want it.

Customizing WordPress #10 - Adding A Widget Area To Your Template