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

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:

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?

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:

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?

I’ve also activated the plugin on this site, and this means that instead of being forced to check back here every fifteen minutes to see if I’ve responded, you’ll simply receive an email whenever new comments are posted on those posts to which you’ve subscribed.

Oh, and while you’re at it, go ahead and subscribe to the main feed, too. I’ll be cranking out articles over the next couple of weeks that detail everything you need to know about working with the theme, and you’ll definitely want to stay up to date!

Update: The Subscribe to Comments plugin is not yet fully compatible with WordPress 2.2, which is currently running this site. If you’re still running WordPress 2.1.x, then the plugin will work for you, and it’s still plug and play with this theme.

I’ll give everyone the heads-up when a new version of the plugin is released.

If you want your blog posts to appear as polished as possible, then proper image styling is a must. Gone are the days of align="left" and align="right"—the best way to style your images is through the use of CSS classes, and the Copyblogger theme comes with a robust set of image styling options that will have you looking like a formatting pro in no time.

The only roadblock that stands in between you and these styles is the WordPress posting interface itself. You can’t apply CSS classes to image declarations from within the visual text editor, so you’ll have to switch to the code editor in order to make it happen. Don’t worry, though—it’s a straightforward process, and I’m going to walk you through it right now.

Note: this assumes you are running WordPress 2.1 or higher. If you’re not, then now is an excellent time to upgrade!

Image Formatting Examples

In our first example scenario, we want to align an image to the left, and we’d also like to have our paragraph text wrap around the image so as to maintain a clean, uninterrupted flow. You’ll start by inserting an image into your post just as you normally would, but in order to apply the proper CSS class, you’ll need to switch over to code view by clicking on the “Code” tab. A quick explanation of that process along with a visual can be found here.

Once you’re in the code view, the first thing you need to do is locate the img tag for the image that you want to change. You should find something that looks like this:

1. <img src="http://path/to/your/image" />

To apply the proper image styling class, all you have to do is add the code shown in blue:

1. <img class="left" src="http://path/to/your/image" />

If you’ve done everything correctly, you should end up with an image that looks like the one shown here. Notice how it is not only aligned to the left, but it is also padded away from the text to produce a clean word wrap. This is a nice result, but for many images, it’s more desirable to “frame” them in some way so as to separate them from the content and just to make them look nicer in general. Fortunately, this is extremely easy to do with the built-in image styles of the Copyblogger theme.

With that in mind, in our second example, we’re going to align an image to the right and put a frame around it so that it will really stand out and look professional on our page. We’ll do the same thing that we did for the first image, but this time, we’re going to use the right class. Oh, and in order to add a frame, we just need to add one more class declaration – frame – and we’ll get the result that we’re after (again, you add the code in blue).

1. <img class="right frame" src="http://image/path/" />

If you’ve done everything correctly, you’ll end up with an image that is styled just like the one you see here. The frame is 5px wide on each side, so if you’re going to use frames, you’ll need to keep the extra width in mind. For the record, the posting area is 468 pixels wide, so if you want consistent behavior across a variety of different browsers, you should always ensure that your pictures are no more than 468 pixels wide. If you intend to place a frame around an image, just make sure that it’s no more than 458 pixels wide, as the frame will add an additional 10px to the width.

Available Image Styling Classes

Here is the quick list of image handling classes available in the Copyblogger theme:

• left — aligns an image to the left, wraps text around it
• right — aligns an image to the right, wraps text around it
• center — centers an image, does not wrap text
• frame — adds a frame, should be used in conjunction with one of the above classes
• stack — should be used with the left or right class, allows you to stack images side by side if need be

First, a Word on the Layout

The layout you see today is not the original Copyblogger design—it’s one that’s been “digitally remastered” to achieve a quality standard that I feel is unsurpassed in the world of open-source theme development. I used relative (or em-based) sizing on nearly every element of the theme, making it an infinitely scalable layout that can accommodate visually-impaired users with ease. If you’re using FireFox, resize the text with ctrl + + to see how this works.

