How to add personality to a basic WordPress theme

So you finally decided to get your blog up and running on a self-hosted version of WordPress, the amazingly popular blogging platform. You’ve seen plenty of sites using WordPress, and maybe even heard about themes, the powerful system that lets you customize how your site looks and behaves. You can choose from a wide variety of free themes, many of which have different content, layouts, and appearances. The problem is that straight out of the box, these themes look like, well, themes. They’ve got a personality, but it’s not yours.

So how can you take one of these basic (free) themes and customize it to look and feel the way you want, without having to create a whole theme from scratch? It turns out there are a few simple steps you can take to transform a basic theme into something that shines. All you need is a little familiarity with CSS, web typography, and how to crop photos.

Step 1: Pick your base theme

The most important step is to pick out a basic theme that’s got all the elements you want. Themes come in lots of shapes and sizes, and you need to decide what you want in terms of the following key things:

  • Layout: The page layout refers to the number of columns on the page, where page elements go, and how content is placed on the page. Pick a layout you like with the right number of columns, since that’s not easy to change
  • Page elements: All themes provide areas for content, but they often differ in terms of what other “widgets” you have on the page (e.g., a calendar, lists of links to posts and third-party sites, or modules that pull in content from sites like Twitter)
  • Header images: Lots of themes put images in the header of the page, which can create a strong personality. If the theme you pick has an image, it’s ideal if it’s customizable
  • Widgets: WordPress uses “widgets” for lots of different things. Themes vary in terms of the places you can put your widgets. Pick one that will work for you

Step 2: Create a child theme

WordPress has a powerful inheritance feature that allows you to create a child theme that takes on whatever properties of the parent you want it to. By default, it inherits everything from the parent style. With that as a baseline, you can then add or subtract as much or as little as you want. To help you get there, check out this terrific step-by-step tutorial on creating a child theme and then tweaking it to suit your needs.

Step 3: Customize your header image

If anything screams theme, it’s leaving in the generic header image used by the theme. If you can, come up with an image of your own (I use my own photographs, cropped to the header image dimensions). A theme with customizable headers usually let’s you change the header right in the WordPress admin panel, without the need to touch any code.

Step 4: Add some typographic flair

Another element of most themes that make it look a bit generic is the typography (i.e., the typefaces used for content). In the past, you could really only use typefaces in your site that people had on their own computers, which really limited options. Recently, it’s become much easier to use some great typefaces without too much work. There are a number of services that you could use, but I chose to use Typekit. It’s pretty easy to use, flexible, and for a minimal cost ($25/year) you can get access to some fantastic Adobe fonts. There’s a Typekit plugin for WordPress that makes it easy to add, and once it’s in, you can use Typekit itself to adjust what CSS styles get the type treatments you want.

Write with style

That’s it! With those few changes, you can transform your blog into something with more visual personality (to go with your great content). No one will know you started with that generic theme used by everyone else, and hopefully it will stand out as something to remember.

Let me know how it goes if you decide to give it a shot!

This entry was posted in Web stuff. Bookmark the permalink.
  • Sethbain

    Thanks for the clear breakdown. Makes me want to go out and start building my own sites :)