Choosing a Well-Built WordPress Theme: A Step-By-Step Guide

diamond | finding the right wordpress theme

All premium WordPress themes are not created equal—not even close.

At their best, premium WordPress themes are great: they’re beautiful site design in a box, dead-simple to install and use, and come at a low (arguably too low) price.

However, all premium WordPress themes are not created equal—not even close. Some are both intelligently built and beautifully designed, some are one or the other, and some are neither. And shopping for WordPress themes is very difficult, for two primary reasons:

  1. Above all else, WordPress theme shops sell you the demo. The theme demo is the theme in its ideal state, put together by the same techs who built it, and with the implicit guarantee that the theme will only be used for the things it’s built for—none of which is true for your actual site.
  2. You can only see a theme’s frontend prior to purchase. You very rarely have a way, prior to purchase, to look into a theme’s backend (its options and settings) to see how everything’s put together. This means you cannot know what in the theme demo is actually customizable, how well-built and sensible the user interface is, and how technically robust the theme’s inner workings are or aren’t. And so:
Decorated bedroom

The theme demo

Empty bedroom

The frontend of the theme once you purchase it

DIY fail chair

The theme backend

Sound familiar? This article lays out some technical approaches to understanding how well-built a theme is—and how closely you’ll be able to customize it to your needs—before you buy it. Armed with these, as well as with more general theme shopping strategies, you should have a lot of the tools you’ll need to make your theme purchase the right one.

How to Search for Theme Candidates

The answer here’s not very glamorous: I Google things like “best WordPress [type of theme] theme” or “best WordPress [type of theme] theme [year]” and just skim through the first five or so search results that come up.

All those results, obviously, are giant list-based affiliate articles. But I think there’s a reason those articles are popular: I haven’t found a better way to quickly skim through a large number of theme options and pick out promising candidates.

So for a magazine-type site with a flat design, my process would look something like:

  1. Google “best premium flat magazine WordPress theme 2015”flat magazine wordpress themes search
  2. Open up the first three or four pages of results
  3. Open up the demo of anything that looks appealing

At this point, I have as many as thirty browser tabs’ worth of themes open, which I’ll comb through and narrow down.

The main thing that I think could replace this workflow would be a much better ThemeForest search function, but I don’t know that that’s coming around any time soon.

Narrowing Down Theme Choices

Look for Awkwardness

The first thing to look for with each theme is conspicuous awkwardness. That can mean quite a few things:

Slow and Jittery Scrolling

Is scrolling on the site quick and smooth, or heavy, draggy, and jumpy? If it’s the latter, there’s most likely a lot of JavaScript on the page.

Here’s a tip I get a lot of mileage from: examine how smoothly the theme scrolls. In other words, drag your scrollbar up and down the theme. Is it quick and smooth, or heavy, draggy, and jumpy? If it’s the latter, there’s most likely a lot of JavaScript on the page that’s getting in the way and slowing down your browser every time you interact with the page.

The JavaScript may be there for a defensible reason (for example, if the page is part of a “one-page/parallax” theme that’s stitched together with a lot of JS); but whether the reason’s defensible or not, the site will be slower and clunkier to use for your visitors.

It’s also true that heavy JS stitching is very strongly correlated with sites that emphasize flashy interactions and swooshy design trends over usability and clean, flexible architecture. So the theme may be “doing things technically right, but doing the wrong things” from the standpoint of a well-built, reliable theme. In any case, I like to stay clear of themes with difficult, clunky scrolling unless I really have to do otherwise.

Inline Styles

The more inline HTML styling, the harder the theme will be to style, and the more likely the theme is complexly and fragilely put together.

The more HTML elements that have style="width: 726px;" (or similar) inside them, the harder your theme is going to be to style.

Again, there are defensible reasons for some amount of inline styling—like JavaScript dynamically resizing Pinterest-style blog elements—but the trend is twofold: first, that the inline styles themelves are hard to work with and override, and second, that the sort of theme with a lot of inline styles is more complexly and fragilely put together in general.

Themes may even go as far as declaring <style> elements in the middle of the HTML document, as in this screenshot:

inline styles inside wordpress theme demo

This is often a symptom of one or another kind of in-house page builder. That can be great for nontechnical users who want a lot of design control, but I’d say it’s officially a Bad Thing relative to the goal that a theme be something a developer can work with, switch out easily for another theme, etc.

Heavy Nesting

Look again at the screenshot above: notice that the <style> element is nested in something like ten elements, beginning with “#pagewrap” and ending with “div div div“.

This is another symptom of page builders (which often work in terms of custom “Row – Column” div arrangements), and of fragilely constructed themes more broadly. Themes laid out like this are, in general, built for the convenience of users, at the relative expense of developers.

Other Awkwardness

In general, you’ll just want to start to get a feeling for when things are and aren’t right. It’s a learned skill that comes along with having seen and worked with a lot of WordPress themes, and also with knowing what you’re looking for for your specific project. The video screencast below walk you through the process to some extent, so stay tuned for those.

Notice Theme Shop Names that Keep Coming Up

In my example search for “flat magazine themes,” I found one theme shop, “Colorlib,” with at least two themes that appeal to me:

Colorlib magazine WordPress themes

(Note: we’re not affiliated with these folks in any way.)

I like both of these designs for the following reasons:

  • They’re clean, spacious, and simple-looking—not cluttered or pseudo-futuristic like many WordPress themes. Overall, the design makes me feel good and happy, not cheap and excessively “website-y.”
  • There are little details that show the developers are tech-minded. One of their sample posts reads: “Markup: Title With Special Characters ~`!@#$%^&*()-_=+{}[]/;:’”?,.> Putting special characters in the title should have no adverse effect on the layout or functionality.” This same theme is also entirely in default fonts: Arial/Times New Roman. As ugly as both of these decisions look on the page, they both show me that the theme vendor is thinking about robustness and ease of customization, rather than the visual flash of the theme demo itself.
  • No unnecessary JavaScript interactions. On both sites, I can scroll right up and down the homepage beautifully. (The gallery page is another story, and would be very difficult to edit or customize for the reasons described in “Awkwardness” above; but I can almost look at that page as a standalone plugin that I can either use as-is or ignore entirely.)

When I see a theme vendor that seems to have my number design-wise and seems concerned with substance over style, I like to look a lot more closely at their broader repository of themes; and I’m also more likely to settle on one of their themes as a final decision.

What’s ideal is if you can find a total of maybe four or five themes you like, from two or three theme vendors that seem to be doing generally good work in the ways I just described. (Since we’re offering free endorsements: after looking more, I think my first choice for magazine themes might be WP Zoom, which has really clean and “magazine-y” themes. Their non-magazine stuff looks great, too.)

Meks are a a team of passionate professionals who are currently best rated WordPress theme author on ThemeForest. They also provide a couple of useful free WordPress plugins and definitely worth checking out!

Kicking the Tires of Themes You May Like

This is where you can really start exploring. To do this, you’ll need one of my favorite tools in all of web development: Chrome Developer Tools (or something like it, like the Firefox version). If you aren’t familiar with Developer Tools, check out our earlier article on it—it’ll be time well-spent, guaranteed.

You can basically use Developer Tools to pick apart every piece of a theme demo. You’ll be looking for the following sorts of things:

  • Evidence (of the type described above) that the theme is or isn’t well-constructed
  • Inspiration about how the theme might fit into your design ideas for your site
  • Answers for specific questions, like “How does the theme behave at phone width if I remove the homepage slider?”

In general, you’re just kicking the tires—really hard, and with a very good tire-kicking tool.

When It Doesn’t Go Well

To talk about what can go wrong with a superficially attractive theme, I’m going to be rather critical of a theme by Elegant Themes. This is for a few reasons:

  1. Elegant Themes dominates the WordPress themes industry.
  2. Their themes are, for the most part, beautifully designed and look great in the demo.
  3. I’ve been consistently frustrated by the quality of their themes once I actually purchase and begin to work with them.

Here’s a (silent) screencast of me exploring Elegant Themes’s “Delicate News” theme, which I found linked to from a March 13, 2015 article on the “Best Premium Magazine WordPress Themes”.

Screencast transcript: At :15 in the video, I figure out that the theme’s coolest visual element, the “Delicate News” banner itself, is just a static image. It won’t be usable once you purchase the theme (unless you want to call your site “Delicate News”). You can pay Elegant Themes extra for access to the theme’s Photoshop files, and could make a new logo with those files if you have Photoshop, but that’s the kind of custom design I don’t know how to do.

At 1:23 in the video, I realize that all the post date backgrounds are static images as well, as well as being absolutely positioned with completely rigid design.

At 2:05, I learn the same thing about the gray button-like background behind the “Read more” text.

At 2:45 I learn the same thing about the gray avatar border in the post comments.

At 3:10 I think to check, and realize that the site isn’t even responsive, meaning that it’ll be really hard to use on anything but a full-sized computer. If I wasn’t already done with the theme three minutes ago, I certainly am now.

Further Notes

If a theme is badly built on the frontend, it’s badly built on the backend.

The theme’s post archives go back to 2006 and stop in 2009, which may explain some of these old-school bad practices. But it’s still actively for sale on Elegant Themes, and still making it into “Best magazine themes 2015” lists—and the demo is still really attractive if you don’t look closely at the theme’s construction.

Also know that if a theme is badly built on the frontend, it’s badly built on the backend. No one who designs a nonresponsive site, choked with absolutely positioned background images for things like “read more” links, is going to make a backend that’s powerfully customizable and in line with WordPress best practices.

The motto here is “Buyer beware,” and I hope the video demo above has given you some idea of the tools you can use to explore themes.

When It Goes Okay

Screencast transcript: My most immediate problem with this theme is that I don’t like the fonts. That’s distracting, and it’s making it hard to look at the theme overall. You can test out any Google font you want on any theme by simply embedding the link to that font in the page’s header—I do that at :23—and then setting font rules as you wish (I do that at :36). The site’s now in Open Sans, and it looks a lot better.

At :55, I notice that paragraphs are supposed to be in Helvetica Neue like everything else on the site, but that the theme dev forgot quotation marks so they’re in the most default font, “serif.” That’s a sort of troubling omission given that it makes the theme demo look silly. (I’d just assumed they were doing it out of some developer commitment to not doing custom fonts.) I set that to Open Sans as well and keep looking.

Around 1:30 I start playing with the “Continue reading” buttons to see how they’re put together (they’re put together right this time), and to start to see (around 1:55) how they might look with a gray background.

My major other concern with the theme is just the plain-looking “Dazzling Demo” thing in the top left. Starting around 2:00 I try to figure out: Is this theme compatible with logos? I assume so, but you never know.

I do notice, around 2:40, that the text’s containing link has class “navbar-brand,” which makes me think that it is indeed possible to put a “brand” (a visual logo) up there. But 2:40 to 3:15 are mostly fruitless noodling, and I don’t learn much.

From 3:15 to 4:20, I play with colors I might like (more of a glowing blue). At 4:20 I check the site’s responsive behavior (looks good), and at 4:45 I check out its shortcodes.

I’m not really learning anything at this point. With the strange exception of the failed Helvetica Neue font, everything looks put together well: there have been no big surprises and everything makes sense so far, which is about the best sign you can get looking at a site from the frontend.

My one unresolved question is about the logo. How does that look and work? For this, I’ll need to do some…

Looking for Live Sites

We’ve published a guide to finding live examples of almost any WordPress theme, and that’s what I did next.

You probably don’t want to watch this whole video. Up until 4:20, it’s just me striking out, which you’ll do a lot when you use this trick.

At 4:20, though, I find a live, functioning site using the Dazzling theme. Most importantly, it confirms what I was pretty sure of but needed to know: You can put a logo in the top left and it’ll work okay. The site itself seems to be running fine too—I may have made different design choices, but technically it seems sound.

Where to Go from Here

From here, you can do more extensive hacking of the theme demo, or give this same treatment to other candidate themes.

At this point, I feel like I basically know that the Dazzling theme works as advertised. The code looked mostly clean, and there have been few enough surprises that I think it’s well-constructed; and I’ve started to think about how I might make the design my own—for example, with different font and color choices.

From here, you can do much more extensive hacking of a theme demo right in developer tools, and even generate full screenshots of how you’d like your site to look. For example, if you don’t want a slider, you could rip that code right out of the demo, or replace it with a single static image. Don’t be afraid to experiment voraciously (just remember not to reload the page or you’ll lose your customizations).

You can also give this same treatment to a number of other themes that you think could be a good fit, and see which one best captures your imagination.

In terms of when to make a purchase decision, it’s a lot like shopping for suits (or dresses?): after you’ve gathered all the information you can about a number of themes that could be a good match, you’ll want to buy when you get the strong sense that one theme, among all you’ve examined, “feels right” for your needs.

Take your Time Looking for Themes!

Take your time looking for themes! I recently put together a site called Bridge the Gap, running a theme called Magicrèche. It was an eight-hour project in total (a personal best): three hours were searching themes to find the right balance of design and functionality, and five were setting up the site itself.

It matters a ton that the theme is built well and is what you want. So be thorough and diligent in your search, and you’ll save yourself a lot of headaches later.

What We’ve Learned

In this article, I’ve tried to take you, as closely as possible, through my own process when I’m choosing a premium theme.

There’s a lot here, and a lot of it is me attempting to describe things that are in muscle memory, so don’t be surprised if there’s a bit of a learning curve as you try to implement this stuff.

The end result, though, is very rewarding: You know which themes are going to be thoughtfully built and nice to work with well before you hit the purchase button, and you have some great ideas (and likely even screenshots) for how your own inspirations are going to map onto the theme you choose. That’ll make a big difference for you, or for your clients.

Thanks for reading!

Image credit: Neil Rickards, Wikimedia Commons, _StefwithanF, Flickr


16 Responses

Comments

  • htcampbell says:

    A good read. I have found myself up against it with themes put forward as the one by designers and site owners, and I’ve shrugged and proceeded with caveats on that basis.

    A couple of other things I’d be on the lookout for. style tags that expose theme choices – have a look at Avada for a ridiculous example of this, 40kb+ of uncacheable styles in each page load, and the use of kitchen sink class lists on high-level elements, as in

    ThemeFuse, I’m looking at you.

  • Nad says:

    Great articles about the mindset to have before chosing the right theme.

  • Jeff Sararas says:

    Really useful, thanks for putting this together.

  • Thank you for this outstanding guide and for mentioning colorlib

    I really appreciate it!

  • mariano giusti says:

    Good read,

    I actually solved 90% of these problems when I switched to buying HTML templates instead of pre-made WP themes.

    Developing vs debugging other people’s code: more fun.

    And more templates to choose from too.

  • Daniel Keith says:

    Hi Fred,
    You have done a geat job in combining all this stuff so wisely. Choosing a theme for a professional firm or for a friend’s personal website was always a headache. But you made it so simple and cool. Thumbs up!

Pingbacks

The WPShout Pro Community is here! One-to-one help. Never be stuck again. Master WordPress development. Take a look
Hello. Add your message here.