Chapter 4. Before You Start Looking for a WordPress Theme

For and (?)

If you are someone that likes to just “wing it” when it comes to new things, you might want reconsider that style while working with WordPress. The theme you choose can range from a goose that lays golden eggs to an albatross around your neck. Whether you are looking for your first theme, or your next one, this list can help you select the theme you need.

For those of you on the WordPress.com platform, know that you are limited to themes found in the Admin Panel’s Themes screen (Appearance > Themes). You may or may not be able to find all the things we go over below in a theme. And you can ignore anything about plugins since you cannot install ones not on the approved list by WordPress.com.

Planning Ahead

Let’s think of this as planning to go on a hiking camp trip: you’ve got things you need (tent, sleeping bag, food), things you want (solar shower, s’mores, cushy sleeping pad), and things you might need incase of situations like rain, bears, poison ivy, etc.

The size of your pack and amount you can carry is like your website’s budget, and what you can actually fit inside it is like the features of your website.

You get together the things you need first, and see how much room is left in your pack. You have some room for the cushy sleeping pad, so that goes in, until you realize there is a good chance for rain and you’ll need a tarp and rain gear. The pack is getting heavy, and it will only make the hike in (and out) that much more miserable. Something has to go, but what?

Every time I have built a website for someone, I always feel like the leader in a hiking trip saying that some item (feature) won’t fit or isn’t possible because they have reached their carry limit. Again, in terms of a website that limit is the size of their ‘pack’ and could be determined by their budget—which can be the time they have to manage the site, their server space, and myriad other things.

The following checklist is to help you think of what you need and want your website to do, as well as what you should have incase things go wonky (like a backup system.) Only you, your client and or the web developer you are working with can determine the size and weight of your ‘pack’.

Don’t Lose Sight of Your Mission

Whether you are building an online store for a skate shop, or a simple blog to keep friends and family informed of your new baby, there is a mission or principle reason for doing it. Not knowing the mission or even losing sight of it during the theme-shopping process may result in selecting an albatross of a theme.

Skate shop example
Your mission statement should be succinct and tweetable: no more than 140 characters in length should be sufficient. To prove it’s possible, we will use the example from the Cruz Skate Shop online storefront: “As a skater-owned roller derby shop, we seek to provide skating gear, protective equipment, and information to all levels of roller skaters.”

Taking the tweetable mission statement for Cruz, we can infer that we need a website that:

• Has space for an “About us” section/page to help establish the owners as being knowledgeable, industry professionals.
• Has an online storefront to sell skating goods, including being able to showcase, describe and categorize items for purchase.
• Has a blog section for informative articles.

Three bullet points may not look like much, but using this short list while creating the checklist below will help ensure that major needs of the business and website don’t fall by the wayside. That may seem unlikely, but I have seen it happen time and time again: a site owner—or even a whole team—forgetting to include a major piece of functionality.

In the next chapter I will talk about emailing a three-sentence summary to a developer. Three bullet points above converted to three sentences in an email… boom! Done. Easy.

Family blog example
Think this doesn’t apply to your family blog? I came up with this tweetable statement: “A private family blog to keep relatives informed about the imminent birth of our second son, as well as our first son’s recitals.”
Sounds like they will need:

• site-wide password protection to keep it private
• a blog for the periodic news updates on the pregnancy and children’s activities
• something to share their first son’s love of music: maybe ability to play video and audio tracks?

What’s your tweetable mission statement? You don’t have to be on Twitter to do this. A 20-25 word statement should suffice. Keep in mind that a well-crafted statement also serves double-duty as a great piece in your overall on-page SEO strategy in that it can help people find your site.

The Checklist

Below is a list of questions I ask clients and friends when we go through this process. Some of these questions can be answered as you read them, others may require you to do some research to get the answers. Overall, this will help you understand what you are looking for in a theme as well as keep you on track so you don’t get stupefied by fancy spinning rims.

Mini-books could be created to expand on each of these questions. But, I’ll spare you and simply follow them up with some highlights to consider. Ready?

What is the main motif, or subject of your website? Audio, video, blog, store, photography?

Knowing this will help you look for themes built for these services and features in mind. If you are building a photography website and you start looking in the “nonprofit themes” section of a marketplace, you might have a hard time finding a theme.

Pro Tip: WordPress 3.6+ has built in audio, video and image gallery capabilities. You may not need your theme to do this for you (or, as I like to say: You may not need your theme ignoring and overriding these awesome, native features.)

Do you need a blog?

Some themes do not have a blog section styled or even thought out. Odd, I know, but some owners don’t need a blog, and it saves development time. You may not need a blog now, but know that you don’t save any money by getting a theme without blog support (unless you are getting a fully custom built theme, then you may actually save money by not having the developer even bother with it.)

