Wordpress Navigation Bar

Filed in: WordPress — May 7th, 2005

 

Many have asking me about how to add the top navigation bar to the Wordpress like my blog. I was doing it manually by adding CSS and HTML code. To make it easier for general bloggers, I made the following Wordpress Navigation Bar hack.

wordpress navigation bar

What it does?

Add a navigation bar under template header image. The navigation bar has a tab that link to blog URL and auto add Wordpress ‘pages’ link tabs.

How to apply?

There are two ways to apply:

  1. Copy and paste the Wordpress Navigation Bar code to the end of /wp-content/themes/default/header.php.
  2. OR, Easier method. Download the modified header.php, extract it to /wp-content/themes/default/ (replace existing header.php file).

Credits:

Note: This hack is designed for Wordpress default theme(kubrick) only. However, you may modify it as you want.

FAQ

  1. How do adjust the position of the navigation bar?
    Simply modify the values of “top” and “left” under “#supernav”.
  2. How to list Pages by menu order?
    Find:
    <?php wp_list_pages('title_li='); ?>
    then, replace it with:
    <?php wp_list_pages('sort_column=menu_order&title_li='); ?>
    More details are available at WordPress Codex/wp list pages.
  3. How do I add custom URL into the navigation bar?
    Sorry, you can’t. The hack code only creates tabs based on your WordPress Pages.

Read also:

