Ekto gammit

WordPress Troubleshooting: I have to validate? Oh MY!!

valid_noobie.png

Your page is broken or some support monkey is insisting you validate it! "OMG! I just want my sidebar back!"

Everyone makes mistakes, the point is that new habits and practice can limit these. I hope the following can help, so let's get down to it:

 I have yet to see a theme designed in IE (not that there aren't any, I just don't see them, I have little spots on my glasses that cover them up), so you can generally rest assured that the HTML/CSS works well with Firefox and other modern browsers. For this reason I recommend you use Firefox to go through the process of making your WordPress blog valid HTML.

If you don't have the Firefox Web Developer Extension  get it. You should have another bar now that has a menu that looks like this: WebDev Menu

Load your WordPress page and from the new web dev menu, select Tools:Validate HTML. This will send your current page to the W3C Markup Validation Service. Try to keep the results window somewhere you can reference it, you'll probably need it for awhile ;') The results page will look similar to this:

Example w3C validation results

Now, check the "Show Source" option and click Revalidate. This will list our page source and corresponding line numbers underneath the error list. The error list is constructed like this:
ERROR/WARNING LINE# COLUMN# DESCRIPTION OF ERROR/WARNING
and below that a snippet of the offending code and a description of what the validator THINKS is wrong.

Some example text of an error listing:

Error Line 157 column 4: end tag for “br” omitted, but OMITTAG NO was specified.

<br> < a xhref="http://feeds.feedburner.com/NOOBblog/" title="Subscribe to my feed"

You may have neglected to close an element, or perhaps you meant to "self-close" an element, that is, ending it with "/>" instead of ">".

A common problem, and one even the validator can describe the solution for. We didn't properly close an element and xhtml requires all elements to be closed. What I need to do is find that <br> and change it to <br /> (the latter opens and closes the br element within one 'statement').

Now here's the fun part: Since WordPress generates pages dynamically from multiple sources/scripts, there is no one file that contains all our code. We have to figure out what file/script generates that particular <br>. We got a hint, though, from the line number and snippet above. Scroll down in the validator window into the source display area and find your line number.

In this case, <br> is pretty easy to find, it's related to an RSS feed link in a post. Go edit the post in question and while in the editor click the html button and hit the Word Wrap checkbox. Scroll down until we find the offending <br> and change it to <br />. Then hit Update in the bottom of the html box and then Save (or Save and Continue Editing, if needed). Now go to the validator results tab and hit the Revalidate button. Check results.

Let's move on to the next one:

Error Line 155 column 196: required attribute "alt" not specified.

...ages/feed-icon.gif" style="border:0"/>

Another common one. All <img> tags require an alt="" for browsers that don't display images or for the disabled. This will not effect your page performance, or the layout of your page, but get in the habit of adding an alt= description. Typically this is a description of the image, in the context of the article (alt="Image of Edit Menu choices" for example). Insert your alt="description of image here" right before the img closing />. Now go to the validator results tab and hit the Revalidate button. Check results.

One more example:

Error Line 199 column 6: end tag for "li" omitted, but OMITTAG NO was specified.

<ul>

You may have neglected to close an element, or perhaps you meant to "self-close" an element, that is, ending it with "/>" instead of ">".

