Cutline comes pre-loaded with three navigation links in the header:
- Front Page
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
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
- front page
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 (
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.