This question comes from Gene Packwood and is something I thought a lot of people may want to figure out how to get done with the Cutline Mod theme, so I decided to write a post explaining the main navigation links in detail.

Changing the Link Anchor Text and Targets

The main navigation links are in the header.php file. Here’s the code you’ll need to edit:

<ul id="nav">
<li><a <?php if (is_home()) echo('class="current" '); ?>href="<?php bloginfo('url'); ?>">home</a></li>
<li><a <?php if (is_page('archives') || is_archive()) echo('class="current" '); ?>href="<?php bloginfo('url'); ?>/archives/">archives</a></li>
<li><a <?php if (is_page('about')) echo('class="current" '); ?>href="<?php bloginfo('url'); ?>/about/">about</a></li>
<li><a <?php if (is_page('sitemap')) echo('class="current" '); ?>href="<?php bloginfo('url'); ?>/sitemap/">sitemap</a></li>
<li><a href="<?php bloginfo('url'); ?>/feed/" title="RSS Feed">feed</a></li>
</ul>

Each navigation button is wrapped with <li></li> tags, so there are 5 links in the main navigation menu by default. Those are “home”, “archives”, “about”, “sitemap”, and “feed”. Editing the anchor text is fairly straightforward…just change the word right before the closing </a> tag.

Editing the targets of these links is simple, but gets a bit convoluted if you’re not familiar with the Wordpress template tags used in the links above. So let me use one as an example.

Take the “about” link. Let’s say you have an about page on your blog, but instead of calling it “about”, it’s called “about this blog”. Let’s also say your “about this blog” page is located at “http://www.yourblogurl.com/about-this-blog”, instead of the default, “http://www.yourblogurl.com/about/”.

Just change the code for the about link from it’s default, which is this:

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

to this:

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

That code uses php and Wordpress template tags to do a couple things, so let me explain those…

If you get rid of everything within the <?php ?> tags, you’re left with a standard html a href tag…pretty simple if you’re familiar with html. The first snippet of php tests to see if the current page has the page slug “about-this_blog”. If it does, then php echoes ‘class=”current” to the browser. The second snippet of php (the part that says <?php bloginfo(’url’); ?> just echoes the blog’s url, followed by, in this case “/about-this-blog/”. So, if your blog is located at http://www.yourblogurl.com, and you’re currently viewing the page with a page slug of “about-this-blog”, the above code would output the following to the browser:

<li><a class="current" href="http://www.yourblogurl.com/about-this-blog/">about this blog</a></li>

Pretty simple once you strip out all the php. The class=”current” part is styles the nav buttons to have a white background with black text if you’re currently viewing that page…that’s all that does.

So, let’s change that about link altogether into something else…let’s say a link to another website you have. So you just take the original about link, which is this:

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

and change it to this (or something like it)…

<li><a href="http://www.anotherwebsite.com">link to another site</a></li>

You’ll notice I got rid of the first <?php ?> tag because, if we’re sending the visitor off site with this link, we won’t need to style the link for that specific page…this should be obvious.

I got rid of the second <?php ?> tag because that’s only necessary for links going to other pages on your blog, and since we’re sending the visitor elsewhere, we don’t need it. That option is just your standard link tag inside of a list item.

Changing the Main Nav Colors

Ok, let me show you how to change all the nav links to one color, which is fairly straight forward. After that, we’ll change all the nav links to their own separate colors.

Changing Nav Links to Another Color - All the Same

This is pretty straight forward. Just open the stylsheet and find the following snippet inside “custom.css”:

.custom ul#nav li a, ul#nav li a:visited {
color: #FFF;
background: #333;
text-decoration: none;
padding: 5px 10px 5px 10px;
}

If you want to change the background of the links to brown, all you have to do is change the “background: #333;” attribute to “background: brown;”

Same thing with the text color or any other styles you’d like to change.

Changing Nav Links to Another Color - All Different

This isn’t quite as straightforward. You’ll need to add classes to each nav item link in the header.php file. Then you need to style those classes in the css. Maybe something like this:

<ul id="nav">
<li><a class="homelink" <?php if (is_home()) echo('class="current" '); ?>href="<?php bloginfo('url'); ?>">home</a></li>
<li><a class="archiveslink" <?php if (is_page('archives') || is_archive()) echo('class="current" '); ?>href="<?php bloginfo('url'); ?>/archives/">archives</a></li>
<li><a class="aboutlink" <?php if (is_page('about')) echo('class="current" '); ?>href="<?php bloginfo('url'); ?>/about/">about</a></li>
<li><a class="sitemaplink" <?php if (is_page('sitemap')) echo('class="current" '); ?>href="<?php bloginfo('url'); ?>/sitemap/">sitemap</a></li>
<li><a class="feedlink" href="<?php bloginfo('url'); ?>/feed/" title="RSS Feed">feed</a></li>
</ul>

Once you’ve done that, you need to duplicate the link style for each class above…then just change the styles how you’d like them. Something like this:

.custom ul#nav li a.homelink, ul#nav li a.homelink:visited {
color: #FFF;
background: brown;
text-decoration: none;
padding: 5px 10px 5px 10px;
}

.custom ul#nav li a.archiveslink, ul#nav li a.archiveslink:visited {
color: #FFF;
background: red;
text-decoration: none;
padding: 5px 10px 5px 10px;
}

.custom ul#nav li a.aboutlink, ul#nav li a.aboutlink:visited {
color: #FFF;
background: purple;
text-decoration: none;
padding: 5px 10px 5px 10px;
}

.custom ul#nav li a.sitemaplink, ul#nav li a.sitemaplink:visited {
color: #FFF;
background: orange;
text-decoration: none;
padding: 5px 10px 5px 10px;
}

.custom ul#nav li a.feedlink, ul#nav li a.feedlink:visited {
color: #FFF;
background: yellow;
text-decoration: none;
padding: 5px 10px 5px 10px;
}

Ok, so the background colors won’t look good together, but that’s your job. Hopefully this explains things clear enough for you to tackle the editing.

I hope this clears up some questions you all may have and, Gene, I hope this answers your question in particular. If not, feel free to leave a comment.