In this case the validator thinks we forgot to close a <li> with a </li>. Due to the dynamic page generation these (and missing </div>'s) can be frustrating to track down. It's not unusual for a <div> to be opened in one file and closed </div> in another. So I recommend taking a deep breath, chanting, meditating, popping pills, slamming heroin or whatever your flavor of losing focus of the reality around you is. Whatever it takes to get you relaxed and focused. Ok, forget the drugs... Music?

[xspf]_start()[/xspf]

 Start with line 199. Scroll on down... The validator cannot give us the exact line because all it knows is that it wasn't closed properly BEFORE the </ul> on line 199. So, working backwards from line 199, we will want to find the first <li> element and look to see if it is closed appropriately with a </li>. In this example, it was in the 'search' code, and I had to go up to around line 184. Now go to the validator results tab and hit the Revalidate button. Check results. (Starting to see a pattern here?)

If you get stuck on an error, feel free to head over to the WordPress Support Forum, but don't expect anyone over there to do the work for you. After all, these are Theme, HTML and CSS issues, not WordPress issues.

Hopefully this article will help introduce you to HTML validation. Invalid HTML can slow down your WordPress blog, make it look awful, and most importantly: Really, really tick off your support monkeys.

Tagged with: , , , , , , ,
Posted in Computers, Things, WordPress
21 comments on “WordPress Troubleshooting: I have to validate? Oh MY!!
  1. Sam says:

    Good luck! Pretty soon you’ll start catching these before they become problems…

    Then you can start helping me fix mine ;’)

  2. katijah says:

    Just don’t look at my web site in F.F lol 46 errors!

    At least reading your tutorial I got rid of one error. I hope to do more eliminating tomorrow.

    Thanks Sam

  3. barbara says:

    This was soooo helpful! I went from 14 to 2 errors and I find they are all in the comments. How do I access the HTML for those areas? Would I open the comments stylesheet?

    It may be a basic question but I am still learning! Thanks for any help you can provide!

    Regards –
    b

  4. Sam says:

    Looks like the paragraph tags got doubled-up in the comments… In your admin pages go to Manage:Comments, select Edit on one, then in the edit window hit the HTML button and look for any extra/superflous

    tags…

  5. alto says:

    hi sam
    thankyou for this page.
    i have learnt a fair bit of validation so far.
    have started and closed 3 wordpress applications in order to learn.
    have been using default and neuro’s “identification band – 4 column”, and this website http://sistersahoy.com/learnersawake/
    is now a brand new one – the latest WP with same neuro theme. was able to fix the 3 validation errors after the instal – the error was in the footer – a line needed closing with

    the trouble i was having the last 2 blogs (mentioned below) is that even though i could keep the sidebar, the header, footer etc, i was not able to get the whole site validation, as i could not find where the code lives.

    i am very new at validation and willing to put in the time necessary.

    i would also be willing to write, with assistance a “validation for newbies”, as i learn it myself.

    see following link for my “How To” style.

    http://wordpress.org/support/topic/88458
    ==================================
    QUESTION:
    introduction to the question.
    i have the original site – wordpress
    and the mirror site – both neuro’s theme “identification band-4 column” – both wp 2.0.3
    i have been going back and forth between the two, validating each time i made a change.

    i could validate:
    * sidebar.php
    * header
    * footer
    * each code snippet i put in the above files

    (and i had less to nil success with CSS validation.)

    after a while, i lost the plot, and have begun another brand-new crispy wordpress installation.
    so, i have in all my searching not been able to find any other files to validate the site.

    for example, when i validate
    http://parentsawake.com
    validation fails.

    that page is made up of more than the
    * sidebar.php
    * header.php
    * footer.php

    so the QUESTION is:

    how do i get to the rest of the site, so i can validate it?

    thankyou for your assistance thus far,

    alto
    PS i really like the way the text appears below this posting box – for checking before hitting “post”!

  6. alto says:

    hi again sam

    i wish you many blessings …

    i sent a message from this same place, about 2 hours ago.

    and i have thought of other things following….

    you might be interested, i am not sure.


    wordpress people, both new and old are being encouraged to begin validating.

    from what i can tell even the long-term users do not know how to validate.

    here are two newbie posts looking for a tutorial for the same error:


    'ADMINNICENAME'. Error

    on a brand new wordpress theme, this error is the first error that comes up.

    on these two wordpress posts below, there are 3 newbies and one experienced user not able to understand the solution language by neither the person helping on the wordpress post nor the validation site itself.

    http://wordpress.org/support/topic/78950?replies=12

    http://wordpress.org/support/topic/80856

    and i understand how that happens, because i could not understand the language of the validation site.

    a search on wordpress for “validation” gives the following page. and there was no language in there that i could understand. not one bit of instruction did i understand. yet, perhaps validation can not be explained – perhaps it is impossible,
    because each set of errors would be different ?

    http://wordpress.org/search/validation

    so i spend over 10 solid hours trying everything i could imagine – just to fix that one error.

    then i googled “‘ADMINNICENAME’. Error ” and i found the solution.

    i tell ya sam,

    there is mighty angst building over this inability to validate.

    i can feel it in me bones.

    if i can assist yourself or a person you know with writing a validation guide, i would like to. i am a full time parent, yet i do have time in the evenings.

    entirely selfish reasons of course – i want to be able to validate my site and assist in averting a building frustration from the older wordpressers towards the newer ones.

    people accuse newbies of not reading, and yes i do know that some newbies do not read. yet, any casual reader can tell who is doing the research and making the effort first before asking for assistance – and who is not.

    i for one understand perfectly how one can read something over and over and over again, stand on your head, make another cup of coffee, go and have a shower, sleep on it … and still you get up the next day, and the next and you still do not understand the words …

    and then WordPress Lorelle the beautiful clear one, came along and changed all that. everything she writes is so understandable …
    things that i have not understood for the last 3 years of using wordpress, are now crystal clear when explained by Lorelle. i asked her recently if she could please clone herself.

    anyway, it is good to talk.
    thankyou sam.

    alto

  7. alto says:

    hi again

    lorelle does write about validation.
    yet does not give any clues about what other pages to validate other than
    template.php and others which i, no matter how hare i try, i cannot find in my theme.

    http://lorelle.wordpress.com/2005/10/06/conquering-site-validation-errors/

    i have posted the previous email on the above url – to lorelle.

    alto

  8. Lorelle says:

    Thanks for helping, Sam. Just to be clear for all, EVERY file in your WordPress Theme directory, found under /wp-content/theme/yourthemename makes up the modular file system to create the web pages on your WordPress blog. That is where you will find all the files.

    Tracking down where the error is in order to fix it is explained in Finding Your CSS Styles in WordPress, since that helps you track down where what is in your WordPress Theme template files in order to fix what is broke.

    Thanks again for all your help here, Sam.

  9. alto says:

    hi sam

    i posted here yesterday about my inability to find the necessary files mentioned by lorelle eg template.php, single.php, etc – well i have discovered that it’s only the files in one’s theme that one is supposed to validate (is that correct?) – there are no other files to search through – so that’s a relief …
    so i stopped trying to find non-existent files … pulled everything out of my sidebar which was not in theme originally and lo and behold, my site is validating once again … mission accomplished. now i will put things back one by one and validate each time.

    thankyou sam for your time
    alto

  10. Sam says:

    Alto, you are welcome.

    One of the problems with tracking down the exact location of validation errors is that the location may change from theme to theme. It does take a bit of detective work…

  11. Francine says:

    Thanks for your help! I just went from 35 errors to 0… and it seems that one widget was causing almost all of the problems. Now on to fixing the IE7 problems.

  12. Greeny says:

    Hi Sam, I just try validate my WP blog and I see Text widget give validation errors even is empty, even it have a piece of code inside. I use WP v2.8.How can we fix-it? Thank you

  13. Sam says:

    Hi Greeny,

    Hard to tell without seeing the error and source… But a lot of those come from ‘nesting’ <li>’s, so you might want to check that and the matching </li>’s.

  14. Greeny says:

    You perfectly right.W3C validator tell me the same thing. “” W3C Validator verify the same HTML source code which I view in the
    browser and indicate me the place of them, but I dont know where is the code which I have to corect.
    What is/are the name of file(s) I must fix?
    All are part of WordPress code not mine.
    I thank you so much for your patience.

  15. Sam says:

    I think you’ll find it in the sidebar.php file, that’s usually where the widgets are called.

    Good luck! Let me know if you still can’t find it and I’ll open a thread in my forum…

  16. Samantha says:

    Nice blog, i like it, its informative,
    i will visit his blog more often.
    i like your article specially about
    Wordpress Troubleshooting: I have to validate? Oh MY!!

    Cheers

  17. Guilherme Lima says:

    A barra lateral do meu blog no wordpress com tema Borja Fernandez está aparecendo abaixo dos posts. Como eu faço pra resolver o problema. Comecei a usar o blog agora e não faço a mínima idéia de como eu resolvo isso. Por favor dar uma força ae.

    abs

    Guilherme Lima

  18. Gaurav Yadav says:

    Check this helpful link too…

  19. Sam says:

    @Gaurav: I removed your link because I didn’t see any direct information regarding HOW to validate, only a list of the order in which to validate sections of the website.

    I’m afraid there isn’t enough ‘substance’ there. If your article changes, or you have another one with more related content, send me a link via my contact form and I’ll be happy to add it back in to your comment ;’)

  20. Marius says:

    Hi Sam, I use free Twenty Ten Theme on my WPdotcom blog and you know, I have no acces on files to make some changes to fix some issues code, that can be frustrating. Please tell me if that can be a big problem for my blog. Tank you.

  21. Sam says:

    Hi Marius: That’s one of the downsides to ‘free’ blogs is that you are limited to what changes you can make. That makes it easier for the ‘host’ to keep their servers up and their maintenance costs down…

Leave a Reply

Your email address will not be published.

*