«
»
  • I always mess things up when I try to hack my wordpress. I'll give this a try...thanks a lot for the tute
  • Hi it simple but great tutorial. thanks.
  • Martin,

    If you change the '2px' below to '0px', that white stripe will no longer show up. I had the same issue on my site.

    #hack {
    background: white;
    height: 2px;
  • Liew, actually you can put an url in your navbar yourself. Pick one you like and code like this:
    ">/wordpress/wp-content/plugins/falbum/wp/album.php">photos
    You see? Easy like cake...
    Liew can you help me with something else about the navbar? It looks like the 'hack' bit in the CSS shoves my theme a bit around. I see a 2 pixel high white stripe at the bottom of the footer. Why I wonder?
  • Ben
    Liew! Your code rocks as usual. Simple, purposeful! Thanks! B
  • Hi Liew, I'm using your plugin and it works great. Im trying to incorporate a wordpress store plugin, but when i do it creates extra pages in the header. Now, i realize that is the problem of the other plugin not yours, but is there a way to make pages that do not display in the nav bar. i think that would help things out a bit.
  • UPDATE again:
    it's not browser specific nor OS specific, it's resolution specific.
    I am view the site on different computer with different resolutions, it's not standard.
    Is there a way to fix this so that it is standard no matter what resolution you view it?
  • UPDATE:
    Ok, it looks fine now in Firefox on my Mac but it's still screwed up in IE on Windows.
    HELP!
  • It's gotten worse.
    It looks fine now in Firefox on my Mac but it is way off in Internet Explorer on Windows.
    And, for some reason, I now have a a line through my blog title in Firefox but not in Internet Explorer.
    I'm freaking out!
  • This is a awesome hack.
    I tried it but I wanted it shifted to the right instead of the left but it's not working correctly.
    I know nothing about .php. Would someone help me with this?

    http://www.thepodcastreview.com/
  • It was awesome, a big thanks for you!!!
    After nights of constraction, its work perfectly now...

    Again, Thanks for your contributions!
  • Any chance to get this running with subpages enabled? Using depth=1 will totally f*ck up the menu... :(
  • Pud
    For people using the default (kubrick) header I use -20px and "relative" and it seems to work fine for me (www.pudweb.com). i.e.

    #supernav {
    font: bold 9px/9px Verdana, Lucida Grande, Arial, Helvetica, Sans-Serif;
    position: relative;
    top: -20px;
    left: 50%;
    width: 720px;
    margin: 0 0 0 -360px;
    padding: 5px 16px; /* duplicate the tab size */
    text-align: left;
    display: block;
    }

    I have also tweaked the PHP highlighting code so that it works (a little better) with the WPG2 (Wordpress Gallery2) plugin by changing header.php

    <div>
    <ul id="supernav">
    <li class="<?php if (( (is_home() ) && !(is_paged()) && !(strstr($_SERVER['PHP_SELF'], ' wp-gallery2.php'))) or (is_archive()) or (is_single()) or (is_paged()) or (is_search())) { ?>current_page_item<?php } else { ?>page_item<?php } ?>"><a href="<?php echo get_settings('home'); ?>">blog</li>
    <?php wp_list_pages('sort_column=menu_order&title_li='); ?>
    </ul>
    </div>
  • one final question - I notice that when this navigation bar is running that the grey panel on the right dissapears on all the static pages, and is only visiible on the blog homepage. Is this a known issue?
  • also how would I go about changing the font/size of the text in the tabs?
    Thanks
    J
  • Great little navbar - exactly what I was looking for. However I want the navbar page order to be different - is there a hack that will ensure it uses Wordpresses page numbering system?

    Ive used this code hack in my Default template sidebar.php:

    Pages&sort_column=menu_order' ); ?>

    which ensures my page list on the right follows my order (set in manage pages > edit > page order) - but I need the top nav to follow suit.

    If anyone can help. thanks in advance

    James
  • Here's a workaround for all the people who want to put custom URLs in the navbar:

    – Create a new page. Name it whatever you want the link text to be.
    – Create a redirect on your server (for me there is a control panel option at my web host's site to do this), so that any calls for the page you created are instead redirected to your chosen url.
  • Livio
    sorry LcF, you got me wrong:

    The navigation bar sits at the right position. My Problem is, that the blog contents (means: below the bar) shifts down some px (about 8px) after changing to "relative" positioning :-( thats what I mean...so there is more space between the header and the content now...did you encounter such problems before?

    Thanx Livio
  • LcF
    @Livio: you can adjust the top, left, margin values of #supernav to re-position the navigation bar. It is a matter of trial and error.
  • Dear LcF,

    can you give me a hint, why my content has shifted down some px after changing position of the navigation bar from "absolute" to "relative" ? It doesn't look nice like that :-(

    many thanx

    Livio, Zürich
  • Alex
    I am kinda over it but got it working now, using the new kubrik fixed theme, and cut some of the background images. But thanks for your work
  • Alex
    no luck, redownloaded WP2 just in case, tried the original unchanged theme and reapplied the hack but same result, sidebar looses background color. Maybe this is by design ?
  • LcF
    revert to default theme (the original unchanged theme) and apply the hack again?
  • Alex
    hmm, i only changed the header image, if you look at my site: http://www.kentdome.com/wp/ notice the SIDEBAR has a gray background - now clicking any of the TOP NAV links will result in the page load but notice the sidebar is now WHITE, i have not changed any CSS. Additionaly even if one clicks on the SIDEBAR pages menu after the hack is installed the loaded pages sidebar background is white. Any ideas?
  • LcF
    @oomoney: the hack should work under WordPress 2.0 too.
    @Alex: this is weird. the code does not modify theme's background.
  • Alex
    Is it just at my end but once the hack is installed all pages loose the sidebar background color on the default theme?
  • Hello Liew,

    Is this hack works under Wordpress 2.0 ?

    Thanks.
  • LcF
    No, the hack does not support custom URL
  • Hi liew i downloaded your hack; I'am totally blind to programming;
    Could you tell me how to add links to the nav bar apart from my blog pages?
  • LcF
    @A.C.: I updated the entry for "sort pages by menu order" (FAQ).
  • A.C.
    How can we list these pages by menu order?

    Please help!
  • i was wondering the same how to change the hack to a tag might just be me been a noob but cant get my head round it. any ideas?
  • good
  • DevilStation
    jeezus it won't display its a - header 2 tag ... > h2
  • DevilStation
    oops I didn't quote it > I wanna sttyle it with a "" tag
  • DevilStation
    How can I style the font on this hack to an tag??
  • David
    Andy: the tab highlight is made possible by the custom CSS class generated by the wordpress list pages function. The wordpress list categories function does not generate custom CSS class.

    There are workarounds, anyway.

    If you know PHP coding, read http://codex.wordpress.org/Dynamic_Menu_Highlig...>

    If any of you have a working example of dynamic highlighting for a category list, could you please share it? I'm not understanding the right approach to use for categories. Thanks much.
  • benz
    Great Hack! Thank you very much for your work!

    Greetings from Switzerland
    benz
  • TJ
    LcF I love the hack but something just aint working right.... I have some weird white bar just stikin out at u on top of the tabs and the mouseover dont work... :S
  • didier
    here you can see the problem

    http://www.deiaco.com/~desfayes

    please help me! :-)
  • LcF
    didier: so it works. about the alignment problem, please show us a screeshot of it.
  • didier
    Hi Liew!

    Thanks for this hack!

    I gotta a question. The links in the navigation bar are sorted alphabetically. How can I change that? I tried to change in the header 'title_id' by 'sort_column=menu_order' but it didn't work. actually it worked but the alignement wasn't right
  • Andre
    And again: How is it possible to change the order of the tabs? I don't want them to be sorted alphabetically.
  • LcF
    Andy: the tab highlight is made possible by the custom CSS class generated by the wordpress list pages function. The wordpress list categories function does not generate custom CSS class.

    There are workarounds, anyway.

    If you know PHP coding, read http://codex.wordpress.org/Dynamic_Menu_Highlig...
    Or, try the catHighlight plugin.
  • Hi Liew,

    I tried changing the page tag to the category tag. It works ok, but now I am having a new problem. When you click a category the navigation bar does not correctly highlight the new category. The highlighted tab is always the blog tab. It doesn't seem to follow where you click correctly.

    Maybe you can see it. This would be so great if I could use it with categories and have it highlight correctly.
  • Hi,
    I solved it.
    The problem was with the CSS for "hack" div.

    The width specified was 450px ans my tabs were extending further then 450px.

    I increased it to 650 and its fine now.
  • hi,
    i am back with a question.

    I have integrated your tab navigation on my site (which is still in testing phase so the links point to "localhost")

    http://www.ssdesigninteractive.com/ssdesign

    The question i have is about the layout. If you see, there are 4 tabs at the top, the fourth one "contact" is not showing properly at the bottom, there is a cut in the design at the bottom.

    This cut is seen only in Firefox browser. If i se it in IE, it shows correctly (ofcourse without the rounding of the edges.)

    Can you guide me as to where might be the problem?
  • Thanks LcF

    I changed the code to this:


    and it works perfectly now :)
  • LcF
    Andy: in the code, delete the line: text-transform: lowercase;

    To use show categories, simply change the wp_list_pages to category template tag.

    Sajid: you may exclude some pages. Please check the template tag parameters for wp_list_pages
  • Hi,
    I am presently running a MT blog and planning to MIGRATE to Wordpress.

    I am testing your hack on my localmachine and everything is working perfect. Excellent hack and thanks for that.

    I have a question.

    I am using the "Static frontpage Plugin" by Denis de Bernardy.

    So I have created a PAGE called HOME, where I will be creating a static content page as the face of my blog.

    Now when I install your hack in header.php, I see TWO links in the tab navigation:

    "blog" and "home"

    Is it possible to exclude some PAGEs from displaying in the TAB navigation?

    or you might have a different suggestion for me here :)

    Thanks and looking forward to a reply.
  • Is there a way to make the navigation bar display categories instead of pages?

    I found an interesting way to display your navigation bar and I decided to use the temaplate based on your 3 column kubrick layout.

    A categories navigation bar instead of pages would be great!

    www.rawgreed.com
  • Is there anyway to make the text in the tabs the correct case. When I type "Contact" is shows up as "contact" in the tab.

    Thanks! It's a great navigation bar.
  • Andre
    The links in the navigation bar are sorted alphabetically. How can I change that? Ich want to have one link on the right (Impressum) and the rest sorted alphabetically. Thx in advance.
  • Any progress on turning this into plugin? I would also like to add a link that is not a wordpress page.

    I hacked the code to get it to include the tab, but obviously it is always coloured white... which is a little annoying!

    As you don't actually use the hack could you let me see your header.php file so I could work out how to manually edit my own...

    Cheers
    Andy
  • oh, thanks a lot, Liew, I've made it up so perfectly.! :)
  • LcF
    stchatterbox: it has nothing to do with the nav bar hack. Edit style.css, look for the style for "hack". Increase the width of it. ;)
  • liew, i've discovered a problem with your hack bar: when added with more links, [i've got 7] check out the right most one: it looks a bit strange. :) why?
    thanks
  • I don't think that what's been said above is a truth. :( Doesn't sound real...
  • thank for the info fren.
  • LcF - Totally fantastic hack, my friend. This is exactly what I was looking for. I had it up and running, and working with my own custom CSS in minutes. Thank you very much!

    The only thing I would add to the funtionality is a way of handling subpages. So far I dont' see any way that subpages integrate into your code. I'm not sure how I would do it on my own blog, but If I get something up and running I'll post another comment.

    Thanks again!
  • I am looking forward to having this in my blog
  • LcF
    you mean the navigation bar or the 3 column kubrick theme?

    You can check my source for the code and CSS. I am not using the navigation bar hack in this blog.
  • Fox
    Hey, whats the code for it on the 3 column kubrick theme like you have on this site? I am using the same theme here: http://foxscorner.com

    Thanks
  • thanks , :)

    a kiss
  • LcF
    @Derleth: in the hack code, look for "blog" and change it to "home". :)
  • I would like to change "blog" by "home" in the bar

    thanks
  • LcF
    what the hack do is create top navigation tab links for "Pages". Create an "archive" page then you will get a "archive" tab, and so on.

    For this blog, I manually create all the tabs. I am not using the hack.
  • Hi,

    I've just tried it, but is it only 1 link? how to make it has many links just like yours there. "home", "archive", "forum", etc...

    thanks
  • Okay, lcf, thanks! :D

    - MENJ
  • LcF
    @Marvin: have you put the code in header.php? I read your source code and found that the navigation bar code is at the end of the page, it is not correct. You need to put the code in the end of header.php of default theme.

    For coppermine, it works all right in Mozilla Firefox. I don't know the coppermine theme you used. You need to tweak the css for IE.
  • Marvin
    My website is www.jansenonline.nl using iis 6.0
    If you can see on my website the bar disapear when you click on contact.
    When i installed coppermine, I thought i use your bar also. But the bar is going 1px down dont know how that came.

    Please help me out
    Thanks in advance

    Marvin
  • LcF
    @menj: you are offtopic already. have you check the wordpress 1.5 bug?
  • Thats okay :D

    BTW, I installed your auto-ping PPS plugin and set my blog to "Simple Mode" but it will still not auto-ping :S Why ah?

    - MENJ
  • LcF
    @menj: probably put in ToReply list but forgotten. :P Sorry.
  • Hehehe...I asked u about this before thru email...why didnt u reply, ah? ;)

    - MENJ
  • mike
    cool thanks!

    :wink:
  • LcF
    @mike: this hack can't do that and that is what I gonna do next. probably a plugin that allow user to add custom tabs. :)
  • mike
    @LcF

    how would i go about making it so that if i create a tab that is [b]not[/b] a page but say, a link to a page in my root, that tab when active is white?
    (eg: i'm using wpg2 gallery plugin which uses a page placed in root for embedding functions)
    tia
  • LcF
    did not?
  • Got it...the hack you provide did not have the hover colour correctly.

    but thanks you very much.....it looks great now.
  • LcF
    @8dee: are you using my hack? If you use your own css stylesheet, make sure you have write css style for mouseover(a:hover).
  • how come the mouseover function doesn't work?

    Can anyone teach me?
  • mike
    yup, position-

    and thank you for the great hack!
  • LcF
    @mike: you mean change "position" to relative instead of absolute? I will fix it. thank you. :)
  • mike
    well i don't want to sound like someone who knows what they're doing but all i did was change positive to relative, make a few adjustments in the position (i'm not using a top margin on the header for my site) and put the supernav div inside the header div...

    if you want a look:

    http://michaelschorn.com
  • mike
  • LcF
    @mike: can you send me the tweaked css code please? the image is too small to view.
  • mike
    resizing the browser-width wise-will cause the nav bar to slide off the blog page to the left. this was however, easily fixed by tweaking the css... mainly changing positive to relative.

    http://fapomatic.com/9/sp3220050514152703.jpg
  • LcF
    @mike: what did you mean by "slides around"? screenshot please?
  • mike
    nice-but it slides around if you resize the browser...
  • LcF
    Put in header is fine. this hack is proved to work for WordPress 1.5.
    Are you using my hack? Maybe you can show me your blog site?
  • Marvin
    Hello Liew Cheon Fong,
    I have a question i use perm links same as you. But if i go to another page my bar disappear.
    I believe i have to put the code somewhere else.
    But where?
    Please help my out here.

    Thanks in advance.
    Marvin
  • ahkiong
    seems like there is some thing going on here
  • It's a nice little hack, come in handy too.

    Thank you for sharing. :)
  • I am the one asking for this in your forum...nice.....thank you very much
blog comments powered by Disqus