How to Add Navigation Links to Your Header

As you add content to your site, you’ll no doubt want to edit the navigation links that appear at the top of each page. Fortunately, this is extremely easy to do with the Copyblogger Theme, and with the help of this tutorial, you’ll be able to get the job done in less time than it’ll take you to brew that next pot of coffee.

You need two things in order to get started:

  1. FTP client
  2. text/code editor

Since you needed an FTP client to upload this theme to your server, I’m betting you have #1 covered. Also, since 97% of you are running either Windows or OS X, you’ve likely got a default text editor you can use to satisfy #2 (Notepad or TextEdit).

Oh, and this tutorial assumes that you’ve already implemented smarter permalinks. If you’re not sure what that is or how to do it, I highly recommend checking out this video for more info on the topic. But hey, even if you haven’t changed your permalink structure or are unable to do so, I’ll still show you how to add navigation links to your header (cause that’s how I roll).

Navigation Menu Example Tutorial

Page Slug field in WordPressFor the purposes of this example, let’s say that we’ve created a contact page by visiting WritePage in our WordPress Dashboard. We’ve also made sure to write contact in the Page Slug box on the right, as this will determine the final URL for our newly-created page.

Once you’ve created your page, it’s time to fire up that text editor and open the nav_menu.php file that is included with the Copyblogger Theme. The file contains only three lines of code, and you’ll want to pay special attention to line #3, which will serve as a “template” for adding your new link. If you haven’t edited anything, line #3 should look like this:

  1. <li><a <?php if (is_page('about')) echo('class="current" '); ?>href="<?php bloginfo('url'); ?>/about/">about</a></li>

In order to add your new contact page link, you’ll need to copy and paste line #3 on a new line. Now, replace all references to the word “about” (shown in orange above) with the Page Slug you created earlier. In this example, our Page Slug is contact, so our new navigation menu link code should look like this:

  1. <li><a <?php if (is_page('contact')) echo('class="current" '); ?>href="<?php bloginfo('url'); ?>/contact/">contact</a></li>

Now, all you have to do is save the nav_menu.php file and upload it to the Copyblogger Theme directory on your server. Voila, your navigation menu is updated!

Oh, and your coffee is ready 🙂

I use the default permalink structure… can you help?

WordPress Page IDIf you’re using the default permalink structure, then you’ll create a page just as shown in the example above, except this time, once your page is created, you’ll need to visit ManagePages and locate the unique ID of the page you wish to link. Now, after copying and pasting line #3, you’ll need to replace the second reference to the Page Slug with a reference to the unique ID. For the example scenario posed above, the proper code should look like this:

  1. <li><a <?php if (is_page('contact')) echo('class="current" '); ?>href="<?php bloginfo('url'); ?>/?page_id=8/">contact</a></li>

Note that there is only one change to the code—the destination of the link has become ?page_id=8 instead of contact. Pretty simple, huh?

109 comments ↓

#1 Doug Wilson on 12.13.10 at 6:01 am

Just wrote a little article with a link to your theme. Thought I’d take the time to say thanks. I’ve used copyblogger for a while now, so – thanks.

#2 Beth on 02.17.11 at 4:13 pm

I added wordpress to my hosting site and set up a wordpress site on my domain. How is this different from setting it up right in wordpress? Where are the files now? I’m using Copybloggertheme, but none of the dashboard items you mention in the tutorial are on my dashboard…like ‘write’, ‘page’, ‘page slug’ etc…

#3 John on 02.17.11 at 4:37 pm

It isn’t in the dashboard, it’s on the post or page pages.

#4 Shareitto on 04.11.11 at 5:02 pm

Learning php from your article is pretty easy. 🙂

#5 Anak Nias on 06.16.11 at 8:51 pm

Thank you so much.. This theme looks good. amazing ^_^

#6 Nghe Nhạc on 09.13.11 at 5:07 am

How can I add the tag to the side bar? Thank you all.

#7 alan on 12.01.11 at 8:33 am

i used copyblogger…its awesome.

#8 Eloy on 03.20.12 at 9:49 am

Whats the benefit of a menu/links in the header. Doesn’t it take the attention of the header?

#9 Debra on 04.21.12 at 12:14 pm

the new Wp 3 solve the problem