If you need a blog, do you need recent Posts to show on the home page? In the side bar of interior pages? Anywhere else?

Having your blog roll actually be the home page is native to WordPress. But, incorporating recent blog posts into a styled homepage is up to the developer to code into the “home.php” theme file. Know that placing recent posts in the sidebar is a feature of the native WordPress Recent Posts widget. Having them show in the main content area of a Page is up to the theme developer, or could be done with a plugin.

Do you need to be able to feature certain Pages on your homepage?

Placing featured Pages on the homepage is possible, but up to the developer to code into the “home.php” theme file (or by using a plugin.) Placing them in the sidebar is a feature of the native WordPress Pages widget (though it’s a bit lacking in customization options.) Having featured Pages show in the main content area of a Page or Post is up to the theme developer to implement, or could be done with a plugin.

Do you need a slider on the homepage? On interior pages? On blog posts?

(AKA carousels, slideshow, rotators, slide decks, …) While sliders seem standard-issue nowadays, not all themes have them. And not all themes have the ability to show unique sliders on other pages. There are a bazillion plugins out there that can place a gazillion differently styled sliders anywhere on your website.

Pro Tip #1: Sliders are a proven waste of your time and resources. Don’t use them. Whoa! What?! I know, right? How can something that is on almost every website be a bad thing? Because visitors don’t stick around for the 2nd, or 3rd slide, they generally ignore them.

A study of the websites for University of Notre Dame (source) and Siemens (source) made it pretty clear that sliders, carousels, accordions and rotators may be pretty to look at, but are ineffective to helping your visitors. Even Brad Frost, a thought leader in our industry, weighed in on it, which can be summed up with “most carousels simply don’t need to exist.”
So, listen to the data and drop the slider. Just use one image at a time.

Image showing click-through rates for sliders on 4 websites. Each were set to auto-play (or auto-forward after a set period of time.) © Copyright Jan 2013, WeedyGarden.net/, source

Pro Tip #2: If you rely heavily on sliders and revolving images, I highly recommend using a well supported, paid plugin and not the native slideshow feature of the theme you chose (if possible.) Many sliders have numerous fancy options, and with those options is a lot of code. Much of this code relies on browser capabilities and advanced coding practices that require a lot of maintenance on the part of the developer.

A slider that is maintained as part of a theme is essentially just one of many parts of that theme. In order to fix any bugs or issues with the slider, they would have to push out a theme update. Not all themes are set to receive update notifications in the Admin Panel (or even alert you via email), so you may not be notified of the fix.

Purchasing a well-supported slider such as the Soliloquy plugin that has “automatic plugin updates” can ensure that the sliders work well into the future. Best of all, all your work that went into setting up the sliders won’t be lost when you switch themes (see chapter 14 about switching themes.)

Does the slider need to automagically feature the latest post and link to it? Or sticky posts? Or featured images in posts? Or have the ability to show videos?

(Yes, automagically, because let’s get real, some of this stuff on the surface looks and works like magic.) So many options are available in slideshows these days. If you are so bold as to listen to the data above and choose not to use a slider, then your job is done here and cheers to you! If not, review the sliders and be sure to check them out on the theme’s demo page. If you can get your hands on the theme documentation before purchasing, look to see how tedious it is to maintain the contents for the slider. Some can be a nightmare, while others are, well, automagical.

Does the new theme support widgets?

While the vast majority of themes do support widgets, some minimal and boilerplate themes may not. I have no idea why a developer would choose to not widgetize (create areas for widgets) at least the sidebar in a theme, but it happens. Many plugins rely on being used as a widget to allow you to place it in your sidebar(s) and other widgetized areas, so make sure your theme supports widgets, or is “widgetized.”

Do you need the website to be responsive?

To understand exactly what responsive web design is can fill a whole book. In short, it’s a technique that allows your website to resize to fit smartphones, tablets and larger desktop screens. This way your users don’t have to zoom in on their phones to read it. Still confused? Don’t worry, it’s can take a bit to wrap your head around this concept of your website’s elements actually resizing and shifting around to better fit small screens.

Do a web search on “what is responsive web design” for the latest info on how we are approaching this technique. But, know that not all websites need to be responsive. Do a web search for “do I need a responsive website” for tips on whether you need it. Some themes even allow your admin and or visitors to turn off/on responsiveness.

What browsers does your theme need to support?

