I finally got this blog to pass the test for compliance with XHTML 1.0 Transitional standards. I’d never bothered to do that before on my various projects, but I decided it was about time to give it a try.
This blog is valid XHTML 1.0 Transitional.
What gave me the most problems was the fact that WordPress uses code for HTML 5 that isn’t allowed with XHTML. They use the “role” attribute for various divs and forms. Apparently it doesn’t really do anything (for my purposes), so I removed all instances of the attribute.
According to W3.Org:
The XHTML Role Attribute defined in this specification allows the author to annotate XML Languages with machine-extractable semantic information about the purpose of an element. Use cases include accessibility, device adaptation, server-side processing, and complex data description. This attribute can be integrated into any markup language based upon XHTML Modularization.
To remove the “role” attribute from the search box form, I had to edit the function the PHP script was calling. The actual edit was simple, but finding the function was another story. I eventually Googled “wordpress get_search_form”, which told me that the function was in the “wp-includes/general-template.php” file. Yeah, that’s really easy to find.
The other main problem I had with passing was the fact that I had been editing the sidebar. I had put divs in between the list items, so the validator gave errors not only that there was a missing LI, but also a UL for each section. Having only edited two sections so far (2 LIs), it reported 4 errors.
Finally, I also had a few mistakes with not closing BR and IMG tags and forgetting the alt text on images, but other than that, I was fine. Those mistakes were simply from a combination of not using XHTML very often and forgetfulness.
I hope this little post on my endeavors to validate a WordPress blog will help anyone else working with a custom theme. Enjoy.
[...] How to Make a WordPress Theme Valid XHTML 1.0 Transitional [...]
Sounds like you are definitely on your way, good job.
Don’t forget though, you can’t put a DIV inside a paragraph.
That takes care of one of these anyway: http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.rwenger.com%2F
Thanks Billy.
For some reason, WordPress was automatically inserting a paragraph tag in front of the div tag for the captions on the pictures I include in my posts. A quick search revealed that one of my plugins may have caused the error, but that in any case, adding a complete line of space between the caption and the rest of the content would solve the problem. I gave it a shot, and it worked.
The other two errors that I was getting when I tried to validate were from my Twitter widget. I copied the code directly from the Twitter site without bothering to test its validity. I simply had to add “type=’text/javascript’” to the script tags.
Now, http://www.rwenger.com passes the validation test. Thank you for bringing this to my attention. I look forward to reading your comments in the future.
Robert Wenger