Posted in wordpress

How to add a Menu to your WordPress Theme footer.php

Adding a Menu to the Footer

When I create a custom WordPress theme for my clients I like to create a footer menu as well. This is useful for adding links to contact, sitemap and back to top. Here are the steps to edit your own theme.

In this tutorial you are going to edit the functions.php, footer.php, and style.css files. If you modify theme files directly your customization will disappear when the theme updates. So create a child theme first.

Create a secondary menu area

Add the following code to the functions.php file for your twenty ten child theme

// This theme uses wp_nav_menu() in two locations.  
register_nav_menus( array(  
  'primary' => __( 'Primary Navigation', 'twentyten' ),  
  'secondary' => __('Secondary Navigation', 'twentyten')  
) );

Tell WordPress where the secondary menu should be used

Open your footer.php file and add the following code wherever you want the secondary menu to appear.

capture image

Style the menu

Open your css file and create a class bottomMenu and add your own styling. Here is an example.

.bottomMenu { display: block; width:960px;}
.bottomMenu ul { display:inline; float:right;}
.bottomMenu li { list-style-type: none; display: inline; font-size: 12px; }
.bottomMenu li a {
	color:#000;
	line-height:15px;
	text-decoration:none;
	font-weight:normal;
	border-right: thin solid #000;
	padding: 0 7px 0 3px;
}
.bottomMenu li a:hover { color:#ccc; text-decoration:underline;}
.bottomMenu li:last-child > a {border-right: none;} /* remove pipe from last item */

Create the Menu

  • Go to Appearance -> Menus and click the + to create a new menu
  • Name the menu e.g. “footer”
  • Add published pages such as contact, sitemap, privacy policy to the menu
  • Drag and drop menu items to order them
  • Save the menu
  • Set the Secondary Menu (you created this with the edit to the functions.php file) on the left side to use this newly created menu
Advertisements

Author:

I am Wordpress Developer.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s