There was once a time where I would do everything to hide from a client that we were using a WordPress theme.  Just the sound of the word “theme” held a negative connotation, as if we were somehow cheating.  Everyone wants to feel that they’re getting things custom built from the ground up.

The fact of the matter is, that every site is using a theme in one way or another.  It’s just a semantic term at this point and using one as a foundation to build from is not only okay, it’s probably dumb if you don’t.  If you’re not starting from something and taking advantage of the resources available to you, you’re wasting your clients hours and your own.  Don’t reinvent the wheel.

But the days of “theme avoidance” are gone and we now get clients coming to us asking us to use a specific theme they’ve found on ThemeForest.  When I hear this, it’s a red flag since it’s usually picked for the wrong reasons.

The wrong way to pick a WordPress theme

Before we can talk about the right way to pick a theme, we need to discuss the wrong way.

The basis for many people picking themes is purely aesthetic.  I’d be lying if I didn’t say it’s the first thing that I consider when picking a theme too.  It’s impossible not to since it’s the first thing you see and you can qualify or disqualify a theme based on this alone.

The problem is a theme is not just a skin for your site, at least not in WordPress.  A theme is so much more in WordPress- it’s responsible for loading your site assets (javascript and stylesheets), as well as most of your code output.  Many now provide the admin functionality for most of the theme features, whether through custom shortcodes or bundled plugins.

Why is this a problem?  It affects how (and if) you’re capable of working on your site.  But more importantly, it affects how users experience your site and your search engine rankings.  

1. Find a not-so-bloated theme

The problem with themes and marketplaces is that they encourage more and more features in order to remain competitive.  It’s not necessarily the theme developer’s fault since the only way to make money is to pack your theme with more features than your competition.  That said, holding a top rated theme on a marketplace does not make you a good WordPress developer.

However, this is the fault of the general attitude towards themes right now.  Wordpress themes are no longer quality driven.  Instead of picking a theme that matches your site needs, it’s easy to get distracted by the many bells and whistles, of which 90% you’ll never use.

The problem 

You’re thinking, “So what?”  It’s fine as long as it has what I need, right?  Wrong!  Take a look at one of the top themes on ThemeForest and notice the number of files in addition to the total size of the page.  You can do this by right clicking in Chrome and hitting “Inspect” and then clicking on the “Network” tab.

Network tab of theme from a bloated theme

The problem with this load time is it’s bad for both user experience and SEO.  Regardless of how cool your loading icon is, about half your users drop off after the first 4 seconds and Google rewards faster loading pages.

We’re keeping this theme anonymous for obvious reasons.  The point of this article isn’t to shame anyone, but rather to show people how to avoid a (secret) train wreck of a theme.

The solution

The fastest way without getting into too much detail is to inspect the theme you’re looking at (we prefer the Chrome inspector) and take a look at the overall load size.

For the most part you can ignore the time it takes to download the page since most of these themes are setup with high-end servers and CDNs that you won’t have access to on your own site.  However, if it takes more than 4 seconds to load the DOM content on the demo site, run away from this theme! 

Disable cache checkbox image from Chrome inspect

You’ll want to make sure you disable the cache so you’re getting actual file sizes.  When totaling file size, don’t include images in your total (jpeg, png, bmp, etc.).  The reason being is that these will usually be the largest part of a page and should not be directly included in the theme- meaning you should be able to add and remove your own images.  So while these are important for load time, it’s not theme dependent.

The main files to look out for are javascript files (js), stylesheets (css) and fonts (truetype, eot, woff, svg, cff…… etc).  When a theme author is adding in a bunch of different cool shortcodes and features, it’s easy to get carried away and sloppily combine a bunch of third-party scripts, creating a massive page load issue.

2. How’s the demo content?

Is it included?  The answer to this question should always be a resounding “yes,” but I’ve found that’s not always the case.  Occasionally I’ll import demo content only to find that it’s barely recognizable compared with the original theme.  

Even worse, I’ve seen some where half the front-end is made through CSS classes and can’t be reproduced using any combination of theme shortcodes.  This was actually an issue in one of the top 5 themes on ThemeForest and I was astounded at how shockingly poorly developed the theme was.

The problem

Why does the demo content matter?  The demo content is arguably one of the most important features of the theme.   Here are the 3 scenarios you’ll fall into:

  1. You like the initial theme design and you almost definitely should start by using that as a base.  You can swap out your own images and content from there.  This is one of the biggest time savers in a theme and should be taken advantage of!
  2. You like some of the features in the theme, but haven’t used it before.  It’s always going to be easier to understand how a theme is used by looking at shortcodes, widgets, and options that are already setup for you.
  3. You’ve used the theme before and are comfortable creating your own layouts within it.  In this case, the demo content might not be that important to you.

