Seeing as how the theme has brand spankin’ new code behind it, I figured it was time to give it its own name…

Introducing, This Just In! v2.3a

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.

While I owe my inspiration for that theme to Chris Pearson and his Cutline Theme, I’m completely revamping the new version from the ground up. I think everyone is really going to like this one, and I’ve really spared nothing in the process of ensuring that every single line of code functions flawlessly not only across browsers, but also regardless of how you use it.

Every little detail of this theme is going to be well planned and executed. I’ve even thrown in a bit of javascript here and there to spice things up a bit, but I’ve also made sure that the theme functions properly whether the user has javascript enabled or not. I’ve really gone into some depths that aren’t even explored in the Wordpress developer docs for this thing and have had to reverse engineer certain portions of Wordpress to figure out how to accomplish some of the features I thought this theme should have.

Seeing as how it’s going to be related to its older brother in appearance only, I’m thinking it’s time to break from the Cutline naming convention. Any ideas on the new name? Of course I guess you’d have to see it first.
Expect the release within a month.

After I got all these questions, I realized I hadn’t quite implemented an ideal method of displaying that image…well, you live and learn. That image is in the code for all the different page templates for the theme, of which there are 7, the blunder on my part was setting an image size in 4 of those template files and not the rest, which is probably why, if you’re having this problem, you’ve noticed the image is only sized wrong on certain pages…like I said, not exactly ideal. I’ll make sure I solve that problem in the next release of the theme. Anyway, here’s exactly what to do…

Steps to Change the Left-side Image Size - Cutline Mod Theme

All 4 files you need to edit have the following line of code near the top that displays that image:

<img src="<?php bloginfo('template_url'); ?>/images/sideimage.png" alt="<?php bloginfo('name'); ?>" title="<?php bloginfo('name'); ?>" width="35" height="281" />

You’ll need to change the height and/or width attributes in that line to match the image you use to replace it. Here are the files you need to change:

1. archives.php - Line 12
2. archive.php - Line 6
3. search.php - Line 6
4. index.php - Line 4

That should do it. Thanks to everyone who brought this problem to my attention. This was my first Wordpress Theme release, so bear with me as I get all the kinks ironed out for the next release. Also, if you have any suggestions for the next release, leave a comment and let me know - and remind me to get that suggestion box I’ve been working on up and running!

I went ahead and used Transitional as the standard because Strict is a bit too, well, strict. Once people make the changes they like to make to personalize the theme as their own, that Strict validation will go right out the window. Transitional allows a little more leeway for those who care about their themes validating so they can make some changes without worrying about throwing the whole validation thing out the window.

Zip

RAR

7-Zip

The image is a PNG and can be edited online with this killer image creator over at interactimage.com. Or, you can edit the image in Photoshop or your favorite image editing software.