How to Add a Navigation Bar in Your Footer

This tutorial will teach you how to add a customized navigation bar to your wordpress footer using the power of hooks in the Thesis Theme. All you need is access to your custom.css and custom_functions.php files.

First off, copy and paste the following code into your custom_functions.php file:

<?php

function footer_nav_menu() {?>

<div id="custom_footer_nav">
<ul>
<li>
<a href="http://www.yoursite.com/">Home</a>
</li>
<li>
<a href="http://www.yoursite.com/about/">About</a>
</li>
<li>
<a href="http://www.yoursite.com/contact/">Contact</a>
</li>
<li>
<a href="http://www.yoursite.com/privacy/">Privacy</a>
</li>
<li class="noborder">
<a href="http://www.yoursite.com/advertise/">Advertise</a>
</li>
</ul>
</div>
<?php
}
add_action('thesis_hook_footer', 'footer_nav_menu');

That will add the Nav Menu to your footer and give it an ID of “custom_footer_nav”. I set the default categories to “Home,” “About,” “Contact,” “Privacy,” and “Advertise.” You’ll want to change those as well as the links pointing to them. Now lets style it.

In your custom.css file add the following:

.custom #custom_footer_nav {text-align: center; }

.custom #custom_footer_nav ul {
list-style-image:none;
list-style-position:outside;
list-style-type:none;
margin:0;
padding:0 0 20px;
font-size: 1.5em;
}

.custom #custom_footer_nav li {
border-right: 1px solid #326FBE;
display: inline;
margin-right: 20px;
padding-right: 20px;
}

.custom #custom_footer_nav li.noborder {
border-right: 0px;
}

.custom #custom_footer_nav li a {
color:#777777;
font-weight:normal;
text-decoration:none;
}

Now you should have a custom nav bar in your footer with a 1px spacer between the categories. All colors and spacing can be changed in your custom.css file.

Next time I work with footers I’ll show you how to add some images and really make it stand out. If you use this for your footer, leave a comment and let me know so I can take a look.

If you want to find me on Twitter, I'm {@4oclockproject}.