Widgetize the menu for the Twenty Eleven WordPress theme

File this one under the “this is almost so simple I can’t believe I’m writing a blog post for this” category, nonetheless it could help a few people and I didn’t see this mentioned anywhere else on the Internet.

If you have installed WordPress’s newish Twenty Eleven theme you may have noticed that it doesn’t support a widgetized menu by default. If you have a project that requires a widgetized menu you’ll have to customize it yourself. But don’t fret, because that is what this blog post will show you how to do.

The first step in doing this is to create a child theme of the Twenty Eleven theme. The reason is because if you customize the Twenty Eleven theme directly and then later update WordPress your customization will be completely blown away and your site will revert back to the default theme.

To create a child theme, navigate to your Themes folder on your WordPress install and create a new folder called “widgetized-twentyeleven.” Then create a style.css file with the following code:

{code type=codetype}

/*
Theme Name: Widgetized Twenty Eleven Theme
Theme URI: http://www.projectdomainname.com
Description: Child theme for the Twenty Eleven theme, customized to have a widgetized nav menu.
Author: Your Name
Author URI: http: //www.yourdomainname.com
Template: twentyeleven
Version: 1.0
*/

@import url("../twentyeleven/style.css");

{/code}

Once you have created this file, upload it to the folder you just created. Then log into WordPress and go to Appearance->Themes and activate the theme titled Widgetized Twenty Eleven Theme. Presto! Your child theme is activated, although it looks just like the default Twenty Eleven theme because we haven’t changed anything yet.

Now you’ll need to download a copy of the header.php file from the actual Twenty Eleven Theme and make one minor change to it. To make the change, find this line of code near the bottom of the file:

{code type=codetype}

<?php wp_nav_menu( array( ‘theme_location’ => ‘primary’ ) ); ?>

{/code}

then remove it and replace it with this:

{code type=codetype}

<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('MainMenu') ) : ?>
  <p>&nbsp;</p>
<?php endif; ?>

{/code}

This code is going to drop a widgetized menu into the theme. The name of the menu will be MainMenu, which will create in just a few seconds. For now, save this new header.php file.

Now you are going to create another file named functions.php and place the following code inside:

{code type=codetype}

<?php
register_sidebar( array(
	'name' => __( 'MainMenu', 'twentyeleven' ),
	'id' => 'sidebar-nav',
	'before_widget' => '',
	'after_widget' => "",
	'before_title' => '',
	'after_title' => '',
) );
?>

{/code}

After you have created the functions.php file, upload both the functions.php and header.php file to your child theme directory.

If you view your website you’ll notice that now the theme has no navigational menu at all. The reason is because we have changed the theme to drop in a widgetized menu, but we haven’t actually created the menu yet.

To create the menu, in WordPress navigate to Appearance->Menus. On the following page, enter Main Menu on the Menu Name field and click the Create Menu button. Add a page or two to your main menu and press the Save Menu button. Now go to Appearance->Widgets and drag the Custom Menu widget to your newly created MainMenu widget area. Don’t give the Custom Menu a title, just leave it blank. But in the select box, select the Main Menu which you just created and press the Save button.

That’s it. You should now have an easily customizable menu widget for the Twenty Eleven theme.

0 replies

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply