PDA

View Full Version : WordPress Adding a Navigation


cocoonfx
05-09-2009, 09:20 PM
Hello

I have been trying to add my own navigation to word press. I have tried to follow there documentation but it makes no sense. Can anyone assist?

DWcourse
05-09-2009, 09:21 PM
the term navigation can mean a lot of things. Are you talking about a menu of some sort?

cocoonfx
05-09-2009, 09:24 PM
yes a menu (navigation bar.)

DWcourse
05-09-2009, 09:27 PM
What do you want in the menu and how would you like it to appear?

cocoonfx
05-09-2009, 09:33 PM
a naviagation bar.... home | members | Services | Contact us etc...

I want to place the same navigation on the wordpress blog as
www.fit-camp-uk.co.uk. How ever wordpress uses php templates and i can't work out what i need to change.

Rob_Che
05-09-2009, 10:16 PM
Hey Cocoonfx - the HTML will be exactly the same.

The HTML will go in the PHP file called 'Header.php' after the header div and the CSS styling will go in a stylesheet. You can add the styling to the existing stylesheet or attach one of your own in the same file.

Look for the <div id="header"> and put this in relation to it . . .


link href="http://www.fit-camp-uk.co.uk/nav.css" media="screen" rel="stylesheet" type="text/css" />

<div id="header"><!-- header starts -->
<div id="nav">
<a class="nav1" href="index.html"><div class="nav1"/></a>
<a class="nav2" href="reg.html"><div class="nav2"/></a>
<a class="nav3" href="blog/"><div class="nav3"/></a>
<a class="nav5" href="loc.php"><div class="nav5"/></a>
<a class="nav4" href="contact.html"><div class="nav4"/></a>
</div>
</div><!-- header ends -->
Try that . . .

Rob

DWcourse
05-09-2009, 10:26 PM
Assuming all of those links (except home) are WordPress Pages (not posts) then use:

wp_page_menu();

A list of the option with examples for use is at http://codex.wordpress.org/Template_Tags/wp_page_menu

Rob_Che
05-09-2009, 10:36 PM
@DWcourse - Not sure if that was referring to my post but I just copied the links from the Fat Camp page... They would obviously need changing (or hyperlinking)

DWcourse
05-09-2009, 10:46 PM
@Rob_Che not specifically replying to your post which also works. The advantage of using the WordPress wp_page_menu(); call is that, if additional Pages are added in WordPress, they are automatically added to the menu.

cocoonfx
05-09-2009, 10:49 PM
Mr Che i get told off every time i call the web site "Fat Camp page" :grin: :grin:

Ok i see how to add the navigation now but i think i need to play with the css to get the layout right as it screws the page up...

thanks for the tips.

Rob_Che
05-09-2009, 10:56 PM
The advantage of using the WordPress wp_page_menu(); call is that, if additional Pages are added in WordPress, they are automatically added to the menu.

yeah, I realise that - I thought cocoon wanted to recreate the menu he had... anyhoo - it's all good info :)

Mr Che i get told off every time i call the web site "Fat Camp page" :grin: :grin:
Wow, that was a COMPLETE accident !! :) sorry . . .

Ok i see how to add the navigation now but i think i need to play with the css to get the layout right as it screws the page up...
Do you want to show us ?

cocoonfx
05-10-2009, 01:02 AM
Yes mate but i had just deleted it hold on i will re do it.

cocoonfx
05-10-2009, 01:04 AM
here it is.... i think i just need to create a div called blog or something and then have a play with this.

http://fit-camp-uk.co.uk/blog/

Rob_Che
05-10-2009, 08:51 AM
here it is.... i think i just need to create a div called blog or something and then have a play with this.

http://fit-camp-uk.co.uk/blog/

Cool - just get it styled up like the other one and you can add more buttons... Good work. It's nice when it actually appears on the page after hacking into the php.

While we're on it... Where have you added the code? It doesn't seem to be in the header div. My concern is that you will have problems if you're using other page templates...

Anyhoo.. good work on getting it on the page, that's half the battle when you start off... :)

cocoonfx
05-10-2009, 07:00 PM
hey you know the navigation problem i had well i got it working all i did was re copy and paste the navigation code back into the header and then it worked. And i did nothing different from last night how strange.

Thanks for the link with the user info Rob,.... top banana :-D

Rob_Che
05-10-2009, 08:24 PM
Glad it's coming together.

Wordpress is very clever - the stuff we're doing now is just HTML but as DWCourse says above, there are tons of hooks and snippets that will make your life easier in the long run and will dynamically update.

For now, I'm happy that you're getting somewhere, it's all good.

Rob