Wordpress Navigation Bar

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:

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

Credits:

CSS code ripped from BinaryBonsai
Idea to use wp_list_pages() enlighten by Pool theme

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

FAQ

How do adjust the position of the navigation bar?
Simply modify the values of “top” and “left” under “#supernav”.
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.
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.

Like this post? Please share:

Follow @liewcf on Twitter; Join Facebook page; Subscribe to free newsletter for updates like this article..

http://www.mulu.org/blog yang

good
http://www.mulu.org/blog yang

good
http://www.mulu.org/blog yang

good
Pingback: binslashbash.org
http://www.madaboutbingo.co.uk/ bingo game play

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?
http://www.madaboutbingo.co.uk/ bingo game play

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?
http://www.madaboutbingo.co.uk bingo game play

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?
Pingback: Suche Kubrick Thema mit Links im Header - WordPress Deutschland Forum
Pingback: Wordpress T�rkiye ~ Ba�l�� G�r�nt�le - link efekleri nas�l?
A.C.

How can we list these pages by menu order?

Please help!
A.C.

How can we list these pages by menu order?

Please help!
A.C.

How can we list these pages by menu order?

Please help!
LcF

@A.C.: I updated the entry for “sort pages by menu order” (FAQ).
LcF

@A.C.: I updated the entry for “sort pages by menu order” (FAQ).
LcF

@A.C.: I updated the entry for “sort pages by menu order” (FAQ).
http://thenet.to.md/ roshan

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?
http://thenet.to.md/ roshan

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?
http://thenet.to.md roshan

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

No, the hack does not support custom URL
LcF

No, the hack does not support custom URL
LcF

No, the hack does not support custom URL
http://www.oomoney.com/ oomoney

Hello Liew,

Is this hack works under WordPress 2.0 ?

Thanks.
http://www.oomoney.com/ oomoney

Hello Liew,

Is this hack works under WordPress 2.0 ?

Thanks.
http://www.oomoney.com oomoney

Hello Liew,

Is this hack works under WordPress 2.0 ?

Thanks.
Alex

Is it just at my end but once the hack is installed all pages loose the sidebar background color on the default theme?
Alex

Is it just at my end but once the hack is installed all pages loose the sidebar background color on the default theme?
Alex

Is it just at my end but once the hack is installed all pages loose the sidebar background color on the default theme?
LcF

@oomoney: the hack should work under WordPress 2.0 too.
@Alex: this is weird. the code does not modify theme’s background.
LcF

@oomoney: the hack should work under WordPress 2.0 too.
@Alex: this is weird. the code does not modify theme’s background.
LcF

@oomoney: the hack should work under WordPress 2.0 too.
@Alex: this is weird. the code does not modify theme’s background.
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?
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?
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

revert to default theme (the original unchanged theme) and apply the hack again?
LcF

revert to default theme (the original unchanged theme) and apply the hack again?
LcF

revert to default theme (the original unchanged theme) and apply the hack again?
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 ?
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 ?
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

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
http://home.newlandsolution.ch/ Livio

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
http://home.newlandsolution.ch Livio

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
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.
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.
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
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
http://www.mistercharlie.co.uk/ mistercharlie

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.
http://www.mistercharlie.co.uk mistercharlie

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.
http://deepdesign.biz/ James

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
http://deepdesign.biz James

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

LiewCF Tech Blog