How to Design for WordPress

Note: this article pertains to the self-hosted version of WordPress, available with most paid Web hosting and downloadable for free – not the WordPress.com version.

By now, you’ve probably heard that WordPress runs about one-fifth of the world’s Web sites. You may even be familiar with how easy a WordPress-powered site is to manage. But you may still scratch your head as to how to create or alter page layouts, colors, fonts, backgrounds, and other visual elements.

The Theme’s The Thing.

Each WordPress site gets its look and feel from its active theme. Individual pages are generated from templates, theme files that pull their formatting and colors from the theme’s CSS file. To change the site’s colors, fonts, or layouts, you need to edit specific theme files – including style.css and perhaps some PHP files – or change to to a new theme. Or both.

By far, the easiest way to make changes is to change your theme. Just go to the Appearance >> Themes >> tab of your WordPress dashboard. You’ll see a list of available themes in the default tab, with another tab that lets you search for and install new themes. You can specify layout, color, features, and even subject (i.e. intended use) options. When you find one you like, you can preview and install it. Clicking the “install” link downloads the theme to your WordPress dashboard, though in order to use the theme, you must click its “Activate” link.

Customize It!

Whether you install a new theme or stick with what you have, you can edit some of its appearance via the Customize option, available from either the Appearance or Themes tab. This is a relatively new WordPress feature, so older themes may not support it. Meanwhile, some individual themes come with their own customization options, available once the theme is activated. You’ll see them as new dashboard links or sublinks once the theme is activated.

Do It Yourself? Or Get a Head Start?

Of course, you could go the most difficult route and build your own theme. To do so requires strong HTML, CSS, and PHP skills, along with an intimate knowledge of how WordPress works. But most designers don’t go that route, Instead, they use theme frameworks, which add an array of unique customization options to the WordPress dashboard. Theme frameworks are installed through the dashboard, the way most themes are. They’re surprisingly easy to set up, though some of them require advanced knowledge to tweak your pages into displaying the way you want.

Since the point of this article is to give you an overview of the ways you can customize the look of your WordPress site, I’ve presented the five most popular ways WordPress users shape their Web sites. I’ve also provided links to some specific options, though I am not affiliated with any of them. The links I provide just reflect common solutions I’ve found as I’ve worked with WordPress.

Popular Ways to Design Your WordPress Site

Theme Frameworks

Frameworks are themes that offer a ton of customization options. Some you have to pay for (one of the most popular is Thesis; others include Genesis, Headway, Builder, Weaver II, and Atahualpa). With a combination of coding expertise and knowledge of the particular framework’s nuances, you can create a very professional-looking result. This is the most common method designers and design firms use. They pick one or two frameworks, buy a developer’s license (if that’s required) and learn each framework thoroughly enough to do almost all their projects that way.

Premium Themes

Many design firms buy templates from major theme outlets, such as Elegant Themes, ThemeForest, or Theme Kingdom. Each offers individual themes for sale, along with membership rates that allow you to buy and use all the themes they offer. The latter is much more cost effective if you expect to create multiple sites for clients. Each premium theme installs with a control panel that offers tweaking and customization options.

Theme-Creation Software

Currently, Artisteer is the leader in this arena, but it’s gotten buggier and more problematic with each new release. I expect something better to come along soon. Dreamweaver, meanwhile offers a way to do WordPress theming, though I haven’t worked with the latter.

There are also online theme generators, some of which are free, while others have both free and paid options. Check out WordPress Theme Generator, Lubith, and WP Theme Generator.

Child Themes

This is method via which you begin with a theme, such as one of the default themes offered for free when you install WordPress. You create a new theme that piggybacks on the original theme, editing the new (child) theme’s CSS and template files with a text editor until you have something you like. This method requires strong CSS and HTML knowledge, along with some PHP familiarity.

Even if you ultimately intend to use other methods I’ve outlined here, I strongly recommend creating and editing a child theme for at least one WordPress site; it’s a fantastic way to learn – hands on- how WordPress really works.

From Scratch

This is a very advanced option, and very few designers actually go this route. It requires strong knowledge of WordPress, MySQL, HTML, CSS, and PHP. Even so, it’s extremely difficult to create something that will work well across devices and browsers. Furthermore, you have the challenge of keeping your theme up-to-date as browser, mobile, tablet, and other device trends change (most ready-made themes and frameworks are regularly updated by their authors and usually alert users when updates are available).

Where to Go from Here

The best way to proceed is to gain a basic working knowledge of WordPress first. You can install WordPress on your computer (you’ll need to run a Web server on it first) or install it on a domain or subdomain of whatever hosting you use. I favor the latter method, since you can play with your WordPress installation from any number of different computers. Plus, you can use the one-click WordPress installer that comes with most Web hosting.

Getting The Help You Need

As a WordPress consultant, I can guide you through how WordPress works and how to set it up for use as a Web site CMS (content-management system) or a blog site. I’ll show you how to create and tweak a child theme and how various WordPress features and plugins work. Then, you can dip your toes into the theme framework waters, by installing and trying one of the frameworks I mentioned above. Try a free one first (Weaver II is easy to use and offers plenty of online support).

Have fun indulging your creative side with WordPress – and feel free to add your thoughts or questions.