Free Wordpress Help | How To Add A Menu Navigation Bar To A Theme That Doesn’t Have One

Ask me a question at the Wordpress Ninja Forum

 

How To Add A Menu Navigation Bar To A Theme That Doesn’t Have One

Posted on March 6, 2009
Filed Under Guides, Themes, Wordpress Solutions |

Ok, so I have had this requested quite a few times now, where someone has found a cool theme such as Prosense but wants to add a Navigation bar.  A typical ‘Navigation’ or ‘Menu’ bar is like a horizontal section under the header that contains hyperlinks of the Wordpress Pages in your blog.  These can be plain text links or tabs or buttons even that change color or effect when you hover over them.

Ok, so how do we add this stuff to our theme?  There’s two things we need to change – the first is in your header.php file and the second is in the style.css file.  In the header.php you need to add the code that will call the navbar from the CSS file – I have added an example here which does just that.  This example also adds an initial ‘Home’ tab as the first tab on the left which is a link back to your blog homepage – it also sets it as the initial ‘selected’ tab or button.  This code should be added where you want the menu bar to appear i.e. if you have your header title graphics and your RSS you would probably want to add the bar under that, so you need to follow your header.php file code to check where to put it.  Typically this would be at the end of the header file before the final </div>.  You may need to experiment though to see where the best location is for this block of code.

<div id="menu">

<ul>

<li class="page_item current_page_item"><a href="<?php bloginfo('url'); ?>/" title="Homepage">Home</a></li>

<?php wp_list_pages('title_li=0&depth=1'); ?>

</ul>

</div><!-- end id:menu -->

Next you need to add the CSS code that is called by the header.php code.  It should be added to your style.css file and slotted in after the header stuff (not critical but keeps it tidy).  Continuing the example above, it would look something like this:

#menu{

height: 1%;

overflow: hidden;

margin-left: 80px;

}

#menu ul{

margin: 0;

padding: 0;

}

#menu ul li{

float: left;

display: inline;

margin: 0;

padding: 0;

}

#menu ul li a{

padding: 8px 20px;

display: block;

text-decoration: none;

}

#menu ul li a:link, #menu1 ul li a:visited{

background: #222 url(images/menu.png) top left repeat-x;

color: #ddd;

border-left: 1px solid #333;

border-top: 1px solid #333;

}

#menu ul li a:hover, #menu1 ul li a:active{

background: #333 url(images/menu.png) 0 -100px repeat-x;

color: #fff;

text-decoration: none;

border-left: 1px solid #099F06;

border-top: 1px solid #099F06;

}

#menu ul li.current_page_item a:link, #menu1 ul li.current_page_item a:visited{

background: #000 url(images/menu_visited.png) top left repeat-x;

color: #fff;

border-left: 1px solid #000;

border-top: 1px solid #000;

}

Of course you can make any modifications to this CSS code to change the effect, borders, colors, style, padding etc.  I recommend trying out this code and seeing how it looks, then you can modify it as required.  I need to note that you can make up a couple of cool buttons images in Photoshop (like i have used in this example - menu.png and menu_visited.png) or you can just use plain colors - determined by the ‘background : #<hex color value>” value above.  You would use funky button images if you wanted to have a gradient or maybe some totally customized image of something.

Dont forget to backup your old files before uploading and overwriting the style.css and header.php files on your server.

I wont go into all of the values and parameters from above just now, but feel free to ask me if you need any help with any of them.  Basically my advice is experiment! :)

Comments

6 Responses to “How To Add A Menu Navigation Bar To A Theme That Doesn’t Have One”

  1. Articles about Text Links as of March 6, 2009 | The Lessnau Lounge on March 6th, 2009 7:15 pm

    [...] [...]

  2. Jess on March 20th, 2009 10:09 pm

    Thanks so much for doing the coding for me! I was so excited to find some good instructions on how to do this.

    I also found some great plugins to help supplement my new tabs. Just search for their names in the WP Plugin Browser/Installer to find them easily and automatically install.

    ‘Page Links To’- allows you to make tabs that link to sites outside of you blog. A great feature since I write two separate blogs that I wanted to link together.

    ‘List Pages Plus’- lets you choose which pages you want to actually show as tabs. A nice feature since I have a bunch of pages that I use for other purposes.

    To see this in action, check out my blog at http://affordableutahweddings.com/

    Thanks again!

  3. selva on July 27th, 2009 1:11 pm

    Hi,I dno’t know how to add tabber bar in my page.
    can u help me!!!

    Advance Thanks!!

  4. Nathan on September 8th, 2009 10:20 pm

    Don’t know if you’re still taking questions on this post, but I have one: if I want to put a different color behind each button, instead of one long background color for the whole menu, is that possible? Along with that, I’m going to be inverting the button style for the hover, so if it’s a green button with white text, it will be a white button with green text when you hover.

    Any advice? Thanks.

  5. Adam on November 16th, 2009 2:15 am

    Thank you so much! This is exactly what I was looking for. I’m even using the Prosense theme so this was tailored to my exact needs.

    Thanks!

  6. uggs outlet on January 20th, 2010 6:39 am

    I need a little time reading this article, but to taste this article carefully needs very long time.
    Admin,I will always come to your blog.

Leave a Reply




Ninja This!
Diggdel.icio.usFurlStumbleUponTechnorati

 

Related Posts:

    Wordpress Theme Customizations - Header Images With Hyperlinks

    Image And Paragraph Spacing In Wordpress Posts

    Why Do Wordpress Themes Sometimes Not Display Properly?

    How To Create A New Section Of 'Pages' And Have The Links Populate Automatically