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:
- FTP client
- 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
For the purposes of this example, let’s say that we’ve created a contact page by visiting Write → Page 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:
<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:
<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?
If 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 Manage → Pages 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:
<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?