Use the Checklist.

I’ve capitalized “Checklist” on purpose here- it’s the Theme Development Checklist found in the Codex that I’m talking about, and the truth is that I regularly refer to this list even when I’m creating custom themes that I won’t be releasing to the public. It’s always good practice to use the Checklist, whether or not you’re submitting your theme to the official Wordpress theme repository.

Try to cover all bases.

As you create your free Theme, always keep in mind that you want a Theme that will be as useful as possible to as many people as possible. You’re releasing it to the public, after all. For instance, you may not use Wordpress’ Calendar widget, but many people do- so make sure your Theme supports as many elements as possible.

Think different.

There are hundreds, maybe thousands, of Themes out there. Make yours stand out from the crowd. Look through free Theme directories, or visit discussion boards to find out what people are looking for. And don’t make a copy of a premium Theme and release it for free, creating a “knock-off”- that’s just bad form.

Consider creating a Theme Options page.

People love having options. Make it easy on your users to customize or personalize your Theme by creating and including an Options page. Don’t know where to start? Check out this easy tutorial, or this more advanced one.

Include a good Read Me.

In the zipped file of your Theme, have a Read Me text file with all the pertinent information about your Theme. It’s always good to have simple “How to Install this Theme” instructions, and include more specific details about the Theme, you the author, and links to where they can get more information and/or support.

Do you create free Wordpress Themes?

Designs of the Week

I love a good freeform layout. It does get more organized in the inside pages, though, so best of both worlds!

The translucent effects are so subtle, it makes for an elegant design.

Lots of great things going on here: how the portfolio items that aren’t in focus are darkened, the pull-out panel that displays the designers skillset, and the overall edgy look for the site.

Custom type and lovely art both go a long way for this site!

The not so subtle way the content area fades into the background is stunning to look at. But the boat images need improvement, ironically in the transparency department. Still, a gorgeous site.

Social Media Weekly

Design – The Future of Interface Design

Programming – The 3 Basic Rules for Writing HTML

News CMS

This tops my list, not only for being the cleanest one here, but because it’s beautifully made- and I speak as a Wordpress theme designer. You will need to register to download it (registration is free), and it requires some plug-ins (included in the download), but all that’s worth it. It’s a breeze to set up as well, as you can see from the online Read Me.
Download News CMS Theme »

Hamasaki

Here’s another theme that looks like it shouldn’t be free, but is. A smooth grid-based layout with beautiful little touches here and there, Hamasaki is subtle and never detracts from the most important thing- your content. Includes a contact page as well (yay!), theme options, and some nice ad-ready spaces.
Download Hamasaki Theme »

Small Magazine

It’s called Small Magazine, but this theme looks like it could handle even the heaviest content, with its wonderful use of columns and white space. Requires some plug-ins and a bit of customization, but well-documented.
Download Small Magazine Theme »

Rebel Magazine

Another gorgeous one, Rebel features two columns for a more streamlined look, with banner ad-ready spaces and widget support. A little easier to use than the others, I think I like this one precisely because it’s simpler and thus quicker to customize.
Download Rebel Magazine Theme »

The Morning After

This one’s been around for a while, and it’s still one of the best Wordpress themes I’ve ever seen- free or “premium”! If you’re running a Wordpress-powered news site, you must check out The Morning After: it’s feature-rich, including things like automatic thumbnail generation, and an easy way of doing “featured” items, among others.
Download The Morning After Theme »

What’s your favorite Wordpress news-themed theme?

First, you need to know what property values you can choose from. These are:

• normal : the default line height.
• number value : a number to be multiplied with your current font size. For example: 1.2 or 1.3.
• length value : a specific line height, such as px, pt, em.
• percentage : a percentage of your current font size.
• inherit : wherein the value will be inherited from the element’s parent element.

As you can see, font size is very important when it comes to line height. If, for example, you do this:

body { font-size: 12px; line-height: 140%; }
h1 { font-size: 24px; }

The browser will calculate the body font size (12) multiplied by the line height (140%) and give you a line-height of 16.8. This is fine for your fonts at sizes 12px, but what happens to your h1, which is at 24px? It inherits the 16.8 line-height. As a result, your h1 elements will have line spacing that’s too tight.

You can, of course, fix this by specifying a line-height for your h1 element as well. Like so:

body { font-size: 12px; line-height: 140%; }
h1 { font-size: 24px; line-height: 125%; }

But then you would have to do this for all the affected elements on your page. This is what happens when you use a length value or a percentage.

Now here’s what’s better: using the number value,

body { font-size: 12px; line-height: 1.2; }
h1 { font-size: 24px; }

Because the number value calculates line-height relative to each element’s font size, you need only define it once. In the example above, the browser will multiply 12 by 1.4, giving you a line-height of 16.8 (as in the previous example), and for your h1 elements it’ll multiply 24 by 1.4 as well, giving them line-heights of 33.6, which is a little loose for my taste, but much better than squishing up your lines.

Finally, here’s the CSS shorthand for defining line-heights:

font: font-size/line-height font-family;

How do you define your line-heights?

Designs of the Week

The top half is all about the work, while the bottom half contains supporting information from other sections of the site.

I never tire of this blocky, 3-dimensional style. The “request a free quote” tab at the top is a nice touch.

I love the navigation buttons in the header. The dark flowery wallpaper background is a bit weird though. But overall, I like the ample use of textures here.

Clean and light with just a touch of grungy textures. Lovely.

The use of hovers to switch between different chunks of text in the portfolio carousel was confusing at first, but it’s all good.

I enjoyed this website. Modern and airy with a touch of warmth thanks to the orange and the owl. The text only needs to be a notch larger.