The short of it is that every browser and every version of that browser renders websites in a unique way. It can be as subtle as the text readability, or as serious as not being able to render certain page elements or styles at all. Clicking on any one of the numerous features at caniuse.com (Can I Use?) will show you just how differently browsers and their versions can render any given website.

If Google Analytics is installed on your current site, you can use it to see the most popular browser your visitors are using to view your site. You want to make sure your theme supports the browsers your visitors are using, or else things on your site can look wonky or not work for them. You really only need to look at the latest 3-6 months of Google Analytics data to get a good read on what browsers people are using.

The important thing you are looking for is Internet Explorer (IE) and Safari users. IE and Safari are a huge pain-point for web developers because IE versions 6, 7, 8, and 9 lag behind what other browsers like Firefox and Chrome could do. If 30% of your visitors are still using IE 8, then you need to make sure your theme is tested and supports IE 8. Keep in mind many developers are no longer supporting IE 6 and 7, with many starting to drop support for IE 8 and 9 too. And the Safari browser is not getting a lot of support from Apple anymore, leading to all kinds of quirks and bugs.

The main reason these browsers are being dropped is HTML5—the markup language many themes are built on today—is not supported by IE 9 and below. In order to do so requires a bunch of JavaScript to help it conform to the new features offered by HTML5.

Pro Tip: Comparing the last 3 months to data from 6 months or a year ago can show you trends. Let’s say all versions of Internet Explorer (IE) browsers made up 33% of your visitors last year at this time, then 6 months ago it fell to 27%, and today it’s 19%. That shows a trend toward fewer IE users over time. You can estimate that in the next 6 months IE users could fall below 15% for your website, making it less important than other browsers.

Also keep in mind that Firefox was once a very popular browser. Trending showed it on a path to overtaking all other browsers. Then came Google’s Chrome, becoming the darling of the industry today. If you bought a theme in 2009, Google’s Chrome was barely on the radar. Today it’s the most used browser in many countries.

Bug fixes and cross-browser support is just another reason you want to be sure your theme is actively maintained with periodic updates.

Do you need your website to support translation for international users?

Some themes come with this support built in. Depending on the native language you intend to write your website copy in, you may need to offer the visitor a way to have it translated for them to their native language. Keep in mind that while translation is improving each year, this is never perfect, and can provide some interesting outcomes. If your site is very technical, you may want to consider a paid service that deals with the extended vocabulary pertinent to your website.

Many themes also have a file called rtl.css to help support languages that read from right-to-left (RTL) such as Arabic or Hebrew text. But, it’s not just text that is affected. Images you align to the left need to flip to the right. Same goes for comments, Twitter feed, the content of widgets and so on. Some may need the sidebar to flip to the other side of the page.

Does your website need to be accessible and Section 508 Standards Compliant?

I hate to say it, but this is where theme developers fall short. It is pretty rare that I have seen a truly 508 compliant theme (which is required by all U.S. government agencies, some educational institutions and any site that is for low- or no-vision visitors.)

Coding a website or theme to be accessible and 508 compliant requires certain tags, attributes and other code to be present in specific places, and in a specific hierarchical order—much like an outline for a research paper. This architecture is intended to help the user navigate, as well as describe the contents of the website to them, like forms and navigation menus, for example.

The knock-on effect to having an accessible website is that it makes for great SEO. Accessibility helps web search engines (like Google) understand your website better since they now don’t have to guess what an element’s intended purpose is. While viewing a website, you can right-click on the screen and select “view source” to get a glimpse of what a Google web crawler sees.

Do you need your Pages and Posts to have social sharing buttons?

You’ve likely seen these on a bazillion web pages: little buttons or icons prompting you to share the page on Twitter, Facebook, Pinterest and more. Some themes come with these built into its functionality, while others rely on plugins to add them.

Pro Tip: Drop the social sharing buttons. Like sliders, these are proving to be ineffective in getting people to share your Pages and Posts. The reason is that the vast majority of people understand how to share a web page without using the social sharing buttons on the page.

The major problem with having these buttons on your site is that they slow down the loading of the page. The reason for this is that each button (be it 3, 5 or a dozen) has to reach out to their respective server and retrieve a separate JavaScript file in order to make them work. If you are displaying a number of “shares”, it has to retrieve that information too. All of this takes time.

If not coded properly, this can cause other elements and content on your page to not load while it is busy loading all the files it takes to run the social media buttons. I’ve seen these social sharing buttons slow a site down by as much as 10 seconds, which may cost you users, as people tend to leave a slow loading page. More info on the impact of slow sites here.

Is someone asking for SEO?

