I recently received an e-mail from someone who wrote, "I liked your blog extremely and was wondering if you customise one for me with the same theme and layout." Readers often don't realize that most WordPress blogs are free themes that you can apply in a few minutes. This post offers a little crash course on WordPress themes.
Themes refer to the skin or visual framework around your blog's posts. In WordPress, content is separate from format. Posts are stored in a MySQL database, and are transformed by your themes files. Theme files are separate from your database content.
You can switch your theme with just a couple of clicks, and the new theme will wrap around your same posts. This is one of the best things about WordPress — you aren't stuck with one web design for life. And there are more than a thousand themes to choose from, with new themes developed daily. When you get tired of looking at your theme, just upload a new one, select it, and voila, you've got a fresh looking site.
I put together 39 WordPress themes I like in a theme viewer. Click the sidebar's theme links to see various themes applied to the same content. Note that these are not 39 different sites, but rather thirty five different themes applied to the same site.
Themes can contain one, two, three, or four columns. One column themes are simple and don't feature any sidebars. Two themes are the most common, and feature either a left or right sidebar. Three column themes often have both a left and right sidebar (or two sidebars together). Four column themes cram four columns in there.
For a more thorough introduction to themes, see this Codex page on Using Themes.
Before you even start looking at themes, read Ben Hunt's Web 2.0 Design guide (it will take just a few minutes to read). This is hands-down the best guide I've ever read on blog design. He's not even talking about blogs, but Web 2.0 design in general.
Be sure you really read Hunt's guide, because most tech writers aren't graphic artists, and this guy fills in some educational gaps. Many of us are stuck in the past with web design. Web 2.0 has a totally different look and feel.
Hunt identifies 15 characteristics of good Web 2.0 design:
Simplicity is number one in priority. Hunt explains:
Less is more. Fewer columns feels simpler, bolder, and more honest. We're communicating less information more clearly.
….The result is that you [readers] have to look at the content. You find yourself interacting with exactly the screen features the designer intended. And you don't mind - it's easy, and you get just what you came for.
In choosing themes, avoid those over-cluttered themes with too many columns and other visual paraphernalia. Keep it simple. People are there to read your posts, not the sidebar. Do your eyes focus on the posts, or something else?
The principles of concise writing apply to web design: unnecessary visuals dilute your core message.
If you take Hunt's advice, you probably want a two column theme, with a centered layout and solid top section. Look for big, bold buttons, and text that you can read sitting a distance from your computer. Strong colors and simple navigation are the most appealing. Colored blocks of text work well to contrast with the main sections of your site.
Also, remember these fundamental web design truths:
Unfortunately the attempt at a centralized directory for themes seems to have failed. Themes are scattered across the web. If you start Googling “WordPress themes,” you can find most of them. If you're reading a blog you like, see if the footer mentions the template name. However, often the coolest blogs are custom creations the author has decided to keep to him or herself.
The Codex tries to offer a comprehensive listing of themes:
Almost all themes are installed the same way: download the file, unzip it (7-Zip is a great tool for this), and upload it using an FTP program (like FileZilla) to your wp-content/themes directory. Then select it from the Presentation tab.
If your theme doesn't already come with widgets, you can widgetize it. Widgets provide drag-and-drop functionality for your sidebar. Widgets can make updating your sidebar simple, especially if you are intimidated by code.
You can tweak any theme, but tweaking isn't always easy. If you want to change more than 20% of the theme (and you're not familiar with CSS), you might just choose a different theme. The more you customize, the more time you invest in that theme. But customizing your theme also helps you understand the code in the theme's files.
You can customize your theme's files by going to Presentation > Theme Editor. The theme files are PHP files, with a combination of php and style tags. Don't worry – you don't have to be a programmer to make adjustments. Anytime you see a tag that begins with with < ?php, that's a php tag. It's calling content from your database. If you see a div or span or class tag, that's a CSS tag, defining how something looks. If you see an HTML element, such as h2 or ul, that's also a CSS tag.
All themes have a style sheet. That's where you'll be making most of your changes. As you tinker with your theme files, you'll find that small mistakes can be disastrous. If you forget one div tag, your theme can become totally misaligned. Or if you remove a php tag, your theme could disappear entirely, replaced with an error message. If this is the case, just reupload the original theme files using FTP. (If you are ever locked out of your dashboard, you may have to resort to your trusty FTP editor to resolve the situation.)
You can edit the php files within WordPress (Presentation > Theme Editor or Manage > Files). You can also download software specialized to edit PHP files (usually these programs tell you what line you're on). Or you can just use Notepad. Any text file that is saved with a .php extension can be used as a PHP file, as long as its code is correct.
I use a couple of tools when I need to tweak my theme's style. The first is the Web Developer extension for Firefox. You can pinpoint the name of the style you need to modify. (See this post for more info.)
You can also study out your theme by adding pink border attributes in the style sheet. I haven't tried that, but the WordPress Codex recommends it.
You can also use Top Style Lite. It's a free download. Just copy and paste your style sheet into it, and you can preview any of the styles. This helps you identify their name and location in the style sheet. Top Style Lite also provides you with other values you can use to define your styles.
Speaking of themes, I'm growing tired of the theme on my site. I may just change it soon. Any recommendations?
Get new posts delivered straight to your inbox.
I'm a technical writer based in the California San Francisco Bay area. Topics I write about on this blog include technical writing, authoring and publishing tools, API documentation, tech comm trends, visual communication, technical writing career advice, information architecture and findability, developer documentation, and more. If you're a professional or aspiring technical writer, be sure to subscribe to email updates using the form above. You can learn more about me here.