I really like this color scheme! Plus the whole translucent and outlined graphics.

Orange, red, and black—I don’t think there’s any stronger color combination than that! Since it looks like this is a legal site, it’s great that the designers made sure the text is easy to read.

The best part of this site is that you can actually rate each item in the portfolio. Then in the client panel at the top, they’ve got the top rated designs and some great articles for resources.

Social Media Weekly

Design – Happy Haunting: Halloween Hits On the Web of Design

Icons – 200+ Truly Useful Free Halloween Icons for Everyone

Themes – Top 10 Free Halloween WordPress Themes

Burning Wrath

World of Warcraft fans will probably recognize this font, which is similar to the one in the logo of “The Burning Crusade / Lich King”. I don’t play WOW, but I do love this font- especially its name. Feel my wrath burn!

Bloody

What would Halloween be without a font that bleeds? There are a lot out there, true, but my top pick has to be one named, aptly, Bloody. It’s clean, yet… well, it drips blood.

Daemonesque

Looking for something a little less obvious? The beautifully rendered Daemonesque is formal and deceptively classical: look closely to see the little skulls in the letters. Lovely.

Yataghan

This one’s Vampire-inspired, which explains its sexy, sharp edges. A good font to have, especially if you have a Twilight-obsessed teen daughter.

Frankendork

A nice tall font with great letter-spacing and just the right amount of “shakiness”. Particularly good for headlines.

Do you use scary fonts?

ExecPHP

One of my default plug-in installs, ExecPHP allows you to, yes, “execute” PHP from within Wordpress. That means that chunks of PHP code will work in your pages, posts and widgets- not just in your templates. I previously used runPHP, but switched after running into some problems with the latter- and I’m glad I did. This one just works for me.

Preserve Code Formatting

Developers know how important it is that the formatting of our code isn’t trifled with. This lovely plug-in makes it so Wordpress (or other plug-ins you’ve got installed) can’t modify your code, while retaining your original whitespace and characters. Simply use <pre> and <code> and the plug-in will take care of the rest.

SQL Executioner

A gem of a plug-in that allows you to access your MySQL database from within Wordpress- that’s right, without having to fire up phpMyAdmin. Among other things, it performs “select”s and “describe”s, and modifies with “insert”s and “update”s.

What are your favorite Wordpress plug-ins?

Designs of the Week

I really like are the way the popup menus are designed. Even better is the way the background images load first, and then the content area fades into view.

Great lighting in the header, and the way the color of the wood background makes the photos pop.

You don’t have to pepper your site with concrete representations of what your site is all about, and this is a good example of that. Makes for an elegant yet still outdoorsy look.

I’m not sure exactly why you’d use a strap in such a prominent place such a header but it certainly looks different. Love the interactivity of the menus on the left. Another brilliant feature: the execution of the map menu on the right side.

Huge photos. Excellent typography. I’m just not sure about the wallpaper background.

Clean and modern. The labels on the photo itself are a great and necessary touch.

This design reminds me of Obama’s online branding, and it looks so elegant. This isn’t even a travel destination site, but it definitely makes you want to go there.

I like the textured background in the logo, and the way the photos fade at the edges.

Social Media Weekly

Design – 404 Error Page – Don’t Get the Page Itself to Be Even a Bigger Error

Programming – HTML, CSS, and Web Development Practices: Past, Present, and Future

LiveQuartz

LiveQuartz was a more recent discovery of mine, and one I’m very glad to have made. They call it “Free Photo ReTOUCHing for Leopard”- and if you’ve used an iPhone, you’ll understand why: if your Mac is equipped with a multi-touch trackpad, you can use gestures in LiveQuartz- for example, “Swipe” for tools and layer controls, and my favorite “Pinch & Expand” for magnification, zooming and rotation. It handles most image formats, including Raw, and features non-destructive layer editing. Definitely one to try out if you haven’t.

Image Tricks

I’ve used Image Tricks for some time now, and it’s important to note that you cannot draw in this app: it’s strictly for photo editing- which it handles truly beautifully. I believe it’s called Image Tricks for a reason: its built-in image filters are great, easy to use, and can spell hours of fun for someone who wants to play with their photos.

Paintbrush

If you’ve ever used MacPaint (and I’m old enough to have used it a lot), Paintbrush is the same thing- only better, because now you’ve got things like an airbrush, a rounded rectangle, and the ability to zoom. Seriously, though, this is a great app even if you don’t remember MacPaint, mostly because of how streamlined and easy to use it is. As they say, “Just pick a tool, pick a color, and go!”

Seashore

Seashore is simple but quietly powerful. Based on Gimp, it’s got everything from gradients, anti-aliasing and textures to layer editing and alpha channels- making it perhaps closer to Photoshop than the other apps I’ve listed here. To see what Seashore can do, check out these video tutorials made by a user. Good stuff.

Which is your favorite non-Photoshop photo editor?

Designs of the Week

Just about everything on this page will blow you away, including the typographic artwork found in the content.

I love the glows and the fly-out torn paper menus. I think the text within the scroll could use a bit more tweaking though, especially with custom font replacement techniques rampant today.

I love all the elements that come together to make this cozy, Victorian-inspired space. The subtle glow that appears when you hover on the menu links makes me wish it happened to the lamps in the header too!

Love the curtains, the lighting, and the custom fonts in here.

This one’s more gritty since it’s got a steampunk theme, but still a great example of higly detailed design. So many textures in this one too.

So whimsical! This feels like a mural with several parts that came to life. Check out the four other sections of the site for more brilliant versions of the header.

Social Media Weekly

Design – 7 Key Principles That Make A Web Design Look Good

User Experience – Powers of 10: Time Scales in User Experience