/images/header_2.jpg "Cutline Theme for WordPress")
Cutline comes pre-loaded with three navigation links in the header:
- Front Page
- Archives
- About
That’s all fine and good, but what if you need more links in your navigation menu? In this quick tutorial, you’ll learn just how easy it is to add these links in seamless fashion.
Learning by Example
Let’s say that you have two pages that you want to add. The first contains pictures of your beloved dogs, and the second is a contact form that you’ve constructed to allow readers to give you targeted feedback. The two pages are called “dogs” and “contact,” respectively.
The end result we’re looking for here, then, is to have a header that contains the following links:
- Front Page
- Archives
- About
- Dogs
- Contact
One thing to note before we get started, though, is that you must actually create these pages before you can link to them. If you’re new to this process, here’s what you need to do (for the sake of this example, we’ll create the “dogs” page):
- Log into your WP Administration panel and click on the Write tab.
- One of the sub-navigation tabs should be called Write Page — click on that link to go to the Page editor.
- This is the most important step. Maximize the Post slug module (pictured above at right) that lies to the right of the post entry box. Enter “dogs” in that box.
- Once you’re done entering your page content, click on the Publish button.
After you’ve created your pages with the proper post slugs, it’s time to open up the header.php file and make the edits that will force these new pages to display as navigation links.
Editing your header file to add new links
Your navigation links are basically just an unordered list of links. If you haven’t made any changes to the file, then you’ll see four menu item links in your header.php file:
- front page
- archives
- about
- RSS
The list item code for the about link contains the code that you will need to copy for your first link. In this example, we’ll start with the “dogs” page.
Alright, your default code for the about link looks like this:
<li><a <?php if (is_page('about')) echo('class="current" '); ?>href="<?php bloginfo('url'); ?>/about/">about</a></li>
Copy this code and then paste it directly underneath the existing about list item (<li>).
Apply the edits in red from the following snippet of code:
<li><a <?php if (is_page('dogs')) echo('class="current" '); ?>href="<?php bloginfo('url'); ?>/dogs/">dogs</a></li>
Follow the same process for the “contact” page, but replace all references to “dogs” with “contact” in the above code.
Once you’re done, FTP the new header.php file into your Cutline theme directory.
If you’ve done everything right, when you visit your new pages, the navigation links will be green and underlined.
iRiver MP3 Player Compare iriver prices and buy in Australia
Chris,
Figured it out with Word Press support. Sorry for that trouble–but NEW trouble:
I wanted to have posts archived by category on separate category pages — you can see in my navigation bar I have the desired category links, but their pages are blank. Is there an easy way to set up templates for each category, so people can read categorized archives?
Sorry again for the trouble. I don’t think I’ll figure this one out in the word press forums, so let me know if you can help.
Thanks!
Travis
Hi, Chris!
I’ve only been using Cutline for a day or so and love it. I was even able to restore my archives page thanks to the help here.
I have a question about how to handle something in an elegant way before it becomes too involved to do so. My blog is mostly about food and I created a page called recipes for my own that I mention in posts. I can see that page becoming a nightmare after a while.
Is there some way to link to the recipe in question, sort of like using a field in Word, and spare people having to scroll, scroll? Or should they have their own archive, perhaps?
My blog’s at ellaella.wordpress.com if you need to see it. I have a couple other questions, but they’re really cosmetic, and can wait.
TIA..
ella
Cool Infos, Guys. I searches for this information for adding the Navigation links just a couple of hours and now i got it here. Very helpfull. Perfect. Jiiiiha.
Hey mates, thanks a lot for the infos. very usefull for me. Thx. John
Thanks, Chris!
links for 2007-04-18 » HDVjournal // Apr 25, 2007 at 9:17 am
[...] How to Add Navigation Links | Cutline Theme for WordPress One thing to note before we get started, though, is that you must actually create these pages before you can link to them. If you’re new to this process, here’s what you need to do (for the sake of this example, we’ll create the “dogs” page):L (tags: wordpress theme) [...]
Per directions, when using the WRITE PAGE,
there is no “Post Slug” listed. There is only “Page Slug.”
Is this the correct slug to use?
thanks
Nice theme Chris. Is there a way to center the Nav items in the header.php? I have tried a few options but none seems to move them from the left alignment? Thanks
Hi all!
Other synalar seide effects If your need more informarmation check http://synalar.pharmald.com
Bye
Hello,
Can we regenerate Post Slug as i have by mistake saved all post and by mysql have make them publish but post slug cannt be generated and when i use pemalink page name is coming empty so i want to regenerate all post slug again.
Hmm my pages are not working anymore.
http://blog.thomaslaupstad.com/about/ show up just blank, not even the sidebar is there.
I have added the “about” as page slug to the page. Anyone know what I’m doing wrong?
I figured out that all my pages are not showing.
It’s really weird because it works fine with my other blog that is also using cutline.
Didn’t work. I followed your directions exactly but the pages will not come up.
Hi,
thanks for the theme – its awesome!
i have a couple of slight problems using the 3-column rignt theme:
1) the archives page doesnt work by default – just gives a 404 – do i need to configure anything?
2) the header from the search widget is missing now i have moved it.
if youhave any suggestions, i would be even more grateful than i already am!
thanks again
typical – fixed the issue with the archives about 2 minutes after posting my previous message!
any help with the missing header from the search widget would be appreciated though.
thanks.
I accidently deleted my archives page. Of course, now that I set it up new, it’s blank.
How do I get my archives back?
Just getting started but can’t seem to make the about, archives or comments work. Any suggestions.
Hi
What do I have to do if I want my navigation link to point to anther website (I don’t want it to open in a new window)?
Thanks for your help!
Hello again!
Sorry, I saw now that somebody already asked and answered this question. I did everything as explained but I don’t understnad the following:
“Then, in header.php, you shouldn’t copy and then replace that entire “about” snippet. Instead, just do external” The link to “external” doesn’t work.
My page is http://www.der-lagerist.com
Thanks for your help!
Ryan,
I am also trying to link to a homepage which is not in wordpress (i.e. my blog is a seperate subdomain. How do I link my blog to this in the nav bar (so people can return to my main website page from the blog)?
Thanks
I am not a web developer, nor have I used CSS enough to know what I’m doing. However, I followed your instructions to add Navigation Links to my header and everything worked, except, when I created a post, the title of the post became a hyperlink. When clicking on the title of a post, it would link to a page with a 404 error.
So I went to WordPress support and was told to re-set permalinks to default (I did and now I have no “linkable” Nav Links), and further, when I asked about other options to make the Nav Links work was told, “No. There is nothing about designing (whatever this means). Make your .htaccess file writable = chmod 666.
Set your permalink to the desired structure (and let WP write to the .htaccess file). Done.”
Any suggestions? Is WordPress support this unhelpful?
I want to add a few more Navigation Links. How do I avoid WordPress support, and make posts NOT have titles that link to pages with a 404 error?
Whoops. My e-mail address in the above post is an hybrid of my home and work e-mails. Please use this one: bjornebym@unitedwaytwincities.org.
Never done that before.
I’m not a web developer, however I used your instructions on how to add Nav Links to my header and this worked, except, the titles of all my posts were all hyperlinked. When clicking on the titles, they linked to pages with a 404 error.
So I went to WordPress support (not sure why) and was told to re-set permalinks to default. Now my Nav Links don’t work.
So I asked WP support if I had options for my Nav Links and was told:
“No, you don’t. There is nothing about designing.
It is a two (or 3?) steps process.
Make your .htaccess file writable = chmod 666.
Set your permalink to the desired structure (and let WP write to the .htaccess file)
Done.”
Help, please.
I just installed Cutline and noticed that I get a 404 error for the “Archives” navigation link, which points to http://weviews.tv/archives/
Any idea on what’s wrong here?
Another thing I noticed – the sitemap link from the footer (http://weviews.tv/sitemap/) hits a 404 error page, too.
Hello! Help solve the problem.
Very often try to enter the site, but says that the password is not correct.
Regrettably use of remembering. Give like to be?
Thank you!
Hi,
Probably this is a simple question but – I have figured out how to add Nav Links like about but my default page (root directory) is empty and I don’t know how to have it display a page. What slug do I use so that when in the docroot of my site, it will display a page???? I can get to an About page and made a Home page that links to the same content (about) but if you are in the docroot, the content area is completely blank! Help?!
solve big prob,I will try it on
Is there a way to make a ‘page’ display as a ‘category.’
in this case, to make a ‘navigation link’ perform as a ‘category’ link.
I figured it out. By copying the about line:
is_page(‘about’
and
/about/”>about
and pasting a new line replacing the “about’s” with my category (being video):
is_category(‘video’
and
/category/video”>video
is there a way to move the nav bar underneath the header image??
Sorry figured it out already…!!!
just move the paragraph starting at (keeping the brackets of course):
ul id=”nav”
and ending at:
/ul
to just before:
/div (which is the last word on the header file)
It works beautifully keeps the line in the right spot and everything.
check it out:
http://www.livemtl.com
all my top menus lead to the same pages..
about / contact / whatever. click them they all go to the front page again .
i did this to add the links as Chris said:
<a href=”/dogs/”>dogs
and so the links appear but still point to the same front page.
i played with the slugs. that did nothing.
any ideas?
super thanks..
i used the code offered by the first comment on this page.
now all my pages are active, and links work.
realise their could be some restrictions that come with this method but i’m not skilled enough to do anything about that.
great theme chris.
Awesome theme! Thanks!
I’ve read all the above comments about getting external links to appear in the navigation bar, but being a total rookie, I’m going to need some more info. I’d like to have a link in my nav bar to, say, my amazon store. What is the exact code that goes between the and tags to make this link? (Assume I want to call it “store” and the link is “http://amazon.com”)
Thanks and great theme!
Forgive me as I am very new to all of this and rather green. I was able to create the new navigation link but when I click on the link it takes me to a blank page. How do I make sure the link takes me to a page with content on it?
I apologize if this has already been posted somewhere else on the site, but is it possible to change the ‘Front Page’ navigation link to another phrase? I just have a regular Wordpress.com account, so if the solution entails modifying the css, I guess I would be unable to do this.
Chris, first of all I’d like to say thanks for an incredible design. I love how clean, smooth and ergonomic it could be.
To my point, I’ve added this code in the place of the of nav buttons.
<li class=”page_item”><a href=”/” title=”Home: “>Home
<a href=”">RSS
Yes, that’s Javier’s code posted above. Then I went to my page editor and added Sports, Technology, Politics, Submit nav buttons. I have one question.
What code do I need to add or subtract to make each navigation link it’s own page, it’s own blog? I don’t want the same header on each page, nor do I want the same exact formatting. I’d like it to fit, but be different.
I’m relatively new to php code and I know basic HTML, but totally fresh when it comes to blogging. I also wonder, is it possible to have different ads and sidebar’s on each individual page? How so?
Lastly, I want to add a login/register button in the top left corner of each page, how can I manage that?
I know it’s a lot, but I’ve looked freaking every where. I’ve found out that WP support isn’t exactly support, more like a hot mess of a forum. Your the source, your the man with the correct answers. I appreciate any help I can get, Chris.
Thanks again for a great template, easily the nicest one around. Please, take a few minutes to help me out?
Later on
I can’t get the Nav links to highlight my post page if I make the home page a static page. I assigned posts to a page I called “news”, changed the code to reflect that: <a href=”/news/”>news but it doesn’t seem to recognize the post as being on that page. Ideas?
Never mind, I got it! If you want your posts to be on a page other than the front, you still use if(is_home()) but assign a different page at the end of the target URL.
For those that missed how to add a navigation link to the header that references a link outside of your blog you simply insert the following:
Google
how do you change the widths of the navigation links?
I have the same question as ted.
Navigation Bar « Muffin Tops & Bingo Wings // Mar 10, 2008 at 7:09 am
[...] I found the guide for How to Add Navigation Links for Cutline [...]
Good services and products, very helpfull, simply greatest!
I’m able to find the styling for the width of the navigation bar elements, but I can’t figure out where you’ve designated the height. Can you point me in the right direction? I just want to trim about 1/4 off the bottom of the nav bar. I’ll keep looking in the mean time.
Nevermind. Figured it out. It’s all in the margins and padding.
when I create a new page the “post slug” (page name) seems to be ignored for some reason.
So I put in the slug name “about” – but the page created is “www.site.com/?page_id=2″
any idea what I’m missing?
this is the site:
http://www.thenewrunaways.com