Adding a Footer Menu to Twenty Eleven Theme WordPress

To add a menu to the footer of the WordPress Twenty Eleven, Twenty Ten or other themes, you need to register an additional menu, create it, position it and style it.

This is best done in a child theme as when the theme is updated then any changes you make are lost but if you have a child theme they will be retained.

Register the Menu

Open the functions.php in the parent theme, go to line 100 and copy the register_nav_menu line below:

 register_nav_menu( 'primary', __( 'Primary Menu', 'twentyeleven' ) );

Create  a child theme ‘functions.php‘ file in your child theme directory and paste in the contents above – then duplicate the ‘register_nav_menu line’ and rename ‘primary’ to ‘footer’ where it appears twice so you end up with the below… (make sure your functions.php file starts with a opening php tag.

<?php
register_nav_menu( 'primary', __( 'Primary Menu', 'twentyeleven' ) );
register_nav_menu( 'footer', __( 'Footer Menu', 'twentyeleven' ) );

Save the file.

Create the Menu

Now you see the menu in the front end.

Now you can create a menu in the right pane as above and assign it to the Footer Menu on the left.

Position the Menu

Now time to position the footer menu, you need to copy the whole file ‘footer.php‘ from the parent and put in your child theme. The extra code to add is below, position it where you like in the footer.php:

<div id="footerMenu">
 <?php wp_nav_menu( array( 'container_class' => 'menu-footer', 'theme_location' => 'footer' ) ); ?>
 </div>

I prefer to take out the WordPress Site Generator and place the menu just before the closing footer tag.

<footer id="colophon" role="contentinfo">
<?php
 /* A sidebar in the footer? Yep. You can can customize
 * your footer with three columns of widgets.
 */
 get_sidebar( 'footer' );
 ?>
 <div id="footerMenu">
 <?php wp_nav_menu( array( 'container_class' => 'menu-footer', 'theme_location' => 'footer' ) ); ?>
 </div>

 </footer><!-- #colophon -->
</div><!-- #page -->
 </div>

 <?php wp_footer(); ?>
</body>
 </html>

Style the Menu

Add some CSS styling and you are good to go, add the style to the end of your child theme style.css file:

#footerMenu {
border-top: 5px solid #E7E2EC;
}

#footerMenu li {
text-align: justify;
padding-left: 1em;
padding-bottom: .4em;
padding-right: 2em;
padding-top: .4em;
font-size: 12px;
font-weight: bold;
display: inline;
text-decoration: none;
font-style: normal;
}

#footerMenu ul {
list-style: none;
margin: 0 35px;
padding: 0;
}

#footerMenu a:focus, a:active, {
text-decoration: none;
}

#footerMenu a:hover {
text-decoration: none;
background-color: #999;
color: #333;
}