You’ll see this in theme marketing pages as “SEO ready”, “SEO Optimized”, “SEO built in” and so on. But, honestly, if a theme touts it’s SEO readiness, it’s probably bullshit. “SEO” is vying for most overused marketing buzzword in our industry. Do your research and run the theme’s demo page through an SEO verification tool to verify its strengths and weaknesses.

Choose SEO you can take with you. A big drawback to using the SEO features in a theme is that when you switch themes, it’s gone. Any SEO title or description customizations you made stay with the old theme; you have to type it all in again on the new theme. Just use the “Yoast’s WordPress SEO plugin.” It’s one of the best SEO plugins out there, does more than any theme’s SEO can, and you’ll take any and all SEO customizations with you to your next theme.

Do you need each section of your site to have custom/unique sidebars?

Look for the term “custom sidebars” or “unlimited sidebars” or both. Don’t worry if it doesn’t, there’s a bunch of great free and premium plugins for managing custom sidebars.

What are you planning on placing in the sidebars? Latest Vimeo videos? Twitter feed? MailChimp email sign up? Affiliate banners?

Some themes have this functionality built in, but there are tons of plugins to help get certain objects and feeds into a sidebar. It’s good to know what you plan on placing in there to know what to look for. Things like email sign up are rare in themes, but as you guessed it, there’s a plugin (or 12) for that.

The API call. Keep in mind that many features that reach out to a third-party like MailChimp or Twitter rely on APIs to connect them (for now, just think of an API as your website having a secret phone number for your Twitter feed that it can call when needed.) These APIs can and do change over time to become more secure or use the latest technologies.

See the API entry in the Glossary section in the back of this book for the short story on the recent Twitter API issue.

Do you have a specific font in mind for your headers? Or at least want a selection of fonts to choose from?

Like sliders, this is almost standard on most themes, but not all. Today, many of the premium themes I see are using Google Fonts, which are quite extensive so you shouldn’t have a problem finding a nice font to work with.

But, as with many fun things on the web, not all browsers display these embedded web fonts very well. In some cases like Internet Explorer or other browsers on a PC, the fonts can actually look quite pixelated and ugly. Browsers on Macs make fonts look smooth, closer to printed text, even on non-Retina screens. Be sure to view the theme demo site on a PC and a Mac, if possible—the difference in readability can be startling to some.

Cufon fonts. Cufon is a JavaScript file that embeds fonts using the HTML canvas element. I know, a bit techie, but this feature helps produce smoother lettering, as well as fixes some size and rendering issues. This is a popular option for theme developers, but I take great pains in seeing it used since it wraps each word in a ton of code. See example below of what it takes for the website to tell the browser how to simply render the word “information”:

<cufon class="cufon cufon-canvas" alt="information " style="width: 114px; height: 24px;">< canvas width="132" height="25" style="width: 132px; height: 25px; top: 0px; left: -1px;">< /canvas>< cufontext>information</cufontext></cufon>

The JavaScript does all the work of wrapping the word for you, but the problem is two-fold: one word of text turns into about 30 words of code. 50 words turn into about 1500 words of code. This makes the website render slower in the browser. The second problem I have with it is that when a user tries to highlight the text it makes it difficult to do so and does it in chunks, often missing the first word.
If you use Cufon, be sure to only use it for headers and not on paragraph text. This will greatly reduce the amount of code needed to render the text on the page. Again, do the math.

With Google fonts or other methods using a CSS rule called @font-face, that same word is rendered without wrapping it in a bunch of code, though it does not always render perfectly in all browsers. Lately, my preference when building a website is to design the site so it shows Internet Explorer users something they are used to, like Verdana (which does render nicely), and everyone else the embedded or Google font.

Do you need to be able to upload your logo? Is it horizontal, vertical or square?

Depending on the real estate the theme designer gave you for the logo, you might be trying to put a rectangle logo into a square hole. If your logo is much taller than it is wide, good luck! Most themes seem to be designed for thin, horizontal logos.

Are you planning on selling items on your website? How many? 1… 12… 3,000? And are they physical items (requiring shipping) or digital downloads, or both?

There are so many things to consider when choosing and setting up a store on your WordPress website that it could fill another 200-page book. Some themes come with a storefront built in (usually an embedded plugin—see chapter 11), whereas others rely on you adding a storefront plugin.

STOP!
If you are considering an online storefront, I highly recommend you do NOT use a storefront or cart built into a theme. I highly recommend you use a professional-grade, paid plugin such as ecommerce plugins from Pippin’s Pluggins, WooCommerce, and Jigoshop, to name a few.

By setting up your store using a plugin, you will be able to swap out your theme without losing your store inventory, customer records, gift certificates, payment gateway, and a lot more. If you have never set up an online store before, know that it is something you only want to do once. Seriously. Do not lock up all that information in a theme.

