Validation is undoubtedly one of the most important aspects of good web design. And in a content management system like WordPress, you need to be careful about your HTML & CSS both in your theme and your content. In this tutorial, we’re going to talk about validating a WordPress website.
Why Validate a Website?
Or, perhaps the better question is what is the meaning of validation?
Simply put, validation of a web page means making the page’s code compliant with the World Wide Web Consortium’s (W3C) standards. This is usually done by checking the HTML & CSS output of your web pages with a validation tool. Just like there are grammar rules in different languages, there are rules in computer programming, too. Validation checks your web page to see if the page follows those rules.
In addition to that, we also need to keep our theme’s code compliant with WordPress Coding Standards. This could be done manually (by having common sense while coding a WordPress theme) or using tools like the famous Theme Check plugin.
And why do we need to validate, you ask? There’s more than one answer. Let’s have a look:
Validation Allows You to Debug Your Pages
When I first started to toy around with HTML in 2005, I coded those awful web pages, full of errors like improper nesting of elements or forgetting to close the tags I opened. CSS was even worse: Just a simple semicolon error or an undetectable typo meant that I needed more and more time for my experiments and projects.
But even after nine years of hard work, I can make mistakes despite the fact that I’m almost an expert in HTML and CSS. Luckily, tools like W3C’s HTML validator can help us debug almost every error there is in your HTML code. Whether it be by pasting the code directly, uploading the HTML file or submitting the URI of the web page, you can see what did you do wrong in your code, where the problem is, and suggestions on how to fix it. Fixing those errors might even prevent greater problems.
Validation Results in Better SEO
Never forget this fact: Search engine spiders love semantic web pages. It helps those crawlers understand pages better and in SERP listings, you naturally gain advantage against the pages which don’t validate.
Furthermore, it shows that you care about your website. Validating your web page means that you made an effort to have a structural, semantic web page (or you already have the tools or the knowledge to create that page). That’s a huge plus for search engines and that “huge plus” may bump your rankings up.
Validation Makes Your Website More Accessible & Compatible
Have you ever thought about how a browser reads a web page? They have “engines” to parse the code and convert it into a visual experience for human beings. Unfortunately, different web browsers have different engines and that can result in handling of your pages differently.
In a valid web page, most differences are really tiny and acceptable for almost everyone, but an invalid web page might be read so differently that people might not even be able to see your pages properly in their iPhones, Kindles or whatever browser they may be using. Validation fixes almost every major difference and make your web page readable by nearly all web browsers.
Validation Tools for Your WordPress Website
Now we know why we should validate our web pages, let’s see how to do it. In order to skip the double-talk, I’m not going to mention that you need to validate your post contents; but keep in mind that most of the things I’ll say also goes for the content you write in WordPress posts and pages.
Validating HTML Code
W3C’s HTML Markup Validation Service is probably the easiest and the most popular tool available to check and validate your web page. Using this tool, you can spot almost every validation error ranging from missing ALT attributes for your IMG tags to placing a block-level element inside an inline element.
You can grade your HTML code by giving the address of your web page, uploading the HTML file or pasting the HTML code directly.
Validating CSS Styles
Just like the HTML validation tool, W3C’s CSS Validation Service is the most popular CSS validation tool in the web. And like the HTML validator, you can validate your CSS by pasting the URI, uploading a CSS file or pasting your code directly.
Note that this tool will detect “CSS hacks” as errors and in order to stay valid, you need to find another way to support older browsers.
Validating WordPress Feeds
Although it’s not very popular, “feed validation” is one of the another important aspect of validation of your website. And you can check your WordPress feed against errors with W3C’s Feed Validation Service for Atom and RSS. Luckily (and naturally) the default feeds of WordPress validates perfectly, so your feeds are probably already valid if you’re not using a plugin to tamper with feeds.
Additionally, there’s a noteworthy tool called Unicorn by W3C, which is basically a unified validator. Although it looks like a discontinued open-source application, it still gives satisfying results about HTML, CSS, feed and i18n validation. The results page is a bit confusing but if you ever need to get results of multiple validation tests, you’ll love this tool.
Validating Your WordPress Theme with Theme Check
Along with W3C’s standards, WordPress has its standards, too:
- PHP Coding Standards includes using single & double quotes correctly, using full PHP tags at all times, using white space properly, utilizing Yoda Conditions and so on.
- HTML Coding Standards refers to writing valid HTML code; using attribute values with lowercase characters, wrapping the attribute values with quotes, using white space with logical indentation, etc.
- CSS Coding Standards includes structuring the stylesheet properly, using lowercase names (with hyphens for separating words) in selectors, ordering the properties nicely, commenting and such.
- JavaScript Coding Standards calls that we use braces appropriately, name functions and variables with camelCase, defining an anonymous function if jQuery is going to be used, and so forth.
- Theme Review Standards includes writing quality code (naturally), separating functionality by using plugins, utilizing template tags and hooks properly, supporting WordPress-generated CSS classes, securing the theme, licencing appropriately, organizing the theme files properly, writing a sufficient documentation… There’s just too much!
The Theme Check plugin inspects your theme about these standards – especially the “theme review” standards. The result may be both depressing and motivating, so don’t give up hope and try to eliminate the errors to build a fantastic WordPress Theme.
Just as I started writing this article, a new website came out called ThemeCheck.org which does exactly what the Theme Check plugin does. You don’t have to install the Theme Check plugin; instead, you can upload your theme to the website and get your score along with recommendations to improve your theme (if it needs any). Plus, you can share your theme’s validation score by placing the badge provided by them. Neat, isn’t it?
Wrapping Up
Validating your website is essential, no question about that. As long as you validate your web pages and maintain them to stay valid, you will only benefit from it.
What do you think about the importance of validation? Contribute to this article with your comments! And if you liked this tutorial, don’t forget to share it with your friends!