Copyblogger Theme for WordPress

Many of you probably already know this, but on March 5, I sold the Cutline Theme. It was a great ride, and I was truly sorry to see it go. In fact, when I transferred the domain over, I poured one out for my lost theme homey.

And then I got over it.

Thanks to my seemingly unending development work on Celebrity Hack so far this year, I’ve hardly had time to care that I no longer run an active, successful WordPress theme community. At the same time, though, I’ve learned quite a bit about new CSS techniques, better XHTML structure, and better in-site SEO, and it’s hard not to look at such things from the perspective of a theme developer.

Clearly, something had to give here, and thanks to the fact that the Copyblogger promised his old design out to his legions of fans, I had no choice but to develop a newer, better, more excruciatingly-detailed WordPress theme. Nothing like a friend promising out your work now, is there? :)

So here it is, the Copyblogger Theme for WordPress—a completely new framework you can customize!

Maximum Accessibility

I view accessibility as a facet of Web development that good designers address on many different fronts. It’s not just about structuring your markup to accommodate the hearing or visually impaired—that ought to be a given at this point. The “new” accessibility takes care of everyone and everything that will visit your site, including search engines.

Accessibility was my primary concern when developing the Copyblogger Theme, and each of the following elements plays into this in a unique way:

• The typography and spacing are all set in ems, resulting in a completely elastic layout. If you’re using FireFox or Safari, you can resize the text at the demo site (edit: link removed) to get a live demo of this sweet feature.
• The text area is 468px wide (though it is actually defined in ems) and fits about 70 characters per line, which is only slightly above the 66-character ideal for maximum readability¹.
• The typography is aligned to a strict 20px vertical grid, which – assuming it remains intact – provides a more harmonic rhythm as you progress down a page while reading an article. A grid of this nature is extremely effective (and necessary) on 3 column layouts (think newspaper), and while the Copyblogger Theme is only a 2-column layout, I still think the grid has merit.
• The XHTML markup and CSS are extremely lean, resulting in lightning-fast page loads.
• I have “modularized” the theme’s PHP files in such a way as to isolate the ones users are most likely to edit. For instance, the navigation links in the header are all contained in nav_menu.php, so this ought to simplify the process of changing that part of your site. Also, it’s ok if you make a mistake—you can always just restore the original and start over!
• The theme comes equipped with an improved version of the custom stylesheet solution I proposed earlier this year, and the included custom.css file contains both directions and explicit CSS definitions for the elements (and their associated properties) of the theme that you may wish to modify. By separating the color, font, and border color properties from the rest of the theme’s core CSS definitions, I’ve been able to provide you with a unique design environment where you can test color and typography schemes without fear of ever “breaking” the layout.

As far as I’m concerned, ubiquitous themes of this nature have to be accessible to to more than just the people who visit your site. From my experience with Cutline, it’s clear that theme users just like you want as much flexibility as possible—be it in the way of color schemes, editing menus, the use of widgets, fonts, etc. With that in mind, theme developers really have to aspire to a level of accessibility that caters to two distinctly different audiences, and meanwhile, everything needs to remain standards-compliant, lean, and intuitive.

I’ve tried to construct the Copyblogger Theme as a model for this level of accessibility, and while I realize there is still much room for improvement, I guarantee that you’ll benefit in some way from the accessible features that the theme offers.

Optimization and Standards

When it comes to in-site SEO (code structure, essentially), the Copyblogger Theme offers what is, to my knowledge, the best possible structure while still adhering to some WordPress “conventions” that I’m not quite 100% happy with.

Regarding SEO, there really is no holding back—I’m not going to put out a product that is slightly less than optimal out of fear of “giving away the house.” As a result, you end up with a markup structure that is every bit as good and effective as one that I would build for myself for private use.

As far as standardization goes, the evolution of the Web is slowly but surely merging the worlds of SEO and standardized markup, and as someone who is as passionate about ranking as I am about cross-browser rendering, I have no choice but to be a standards fanatic.

The bottom line here is that there are countless benefits to having standardized markup on your Web site, and if you use the Copyblogger Theme, you’re in extremely good hands.

Downloads

The initial release of the theme contains two packages available for download:

1. The Copyblogger Theme
2. Organic custom style package (optional)

The first item needs no explanation, but the Organic custom style package is something that many of you will find both interesting and extremely useful.

Although it is simple in nature, the theme’s custom stylesheet solution is something that is best illustrated by example, and essentially, the Organic custom style package is a fully-functioning example that makes the most of the custom.css file that comes with the theme. In fact, it even comes with a .psd (Photoshop) file that the hardcore among you can use to do complete color overhauls.