Also, keep in mind that you are dealing with money, taxes, people’s personal information, and in some States/Countries, you may have very strict laws governing your online sales. You don’t want to go about this haphazardly. Work with a developer that specializes in ecommerce, and use a solid, well-supported plugin.

Ecommerce Pro Tip: If you are selling 1-10 items, you may want to consider using a service such as Gumroad. You can still have a website with Pages listing your items for sale, but the “buy now” button/link points to your Gumroad page where customers can purchase the item.
This can help alleviate having to set up and manage a storefront for only a few items. It can also place all the worrisome security and compliance issues on a third party like Gumroad, and not on you or your team.

Do you need a gallery for photos, images, videos, or Instagram?

Today, numerous themes have gallery options. What you need to look for is how it is handled in the Admin Panel. Is it complicated to set up? Does it automatically pull images in? Are there plugins that can handle it better?
If you intend to set up numerous galleries, keep in mind that a plugin is a much better option since you will be able to switch themes without having to start over from scratch.

Do you need a forum added to your site? Or is your whole site specifically a forum?

Some themes come with this, though it is not common. If your entire site is a forum, I would recommend looking for a theme that is designed primarily to be a forum. Same goes for forums as it does for online storefronts: both can swell to be a great amount of information. Consider a forum plugin so that you can swap out the theme later, and even be able to separate the two later.

Do you need a secure area (not the same as the Admin Panel) that users/clients can log into?

These are typically useful for having special pages for clients or subscribers. You can use the native WordPress “Private” Post/Page, but I recommend looking into a theme or plugin that can handle a secure area and often come with very useful features.

Do you need a ‘Contact Us’ form? If so, what fields do you need? Do users need to be able to upload files via this form?

While most themes come with basic form submission of name, email, subject, message, look for additional features like file upload, or the ability to customize a larger form with additional fields and field types. A huge plus is a form that can accept file uploads and store them on a Dropbox, Google Drive or RackSpace account—basically, offsite. (I never liked the idea of people uploading their files to the same place where my website lives since some can come with viruses and malware attached.)

And that’s the end of the list!

Don’t Paint Yourself Into a Corner

Some of you may see a recurring theme in my list above: keep large features as plugins so you can take them with you, and not locked up in a theme.

Feature debt

You will inevitably see a mountain of themes that can do everything you have on your list, and then some. They’ll tout things like “No plugins needed!,” “Plugin-free,” and “Zero plugin theme”. While this sounds easy and so thoughtful of the developer, this requires you taking on feature debt.

Feature debt (or design debt) in WordPress themes is the act of taking the quick and easy push-button-choice of an all-inclusive theme, where later down the road you will have to pay a much bigger price if you ever need to switch themes. That “price” is the time and money necessary to build a new site when all your settings, store inventory, and/or galleries are locked up in the old theme.

You can think of feature debt as a too-good-to-be-true home loan that required no down payment, and no payments for the first 6 months. If you are thinking that some all-inclusive theme is going to save you a weekend’s worth of work, I can guarantee you that when it comes time to switch the theme you will spend weeks just trying to copy over all the information and settings that you have set up over the life of the previous theme.

When you switch a theme, any features controlled by a plugin will remain in place and—in the vast majority of cases—work with the new theme.

Frogs first; ice cream later

Successful company executives and productivity experts swear that tackling the biggest and gnarliest problem first thing in the morning is key to having a productive day. It is applied to projects, as well. You may have heard this Mark Twain quote in relation to that idea:

“Eat a live frog first thing in the morning and nothing worse will happen to you the rest of the day.” ― Mark Twain

I know that the preparations such as the list above, the mission statement, and having to research some plugins may be tedious, and frankly, may not be as much fun as shopping for themes. But, it’s your live frog. Eat it first thing and the rest of your theme shopping will be a breeze, and turn out better for it.

Myth busting: plugins are okay

For years, there has been a mantra going around that “plugins are bad”, or that they slow your website down. This is not entirely true. The truth is that badly coded plugins may slow your website down and or overtax your server, while well-crafted plugins don’t.

In recent years we have seen a surge in owners placing numerous widgets and plugins on websites that require third-party interactions. Services like Twitter, Facebook, Instagram, countless social sharing buttons, GitHub status feeds, Flickr galleries, advertising partners and more. Each one of these has to make a call out to a third-party server and wait for a response in order to retrieve the data to display on the website. The more of these types of plugins you have installed on your site the slower it is going to load.

Further reading. I highly suggest taking a moment to read the article “Functionality: Plugins vs. Themes” written by developer Pippin Williamson.