Chapter 10. Test Your WordPress Theme

For (?)

Now that your theme is installed and activated it’s time to make sure everything is as you expected. I highly recommend you do this immediately after activating a new theme.

Why Are We Doing This?

To put this in terms of shopping, it is the same as comparing your grocery list against the receipt and checking whether everything is in the bag. Doing this before you get all the way home can save you a trip back to the store at a later date.

If this is a purchased theme, you want to make sure the claims made on the marketing page match up to what you see in the Admin Panel as well as what the visitors see on the public side (your website.) Do this now, because as time goes by and updates are made to the theme in the marketplace, it can be more difficult to make a claim that something isn’t as it was described when you bought it.

When you are doing this for a client (or working on a custom theme with a developer), it is imperative that what you deliver matches up to the statement of work you and the client/developer agreed on.

Old browsers. Developers would need to add a lot of hacks, fixes and JavaScript into themes to make IE 6, 7, and 8 render some of what the modern web does today. Developers don’t always do that since usage for these browsers is typically 10% of visitors or less. If your theme’s marketing pages expressly state they support IE 8, expect it to work well in IE 8, but not IE 7 and below.

How to Validate a Purchased WordPress Theme

The process can vary depending on the theme, the claims made by the developer/marketplace, and your content. The following subsections are to give you some guidance on how to verify a handful of (common) features.
If you purchased a theme from a marketplace, revisit the marketing page where you bought the theme. If you don’t remember where you bought the theme, there are a few ways to figure it out:

• Check your email inbox for a receipt. Most (thoughtful) marketplaces will have a link to the marketing page you got the theme from.
• Do a web search for “WordPress theme [enter theme name here]”. You can find the theme name in your Admin Panel by navigating to Appearance > Themes, and look for the name in bold text under “Current Theme” heading. Keep in mind some purchased themes may have the same name as other themes, so double-check the theme page in the search results matches your theme. You can also add the developer’s name (hover over theme and select “Details”) to your web search to narrow the results. Example: “WordPress Awesome theme by Rad WordPress Themes”
• Look for the stylesheet header in the theme’s “style.css” file for a link to theme (or developer) page. A valid theme header will include a “Theme URI” and a “Author URI” (the ‘author’ is the developer.) You can find this file in your Admin Panel by navigating to Appearance > Editor. “style.css” should be the default file shown on the screen. (If for some reason it is not visible, use the “Select theme to edit” pulldown menu on the top right to select your theme.) In some cases, the “Theme URI” link might only point to the main page of the developer, and not the actual theme page as shown below.

Screen capture of the stylesheet header, as seen in Appearance > Editor screen.

Now that you have the features and details promised by the developer open in your browser, open your website and your Admin Panel each in a new tab or window so that you can switch back and forth easily. With these 3 tabs/windows open, you will start going down the list on the theme’s marketing page (or in the case of a Custom theme, a statement of work) and checking to see that you have that functionality/feature/option in your Admin Panel and or the website.

The principle idea here is to check to make sure the features and options you needed are actually delivered and working in the theme. Let’s go through some of the more common things found in WordPress themes today:

Dummy Content

Some themes include a file containing ‘dummy’ or ‘sample’ content. You can recognize it by opening the theme package and looking for a file with an .xml file extension. They may even be named something like “sample-content.xml”.

Importing this will load additional content such as Posts, Pages, comments, and/or categories into your database. The Posts/Pages are often composed of gibberish, but some theme developers use them to show many (or all) of the theme’s features. A common example would be a page showcasing all of the shortcodes available in the theme and how their content appears on the screen.

CAUTION: DO NOT upload this dummy content to a website that has real or existing content already in place—in some cases it can overwrite your existing content.

For new websites with no existing content, uploading this dummy content can be an easy way to populate a WordPress website, but I still try to deter people from doing so for the following reasons:

• By walking through the theme’s documentation yourself and seeing how your website reacts to your changes you will get a better understanding of what your theme can do and how to correct/edit those features.
• Uploading this content often adds dummy Posts and Pages that display gibberish, fake categories and tags, and other content. These Posts/Pages are often publicly viewable by default, and if you forget to delete them, Google can find them and consider them part of your site’s content.
• If you have your menus set to “Automatically add new top-level pages,” you could end up adding numerous dummy pages to your menu.
• Lastly, if you plan on using this site for real content, you will have to delete all the dummy Posts, Pages, categories and tags by hand.

Fonts

Keep in mind that the ability to select from a huge list of fonts is using a technique called font embedding where the font files are downloaded to the visitor’s browser. This is often used because it is likely users will not have the font the website wants to use on their computer.

Not all browsers support embedded fonts, especially Internet Explorer 7. There is only partial support in Internet Explorer 8. Modern browsers like Chrome, Safari and Firefox do support it. See “Shooting the Troubles” chapter if you are having problems with fonts.

Check for fonts that were promised:

1. Does the theme’s options panel show all the fonts as advertised? This can be found in the new theme’s options panel, which is typically found in the left nav bar in the Admin Panel. Open the theme options panel (if available) and select a font, then click the save button in the options panel.
2. Does the website update to show the font you selected? View the browser tab showing your website and reload the page.

Font styling: sizes, headings, colors, oh my!

Typically, where there are font choices, there will likely be multiple options for selecting the size of headings and paragraph text, as well as a near-infinite array of colors. Unlike font embedding, all browsers respect virtually all of these values (font size, colors), no matter how old the browser is.

• Does the theme’s options panel show all the font styling options as advertised? This can be found in the new theme’s options panel (if available), which is typically found in the left nav bar in the Admin Panel.
• Is it able to be updated? In the theme options panel and select new values for your headings, body copy and colors, then click the save button in the options panel. (Unless the theme options has a “reset” option, be sure to write down any default values before you change them.)
• Does the website update to show the font styling you selected? View the tab showing your website and reload the page. You should now see your new font sizes and colors.

Special skins

Some themes come with different “skins” where with the click of one button you can change the appearance of your theme to use a pre-designed overall appearance. Some have multiple choices, and some even let you further customize the skin through font, color, and background image options. Most browsers should have no problem showing typical skins.

1. Does the theme’s options panel show all the skins as advertised? This can be found in the new theme’s options panel (if available.) Take inventory of all the skins available in the options panel. Compare to the list of skins promised in the marketing page.
2. Is it able to be updated? Select a new skin, then click the save button in the options panel.
3. Does the website update to show the skin you selected? View the tab showing your website and reload the page. You should now see your new skin. Compare this to the preview/demo of the skin on the theme’s marketing page.

Sliders, slideshows, slide decks, carousels…

These days, almost all themes come with a slider (also called a slideshow, slide deck, carousel, rotator, etc.) Some are now shipping with more than one option of slider. But know that not all sliders will work on all browsers. Some of the more modern sliders using HTML5 and CSS3 may not work properly on (you guessed it!) Internet Explorer 8 and older. At time of writing, IE8 is still being used by about 3% of users globally (which is still millions of people and companies.)

Caution: Though uncommon, some developers make you purchase a slider license or plugin in order for certain sliders to work. Credible and ethical developers will mention this in the marketing copy before you purchase the theme.

1. Does the theme’s options panel show all the sliders as advertised? This may be found in the new theme’s options panel, if available, or in a separate tab specifically for sliders (see your themes documentation for location.) Take inventory of all the sliders available in your theme. Compare it to the list of sliders promised in the marketing page. If you see any that are missing, reread the marketing page (or theme’s documentation) to make sure you are not expected to install a plugin to get it to work.
2. Is it able to be updated? (If you have more than one slider option) select new slider type. Depending on the type of slider, you will likely need to refer to the theme’s documentation for how to set it up and add content to the slider (many don’t work without manually adding content.) Then click the save button in the options panel (or plugin, if required.)
3. Does the website update to show the slider you selected? View the tab showing your website and force reload the page. You should now see your new slider. Compare this to the preview/demo of the slider on the theme’s marketing page. (If it doesn’t have a preview/demo, shame on them. Seriously.)

Shortcodes in WordPress themes

Shortcodes are short bracketed terms that are content placeholders. They get converted/processed by the theme to render specific content such as galleries, Twitter posts and feeds, sliders, contact forms and a million other uses.

Asking Admins and Editors to use short codes is easier than asking them to paste in a bunch of code into the editor each time, plus, for the developer, they keep the feature’s code consistent and easier to maintain. They are typically formatted like this [shortcode term here], but some can also include variables to modify the shortcode’s function like this version for the RoyalSlider plugin [new_royalslider id=“1”]. Some themes add the ability to get/paste in shortcodes from the WYSIWYG (What You See is What You Get) editor while writing Posts/Pages, while others require you to refer to documentation and cut and paste them in.

Depending on the actual code and functionality behind the shortcode not all browsers may support it. If the feature/functionality is HTML5 and CSS3 dependent (like a slider/slideshow), Internet Explorer 6, 7 and 8 might not render it properly.

Shortcode Pages: If you loaded the ‘dummy content’ that is often included with new themes (I do not recommend this! See beginning of this section,) then you might already have a page called “Shortcodes.” This will likely show you a Page using many or all of the shortcodes the theme makes available to you. Viewing this Post/Page in your Admin editor and selecting the “Text” tab on the WYSIWYG editor will reveal the actual shortcodes’ formatting, for example [shortcode id=“1”]. Again, your theme’s documentation will tell you if you can use the WYSIWYG editor to insert shortcodes or if you need to cut-n-paste them from the instructions.

1. Does the Post/Page WYSIWYG editor (or documentation) show all the shortcodes as advertised? Take inventory of all the shortcodes promised by the developer on the marketing page. Compare to the WYSIWYG editor, if available, or documentation.
2. Is it able to be updated? Open an existing Page/Post (or create a new one) and select a shortcode from the WYSIWYG editor (or documentation), then click the “Update” button in the edit panel. Note that “Previewing” a page is not always accurate, and may not always load shortcodes or certain embedded content such as video or social media widgets. Sometimes “Update” is the only way to truly check how a Post/Page will appear to your visitors.
3. Does the website update showing the shortcode you selected? View the tab showing your website and reload the page. You should now see the shortcode’s output. Compare this to the preview/demo of the shortcode on the theme’s marketing page.

Responsive layouts

Many of the themes today come with the inherent ability to automagically adjust the layout for viewing on various screen sizes. The layout resizes, and elements on the page can rearrange themselves to fit better for smaller screens. Some themes allow the visitor to select to view the webpage in a “desktop” or “fixed width” format by clicking a link (usually in the footer.) Some themes allow the Admin to turn off the responsive feature meaning all users see the “desktop” layout.

To test the capabilities of your new responsive theme, grab a modern smartphone, tablet and a laptop/desktop computer. Load the website on each device (that you have access to. I understand we don’t all have each of those listed.) In each case, you should be able to comfortably read the text without needing to zoom in/out. You should also be able to see everything on the page without scrolling side to side (unless horizontal scrolling is part of the theme design.)

Images and video should also resize to fit the viewable area, not spill off the screen. It is up to the developer to add specific CSS and JavaScript to help (technically “force”) images and video to resize for smaller screens. A well-coded theme will even override the specific size values applied to all images in WordPress, and can even force YouTube and Vimeo videos to respect a responsive layout.

Video support: In today’s world of themes, there is no reason to purchase a responsive theme that cannot do responsive images and YouTube videos. Bonus points for embedded Vimeo videos, but seriously, in my opinion they should be responsive too.

• Does the theme respond to the size of the screen? Bring up your website on a smartphone, then turn it from portrait layout (vertical) to a landscape layout (horizontal.) Did the site and all of its contents resize to properly fit the screen without having to zoom out/in? Note that Flash objects and Flash based video will not render on Apple phones and tablets, and some Androids. On tablets, you may see the ‘desktop’ layout in the landscape orientation and a smaller responsive layout when in portrait. This behavior is common. On your laptop/desktop computer, grab the corner of the browser window and resize it smaller/larger. Some responsive themes update as it resizes, some only refresh after the screen stops moving.
• If the theme has a “desktop version” link, does it work? Look for the link in the footer of your website. Not all themes have this feature, but if yours does you should try it out. Clicking it is not permanent, you can switch back.
• How about them tricky little buggers? Ok, these are some nitpicky items. But they do crop up in websites I visit and I know most can be fixed with a little CSS. Nearly all theme marketing pages will never make mention of these fixes, but I look for them anyway. Why does it matter? In some cases the folloeing 5 problems can actually break the format of a responsive site and make it render a little odd on small screens, especially. Create a new Post/Page and add the following items:
  1. a very long URL as text and make it a link—you can find a long URL in your address bar every time you do a Google or Amazon search.
  2. create a bulleted list of about 4-8 items (look for “ul”and “li” buttons in the WordPress editor.)
     insert a Twitter post (“tweet”) by pasting in the tweet’s URL—you can get details on how to do this here
  3. insert an image with a caption of about 10-15 words.
  4. Nested comments. This is tedious to set up, but worth it. You basically just keep replying to your own reply. Find/create a comment on a Post/Page, then reply to it. Now reply to your reply and do that a total of about 4-6 times.
• Once these (and any other page elements you want to test) are in a Post/Page, visit them on a modern smartphone, tablet and a laptop/desktop computer to see how they render. Long URLs can break out of the container they are in and just keep going (too bad too, since they are a simple fix using “word-break,” “overflow-wrap” and or “hyphen” in the CSS.) For the rest of the items, just take a look to see if they respond to small screens in a way that is ok with you. If they bust up the design too much (it will be obvious to you), or just look horrible, take a screenshot and contact the developer that built it. They might update it in a future release.

And the Rest…

The above six features are only covering a fraction of what developers are commonly stuffing (err, I mean “offering”) into themes today. I chose to focus on these because they are some of the problem areas I commonly see people run into. Much of this is because older browsers don’t support HTML5 and CSS3, which many of the above features rely on.

Be sure to read a theme’s marketing page to see what browsers they do support. Make sure the theme you select aligns with your website’s customer base so you get the proper support (I covered this in chapter 5.)

I highly suggest you test out all of the features of your new theme before you deliver it to your client, or deploy it publicly. You can do this by installing and activating the theme on a separate domain that is not for production (known as a “development” or “staging” site) before activating it on your actual or production website.

Compare the Theme To Your Features Checklist

Grab the checklist I had you make in chapter 4. Before you start to add any content and get waist deep into this theme, make sure it satisfies your needs. It’s one thing that you verify your theme works as advertised. It’s a wholly different animal that the theme actually delivers on the features you/your client deemed necessary before undertaking this search for a theme.

Sometimes You Need a Plugin

Some features can be added using a plugin, so be sure to make a list of features or items lacking in the theme so you can seek out a plugin that completes the feature set you need (see chapter 5.)

Setting the Baseline

When working with clients, I like to take a snapshot of the website I delivered. I can do this by making a complete backup of the new website (example.com) and installing it on a subdomain of their site (dev.example.com). Since this will not get updated by the client, it gives me the ability to look back and see what the site looked like and how it behaved when I last delivered it.

Not everyone has the ability to do this, so another option is to take a screen capture of the website. This is not as ideal since you cannot capture the interactions like hover state or slider behavior. Do a web search for “screenshot website” to see a huge list of available options that can produce an image showing the entire web page, not just the part that is visible.

A more tedious way could be to record your screen as a video while you use the website. Some apps/programs allow you to record your voice so that you can annotate the video as you go.

Either way you choose to do this, you want to record how the website looked during its “known good configuration.” This can help you greatly if a client challenges you on what was delivered.