Cutline Theme for WordPress

One Giant Leap for Mankind

Cutline Theme for WordPress header image 2

How to Add Navigation Links

September 25th, 2006 · 122 Comments · How To

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):

    Image showing the post slug field with dogs entered as the slug

  1. Log into your WP Administration panel and click on the Write tab.
  2. One of the sub-navigation tabs should be called Write Page — click on that link to go to the Page editor.
  3. 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.
  4. 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.

Tags:


122 Comments so far ↓

  • Dana

    Hi, and thank you for a great theme. I have been able to successfully modify the nav bar using your very clear instructions to others above. Thank you!

    Here’s my question: The last of my six nav bar buttons wraps onto the line below (it’s a multi-word phrase), although visually, it appears there is room for all of it. Can you please tell me the code to change in order to either adjust the margins of the nav bar a wee bit, or else adjust the space between the buttons, so that all six buttons will fit onto one line?

    Many thanks for any help you can provide — you’re a great inspiration to those of us who are new to this and learning. You are helping a lot of people’s lives and dreams come together thanks to your kind efforts.

  • Why Are Upgrades So Frustrating?

    […] or the one on enabling the “About” and “Archive” pages, or even the one on how to add navigation links. I’ve read ‘em. They didn’t help, for the reasons noted above. I’ve been at […]

  • Laura Williams

    Hi, I can’t seem to find the post slug anywhere on the write post page.. I’ve looked everywhere and it’s definitely not there, any ideas on where I can find it?

  • masbe

    is possible to add pull down menu (sub menu)

  • Dora

    Uh-oh. It looks like the latest versions of WordPress don’t have Post Slug available in the place where it’s specified here.

    Any idea where I could find it?

    Thanks!

  • J. Angelo Racoma

    Dora, post slugs in the latest WP versions (2.6 onwards) can be found right under the post title while you’re drafting your post. This is dynamically updated as you type in a title.

    If you wish to specify your own slug, you can change it by clicking the EDIT link.

  • Janne

    I simply can’t find the post slugs in my brand new downloaded version of WordPress – not in the right sidebar, not under the post title or page title, not anywhere.

    This means I can’t follow any of the great tutorials on this site to get my pages showing in the header… HELP!!!

    Thanks!

  • Eleanor

    I am new to WordPress and learning with trial and error and your tutorials are understandable but I am having issues with adding my navigation links I get to step 3 in your process and I can’t find the “Post Slug” it makes no sense especially since you are very detailed as to where to find it. I even went into the wordpress forums and searched for Post Slug and came across a post about it is it possible I am not finding it because I am using a newer version?

  • Eleanor

    Ok so if I would of read the last 2 posts my question would have been answered :0)

    I have checked out post 106 and it is going over my head.

  • Janne

    Hi Guys,

    I just got great help on the trouble issues mentioned in many of these comments. So I’ll share 😉

    To make post slugs appear when editing or writing pages and posts, do this:

    Go to Settings->Permalinks. Under Custom structure, write this: http://nameofyourblog.com/%category%/%postname% (substituting “nameofyourblog.com” with your blog URL, obviously).

    That’ll do the trick!

    Then follow the instructions in the tutorial post above, and you should have the desired page navigation.

  • Eleanor

    Thank you Thank you!!!! It worked! :0) Thank you for sharing

  • karen

    I follow your instructions, but on my write page/page, there is no post slug to the right of the post box or anywhere else on the page. Am i missing something.
    tried it in safari & firefox, on a mac 10.4.11.
    thanks so much. can send a screen shot if possible.

  • Janne

    Karen, pls see comment 110.

  • karen

    Janne, thanks for your help. I did exactly as you said. I had previously followed Angelo’s instructions (below) got the button to show up, (yay) but it still doesn’t link to the page.
    Below are Angelo’s instructions and my response.
    Angelo
    Thank you so much for you response!
    I do have another question:

    I did exactly as you said.
    I wend>dashboard>settings>permalinks.
    I sent the permalinks to:
    Day and time.

    Then I opened header.php – copied the about code and changed the code as instructed.

    <a href=”/about/”>about

    <a href=”/monday/”>monday <a href=””>RSS

    I ftp’d the file to the server.

    Now, the monday button now shows up, (yay!)
    but it does not link to the monday page I created and published.

    I also went back to the monday page via edit – or manage pages, made a change and SAVED it, but still, the button didn’t link to the page.

    Many thanks,
    Karen

  • Janne

    Sorry, no idea what is wrong then. Hope someone else can help!

  • Ali Sanaei

    Anyone knows how we can add a custom URI to the top nav?

  • Randy

    Something is not working. The new page will not show up in the header navigation.
    I created a new page, Privacy Policy, and followed
    your instructions, but I get:

    Parse error: syntax error, unexpected T_STRING in /homepages/19/d279065057/htdocs/conservativebulletin/wp-content/themes/Cutline 2.2/header.php on line 30

    I even tried creating a test page called “dogs” and pasted in your code with no changes. Same error. What am I doing wrong?

  • koermann

    I am editing a blog that does not have “front page” included in the navigation menu. Any ideas how to add it back in?

  • Herman

    How do I change the menu item name “front page” to “home page”

    Thanks

Leave a Comment (Need help? Visit our Support page and Forums first.)