How to Pick the Perfect WordPress Theme

Have you ever picked a WordPress theme and started to put together a website only to realize that you’ve picked the wrong theme? With money and time already invested, switching may be out of the question and you may be stuck using a theme you’d be better off without.

Picking a theme is a bit like picking a car: It’s easy to get distracted by the beauty and power of a beautiful product and end up with a convertible two-seater when what you really need is a reliable sedan with comfortable seating for five.

I’ve found myself in that situation at least a few times. Trial-and-error has led me to develop an informal system for defining project requirements and evaluating and comparing candidate themes before making a commitment. In this article, I’ll describe the process I use for theme selection and how you can use it to increase your chances of selecting a theme that is a good fit for your next WordPress project.

Know What You’re Trying to Build

Never pick a theme until you know exactly what you’re trying to build. Picking a theme is fun, but planning website content is the most important part of the website creation process and the part that requires the most self-discipline.

Content precedes design. Design in the absence of content is not design, it’s decoration.

— Jeffrey Zeldman (@zeldman) May 5, 2008

Content first, theme selection second.

For a website to be effective, content must come first. Define the purpose of the website, the overall structure, and the media and text resources that will be used to build the website before you even begin to start looking at themes.

Create a catalog of all of the pages the website will include and what will be included on each page. Be as detailed as possible. For example, if you’re creating a business website that will include a page highlighting key company staff members, your description for that page might look something like this:

Staff Page: Profiles for four executive staff members. Each profile will include a photo, a bio between 125 and 150 words long, and one or two social icons.

Use this information to identify the features you need out of a theme. Then as you shop for themes, refer back to this list to pinpoint themes that include built-in support for the features you plan to use.

The key in this step is to find themes that are built to do what you’re trying to do. Misapplying a theme is a recipe for frustration as you try to bend the theme to fit your vision – a vision it was never intended to fulfill.

Many of the most popular themes in the WordPress Theme Directory, such as Sydney , are very image heavy and are ideally suited to be used as portfolio websites for creative agencies. If you are building a blog you would be happier avoiding a theme like Sydney in favor of one designed with your type of project in mind, such as Twenty Sixteen.

Can you force a theme like Sydney to work as a blog? Sure. However, you’ll be up and running a lot quicker if you use themes to build the sorts of websites they were designed to build.

Know What You’re Looking For

The project budget and timeframe will have a lot to say about how much time you can afford to spend on a website. There are three different categories of themes you can consider based on the demands of your project and the amount of time you can spend perfecting the finished product.

Theme frameworks are the way to go if you need to start with a blank slate. Genesis, and Thesis are all solid products you can build any type of website on top of. With some practice, you’ll get pretty good at crafting sites quickly with your favorite framework. However, if speed is the most important factor, you may want to either skip the framework in favor of a theme or select a skin or child theme pre-built for your favorite framework.

At the other end of the spectrum are full-featured themes intended to be used with right out-of-the-box and require minimal modification. You can either select a stand-alone theme, such as the aforementioned Sydney theme, or a pre-built skin for your favorite framework.

Lastly, if you don’t want to build a theme from scratch with a framework, and you can’t find a theme that’s perfect right out-of-the-box, you can select a theme or framework skin that is designed to be easily customized. It almost goes without saying that framework skins are designed to be easy to work with. However, the same is not true of themes. Some are easy to customize while others are very difficult to customize and may break easily. In the last part of this article, we’ll explore ways to determine how easy it will be to customize a theme in case you want to go this route.

Ignore the Demo Content

When you put together a website you have specific pieces of content to work with. You will be integrating carefully selected images, graphics, videos, and text. Every piece of content that goes into the website will have a specific purpose.

When a theme designer puts a demo site together they don’t face the same constraints. Their goal is to make a site that is as visually appealing as possible and makes use of every available theme feature. They can use as much lorem ipsum and as many stock photographs as they want to make that happen.

When you look at a demo remember that you aren’t there to evaluate the content of the demo. You are there to evaluate how well that theme fits your needs.

Pay Attention to the Demo Features

While you should ignore the demo site content, you should pay careful attention to demo features.

Going back to our example about staff profiles, take a look at the demo for specific ways you can create profiles. Does the demo include features you can easily use for this purpose?

Check out themes from the WordPress Theme Directory that offer a feature targeting this need.

Some of the most important theme components to pay attention to include:

• The layout of site navigation: Nav elements will have some degree of flexibility, but make sure the overarching design fits your requirements. For example, if you need mega-menus, building them will be a lot easier if you pick a theme that supports them.
• How website branding is handled: If you already have a logo and tagline to work with, make sure they fit with the branding positions and sizing built into the theme.
• Whether features are powered by the theme itself or by plugins: You should prefer themes that offer features powered by plugins. That way, if you ever have to switch themes, most features will remain functional. Going back to our mega-menu example, it would be better for a theme to include the Max Mega Menu plugin than to power mega menus with built-in theme features.
• How the theme is customized: Do you want to work with a visual editor such as Visual Composer or Upfront Editor, or do you prefer to write CSS rules manually to modify website presentation? If you have a strong preference one way or the other, make sure the theme matches your preferences. One mistake to avoid is writing CSS rules manually with a website built using a visual editor.

Get an Unbiased Opinion

Once you’ve settled on a couple of themes that fit your content and offer the features you need, there are a few different tests you can use to compare the technical performance of the themes.

One option is to run the theme demo site through Pingdom’s Website Speed Test. Don’t worry too much about the load time or page size at this point unless you get results that are alarming. Website load time can vary dramatically based on the hosting setup and location, and the caching and minifying implemented on the demo site. The page size of demo sites is often quite bloated due to the use of very high-quality images and video backgrounds. The metrics to pay the most attention to are the number of HTTP requests made and the overall performance grade.

If you find that a theme or framework you really want to use doesn’t do very well when run through this test, consider it a heads-up that you need to pick a good caching and minifying plugin such as Hummingbird rather than a reason to reject the theme outright.

The best way to use the results of this test when evaluating themes is a basis for comparing candidate themes. For example, if you’ve settled on using OnePress based on the results of this test you might give OnePress a slight edge, although both of those themes actually tested quite well.

Another tool you can use to evaluate themes is Google PageSpeed Insights. Once again, there isn’t a specific benchmark you’re looking for. Run all of the themes you’re considering through this test and compare the results. While you’re at it, use the test results to identify the performance issues you will need to address based on the theme you select.

Take a Look Under the Hood

The last thing you want to do is get a sense for what it’s like to work with the theme. Many themes offer an admin area preview. Take a few minutes to review this preview to understand what it will be like to work with this theme. If the theme or framework includes a visual drag-and-drop editor see if you can find a live preview of the editor and spend several minutes modifying the positioning and appearance of website elements.

If you’ll be writing custom CSS to modify the theme open the theme demo site and take a look at the CSS files using Developer Tools. The goal is to get a feeling for how easy or hard it will be to customize the website. Here are a few things I look for when evaluating theme CSS:

• How many lines of CSS are used? It’s not uncommon for themes to have anywhere from several hundred to a few thousand lines of CSS. While not an absolute principle, it is usually easier to make manual edits to a theme that has fewer CSS rules.
• How many CSS files are used? Most themes will pull CSS rules from a handful of CSS files. However, if you plan to make manual edits, the fewer the number of files that are involved the better. Fewer files tend to be indicative of a better-organized code base and one that will be easier for you to manipulate.
• How many times is !important used? While virtually all themes can be expected to override standard CSS inheritance with this value at least a few times, if you plan to make manual edits and find that a theme uses this value a few hundred times, you can expect it to be difficult to manipulate manually.

One way to get a sense for how easy it will be to edit a theme’s presentation by writing CSS rules manually is to pick an element you will want to modify and to use the Styles Pane in Developer Tools to live-edit the demo site and figure out how specific you’ll have to be to select the element and make the desired modifications. If you haven’t used Chrome Developer Tools before, check out our article on how to leverage it for WordPress development.

A Theme Selection Checklist

We’ve covered a lot of ground. To make things simple, here’s a checklist of the criteria discussed in this article:

• Content comes first, then design. Start the process be defining the content the theme will showcase.
• Define the type of theme you’re looking for: a theme framework, a full-featured theme to use as-is, or a customizable theme.
• Evaluate theme demo sites looking for themes designed with your type of project in mind that include the features you plan to use.
• Compare the performance of candidate themes using tests like Pingdom’s Website Speed Test and Google’s PageSpeed Insights.
• Try out the visual editor built into the theme or framework, or evaluate the theme’s CSS code base if it doesn’t have a visual editor.

After running through that list you should be ready to select the framework or theme that best fits your project.