Jason G. Designs

Introduction

This tutorial is for those who have designed a WordPress theme for either themselves, a client, WordPress.org or to be served from their own site. As such, it is a good idea to use some of the ideas presented here under the assumption that you are developing a theme on a local WordPress installation. This is especially important for the disabling plugins part, as disabling plugins on a live, public facing site is not recommended.

The method below describes how I validated my upcoming theme Urban Square. I did not follow everything listed here because my local install’s back end does not have plugins that display html on the page and my current theme doesn’t have any shortcodes outside of a Gallery. On my live site, however, I do.

1. Disable any plugins that print HTML onto content pages
   Quite a few plugins print HTML on the frontend, not all of which is valid HTML or CSS. Make sure to temporarily disable any plugins that add html within content pages, in the sidebar or elsewhere. Also, temporarily remove shortcodes, if any, that show HTML from all theme files (unless your theme provides them). You can temporarily Cut these shortcodes from the files and Paste them into a text file, perhaps noting where they go, and restore them after validation.
2. Navigate to an example of each type of WordPress page
   1. Single Post
   2. Category
   3. Archive
   4. Page
   5. Index
3. View Source and Copy for each page
   We will use a Single Post page represented by single.php for this example. Click on a post from the index page in the browser. Use your browser’s view source, Select All of the text and Copy it.
4. Navigate to The W3C Markup Validation Service
   In a new tab, head to http://validator.w3.org/. Choose Validate by Direct Input. Paste the code into the textarea and click Check if you want to validate as is. Your content within the page will also be validated.
5. *Optional- Remove “content” from code input
   If you have sample content, you may want to remove this from within the textarea. The only reason to remove content before validation is that it is not associated with the theme, but with what the end user adds. It is totally up to you if you want to validate your sample content as well.
   1. Special considerations for the index pageAs you know, in the index page, you will have several content areas for each post. Within the code input, look for the div or section which holds your content (you may have named it with a class of “entry” or “entry-content”). If you are validating a theme you didn’t create, look for a div or section with the above classes. These show up for as many posts that are on the index page. Remove the content between each. Click Check.Repeat this process for each page type, clicking Revalidate after Pasting each new page.
6. Validate your CSS (up to level 3 if your theme supports it)
   Next, head over to http://jigsaw.w3.org/css-validator/. Copy your style.css file from either your theme or from Viewing Source and clicking the style.css file. Choose By Direct Input. Paste the input into the textarea box. Note that if your theme’s CSS contains CSS3 vendor prefixes for older browsers that don’t support unprefixed versions of a feature, it will not pass because of the browser specific information. See notes below:
   1. Consider putting browser extensions in a separate fileIn my themes, I ended up putting my prefixed CSS3 style rules into a separate stylesheet. The downfall of this method is that it adds an extra http request, but your main stylesheet will validate.
   2. Consider putting high definition css rules in a separate fileAlso, style rules to support high definition background image switching fall into this category. Because of the vendor prefixes, you may want to put these into a separate file. Perhaps, you can put the browser extensions and hidef css into the same extra stylesheet for only one extra http request.

Conclusion

There isn’t any standard way of validating a WordPress theme. This is just the method I chose. Feel free to validate your theme in any way that works for you.

Tags for this post: Validation, W3C, WordPress