The solution

Quick and easy- take a look at the theme item description page.  It should tell you if it’s included.  Most modern themes now include one-click installers and will probably tell you if they do.  If in doubt, send a message before buying.

3. Do you really need those features?

This may seem like a redundant point, but we often see people purchase themes that have tons of packaged plugins and shortcodes they'll never touch, but are still missing some of the features they do need.

The problem

All too often, a site gets setup and looks great only to realize that the theme is not Woocommerce compatible or doesn’t have a forum or some other important aspect of your website.  Don’t fall victim to good marketing and get sold on features you don’t need.

On top of that, every one of those features that you aren't using is still extra weight on the theme, causing slower load times (refer to point #1 of this article).

The solution

Before you start even looking, jot down a list.  It will only take you 5 minutes to do.  Write down everything you want out of your theme.  Here’s a quick sample list to give you an idea:

  • Needs to have a shop
  • Compatible with Visual Composer
  • Video background option
  • Transparent header area that fits our logo
  • Newsletter form styling
  • Custom font option to override both theme and Google fonts

Again, I know this may seem simple, but you don’t want to purchase a theme only hours later to realize it’s missing an essential for your site.  Not reading what’s included in the theme is not a valid reason for a refund- don’t be that guy!

4. Is the theme's code quality okay?

This one can honestly take a while to comb through since each page or template is subject to different html, but it’s important and may be a hard fix if the theme really screwed it up.  It's also worth noting that you don't have access to the PHP here so you're only getting a partial idea of what the code is like.

The problem

Aside from your site appearing correctly in different browsers, the tags are also important for your SEO.  For example, if a theme decided not to use H1 tags in their page headers, you would not be able to modify this without code and would be losing out on valuable on-page SEO points.

In some cases, text that is inserted through javascript can’t even be read by search engines.  For example, this text typewriter effect shortcode looks really cool as it types out different variations, but Google will never see actual content.  Below is the html and javascript put out by the shortcode.  The area between the span tags is where the content should be, but it's inserted dynamically.  If you're using this area to place SEO related content, it's going to waste.

<span id="typed-1312686625587b8c5c7c41b"></span>
<script type="text/javascript"> 
jQuery(function($){ 
	$("#typed-1312686625587b8c5c7c41b").typed({
		strings: ["Bonjour","Salut","Aloha"],
		typeSpeed: 35,
		backSpeed: 0,
		startDelay: 200,
		backDelay: 1500,
		loop: true,
		loopCount: false,
		showCursor: false,
		cursorChar: "|",
		attr: null
	});
});
</script>

The solution

Nothing quite compares to experience and manually combing through the code here, but there are some tools that will at least give you an idea of how bad or good a theme is.

HTML Headings Checker – This just checks to make sure heading tags are being used properly.
W3 Validator – With the validator you just want to make sure there are no glaring errors.  A few here and there are okay as it's known to give false positives on commonly accepted practices.

5. Find a theme that doesn’t look like… a theme

This is the hardest part when picking out a WordPress theme.  The themes you find on ThemeForest are great or at least were great once upon a time.  So many sliders and animations- how could such an advanced site possibly be a theme?

The problem

The issue is now that every site uses revolution slider, even when it shouldn’t.  Sites use progress bars and team boxes for no reason other than the fact that they’re included in the theme.

It’s bad when you enter a site and realize in a split second, “Oh this is ____ theme from ThemeForest- I knew it looked familiar!”

This makes your site bland at best and really unprofessional looking at worst.

The solution

I wish there was an easier fix here, but this point takes time to resolve.  You have 3 options:

  1. Find a theme that very closely resembles what you need AND is unique.  The unique part is hard and usually means you can’t just head over to the “top themes” section since chances are there are thousands of sites that will look just like yours.
  2. Find a theme that has the features you need and strip the junk out, leaving what you need to make a beautiful site.  Many themes have all the working parts you need.  If you are a designer, remove the extra non-sense from the page and with only CSS tweaks you can create something that doesn’t resemble a theme.  If you’re not a designer, I don’t recommend trying this- you may think you’re able to, but the likelihood that you’ll produce a better looking site than the theme demo is slim at best.
  3. Find a theme framework that’s lightweight and not overly opinionated to build from.  This requires development and design skills, so unless you have both of those or are feeling overly confident, don’t waste your time here.

Basically, put the hours in beforehand finding the perfect theme or put the design and development hours in after modifying accordingly.

TL;DR

Research your WordPress theme before buying!  You will save yourself a lot of time and headache in the long run and not end up with a generic looking website and a hole in your pocket.