Also, I took extreme care to develop the theme so that it adheres quite strictly to a typographic grid. Click on the thumbnail above to get an idea what I mean, or read about setting type on the Web if you’re into that sort of thing.

Widget Support

With the news that WordPress 2.2 comes pre-packaged with the sidebar widget plugin, widgets have officially become a crucial part of the WordPress fabric. As a result, the Copyblogger Theme for WordPress supports widgets, but with one notable exception.

For some reason, the WordPress developers broke the XHTML markup convention on the search widget, and in addition, their solution is not as flexible as I would like. Because of this, I felt it was necessary to build a custom search widget that lay outside of the normal widget framework. As a result, I highly recommend that you do not use the search widget, and instead just let my built-in search function rock your sidebar.

Special Post Styling Elements

The Copyblogger Theme for WordPress features elegant treatments for traditional in-post styling elements like:

• Unordered lists: <ul> → <li>, like the one you’re reading now
• Ordered lists: <ol> → <li>
• Definition lists: <dl> → <dt> → <dd>
• Sub-headlines: <h3>
• Blockquotes: <blockquote>
  • Pullquotes (more on this in a sec)
• Code: <code>

While most of the above elements are pretty standard, one – the pullquote – requires further explanation in order to be used effectively.

Pullquotes

I’m sure you’ve heard of blockquotes, the pragmatic cousins of the more artsy, more eccentric pullquotes. In case you need a refresher, here’s what a standard blockquote looks like:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque pharetra velit vel purus. Nunc tempor, urna sit amet euismod elementum, erat tellus auctor erat, non condimentum dui wisi non orci. Nam fringilla leo sed dui. Vestibulum ac elit sit amet diam vehicula scelerisque.

All you have to do to achieve a result like the one above is wrap your quoted text inside <blockquote> tags, and the Copyblogger Theme for WordPress will tidy it up for you.

It’s kinda like a block quote, with a twist.

Pullquotes, however, are not quite as simple because there is no pre-defined XHTML tag for a pullquote. What I’ve done, then, is prepare two classes – “left” and “right” – that you can apply to any regular blockquote to transform it into a bit of publishing goodness like you see here.

For a pullquote aligned to the right (like the one above), your encompassing blockquote declaration should be <blockquote class="right">. For a pullquote aligned to the left, you’d simply write <blockquote class="left">.

I’d like to point out that certain feed readers may not be able to interpret pullquotes effectively, and this could result in repeated text or strange punctuation, both of which could confuse your readers. For what it’s worth, Bloglines does a nice job of floating the quotes to the left or to the right, and although they’re not styled, per-se, it’s evident that the pullquotes are not part of the body text of the associated paragraph.

Using These Styles

With each new release of WordPress, the visual text editor (which is your default posting interface) becomes more and more useful in terms of how it utilizes the styles and text treatments that I’ve introduced to you here. In spite of that, you cannot make use of all of these elements from the visual editor’s interface. Specifically, you won’t be able to create the following:

• Definition lists
• Sub-headlines
• Pullquotes

Fortunately, WordPress 2.1+ comes with a handy little tab switcher that allows you to jump between visual and code editing modes. Whenever you want to include one of the special elements from the list above, simply switch over to the code view, apply the appropriate tags to your text (remember to close them!), and then switch back to visual mode to write just as you normally would.

The Copyblogger Theme for WordPress is the second fully-developed theme from Chris Pearson, the same guy who developed (and later sold) the Cutline Theme for WordPress.

Chris likes great SEO, squeaky-clean XHTML, accessible layouts that look identical across all modern browsers, ubiquitous design solutions, and talking about himself in the third person.

Seriously, though, I think the Copyblogger Theme for WordPress encompasses all those key points, and I believe it can help you become a better publisher.