WP Theme Lesson #8: How to Validate
- Filed under: Tutorials
You need to learn how to validate your codes, before stepping into CSS and working with the style.css file. Validate/Validating/Validation simply means making sure there’s no error. At beginning of this series, I gave you two links to bookmark, XHTML Validator and CSS Validator. For this lesson, you’ll use the XHTML validator.
I’ll keep this lesson very short and simple because you need to more time to sink in everything you’ve learned about XHTML and PHP. Don’t keep moving forward with my lessons. Take the time to reflect and picture the codes in your head. How do you start an invisible box? What’s the different between an ID and a Class? What PHP function would you use to call for the blog’s title? Blog’s description? The more you picture the more you remember.
After today, you better be ready. When we take on CSS, I’ll dive deep into it because the style.css file is what you’ll work with eighty percent of the time.
For today’s lesson, you need to open only the Xampp Control and browser (pointing to http://localhost/wordpress).
Looking at the browser, go to View > Page Source or Source.
Select all. You can do this by clicking and dragging to highlight all the source codes or simply press Ctrl + a.
Copy all the source codes. That’s right click and copy or Ctrl + c.
Open a tab or another browser pointing to the XHTML Validator.
Go to the bottom of the page, paste the source codes in the Validate by Direct Input box. Paste by right click and paste or Ctrl + v.
After clicking Check, the validator will check your codes, then send you to the results page. If the message is green, then you have no errors.
Follow this WordPress Theme Tutorial Series from the beginning.
I got quite a few errors – all from the WP-generated paragraph tags. Is this normal?
No. If you’re using an offline blog. Up till this point, you should have no errors. Unless, you have errors in your posts.
Darn , I knew you’d say that!
Hey SP,
I am using one of your themes on my site, and I really like it. Keep up the awesome work! I plan to come back and read your tutorials and learn a bit of what you’re doing.
Thanks very much for my new theme!
I can see where the error is, but I can’t see why . I’ve used the “lipsum” generator to create dummy posts. The “storycontent” section is adding an id to the paragraph tags, p id=”lipsum”. So the validation is complaining that I’ve already used that id once.
But I just can’t see where my code is adding this from – can you give me a clue where to look? The code seems OK in my text editor, but I’m obviously missing something.
Sounds like the “lipsum” generator assumes you’re creating only one paragraph so it attaches an id to the p tag.
Duplicate id is a no no.
Don’t use the generator. Just copy and paste the lipsum paragraph.
Aha! Although I’d copied and pasted into the “write post”, I hadn’t checked the code on the code tab. It had added those id’s – taking them out got rid of my errors.
Thanks!
[...] #6c Get Archives and Links #6d Search Form and Calendar #6e Widgetizing Sidebar #7 Footer #8 How to Validate #9 Style.css and CSS Intro #10 hex Codes and Styling Links #11 Widths and Floats #12 Post [...]
yey! i got to this point now. my site passed the xhtml validation.
now i cant wait to learn css. thank you for this great tutorial SP!
woot! woot!
I failed the validation. Looked back for errors a million times and can not fix it. Would it be too much to ask for you to give a link to the full version of index.php document up until this point? There is no point in continuing the tutorial if the validation test is not passed. You have created am amazing tutorial and I would hate to mess it. Many thanks in advance!
The validation results should tell you where to look for errors.
If you still can’t, I already have the full version of the index.php file up. You can download it and compare.
Go through the next lessons to look for the index.php file.
i had an error at first because i forgot to close the tag near the copyright lol, took me like 5 whole mins to figure out why haha.
Hi,
I have gotten to this point and can’t seem to get the validation correct.
I still have 2 errors I can’t see any difference between your full index file to mine.
Line 81 not finished
and
Line 87 not finished.
I also ran your index file thru the validator and it had 6 errors.
Any suggestions
Thanks
Gail
One of the validation errors I get is that the id and name attributes must begin with a letter, not a digit.
However, in the begging we are told to ID div’s with id=” to give each post a marker to use in the CSS.
Am I missing something?
I to was getting errors, so started again, and validated any time I changed something, as I’m using notepad++ I kept the first one I did, and opened them both in notepad++ together, as it is tabed as well, I flicked between them to see what was different, that way I could spot the errors.
One thing I discovered–if you copy and paste his code snipets into your theme, (exactly like he tells you not to), the quotes come through as weird characters. I had to go back and find all the places where I’d copied his quotes, delete them, and type in my own. As soon as that was done, instant validation!
I cannot figure out the cause of these errors. I don’t see where these extra ? marks are coming from.
# Error Line 27 column 9: an attribute value must be a literal unless it contains only name characters.
Are you validating with the php codes included or just the xhtml? You can’t copy and paste the index.php file to validate.
I copied and pasted from the View–>page source in my browser. I selected all and pasted. it into the validator.
Could you validate it again and link me to the results page? I’ll check it out later today. If you need more help with this, please post it at the forums.
I’m not sure if I try to link the results if you’re going to get to mine specifically by clicking on the link and I do not see an option for a link specifically for my results… but here’s what I got:
http://validator.w3.org/check
I’m retyping the whole file right now in case it’s something stupidly… stupid.
Yea, that’s not going to take me to your results.
Ok, I redid it all from the beginning, got some different errors but those I was able to figure out. Have no idea what caused the original errors but it’s validated now. CSS still isn’t working though.
Nevermind! The CSS is working it just seems to take a bit of delay before it goes into effect.
I keep failing validation on the horizontal rules in my postings and I do not know how to fix them.
nada
All validated nicely. I feel for the first time that I can now manipulate wordpress to do something a little bit different!
Thanks!
Congrats Rob!
Ok I keep getting the same errors all saying “document type does not allow element “li” here”, but they are all something to do with stuff that wordpress has generated, like blogroll or calendar, not stuff that I have coded.
You’re probably missing something. Like a UL tag.
Yeah thats what the validator said too and I’ve realised I have a LI tag without a UL but when I add a UL it indents it all.
That’s what it suppose to do. You’ll fix that problem in the next lessons.
Yeah thing is when I left that 2nd comment I had already finished the series without bothering to validate!
Anyway now I’ve gone back and passed with the help of Dreamweaver’s collapsable code facility to locate the missing tags.
Thanks SP now I can go on and adapt this theme for my own use
Got 1 error and don’t know how to fix it. It says the error in line 110 and line 110 is empty…now I’m confused. :S
Validated, and beginning to see how this thing works. Great job teaching newbies! I got the PS Pad recommended by a poster in the early lessons, and it’s great for keeping code in line while you’re elarning it. The orgnizational tips are invaluable. Thanks,
[...] #6c Get Archives and Links #6d Search Form and Calendar #6e Widgetizing Sidebar #7 Footer #8 How to Validate #9 Style.css and CSS Intro #10 hex Codes and Styling Links #11 Widths and Floats #12 Post [...]
58 errors? oh crap!
For a quicker way to check the validity of your HTML try the HTML validator for firefox.
i have 8 errors and 4 warnings, and every single error is because the html character entities. dear god!
Almost every error are like this one:
“ERROR” Line 51, Column > 80: XML Parsing Error: CharRef: invalid decimal value.
…?p=4#respond” title=”Comentarios en Test dos”>Aún sin comentarios »
Take this to the forums. Post the details and I’ll help you there Ren.
well, after eating fried chicken and beans haha i can see clearly my mistakes, correct me if i’m wrong please, some of the php files that are under the root files of wordpress are missing the HTML character entities, but that is what i saw, the question is why? it respected what i did when i typed something in the _e(‘example:’) functions, but when i have to type some in a wordpress function like comments_popup_link(‘etc…’) i have to use the html characters like »
It sounds like you’re trying to validate the PHP? Don’t do that. I showed you how to grab the source codes from View > Page Source in one of the tutorials. Validate that. Don’t validate what you have in the index.php file.
Hi SP
Thanks for the great tut, I had a problem with validation and it turned out to be the quotation marks in some of the php codes. The reason for this was that I cut and paste some of the code when I got lazy.
Just thought I would let you guys know in case you have the same problem
WOOHOO!!! The first time I tried to validate, I had 15 errors and I couldn’t seem to figure out how to correct them. So, I started over. It took me about an hour to completely redo my index.php, but when I finished, it passed validation!! Plus, I got a better grip on what the heck I was doing by going back through it all….it made much more sense the second time around! (though the Site Admin and Register stuff still didn’t show up under the Meta section).
I was getting errors with “the id and name attributes must begin with a letter, not a digit”
When I added a letter (any letter) to the line it validated:
<div class=”post” id=”abc”>
Did I miss something or should it validate with the number id?
The post left off the php part of the line from index.php.
Hope you got the idea anyway.
Cherryl – You can’t use the_ID for id=”" alone. You have put a letter in front of it and that’s what “post-” does.
finally i get it through
Many thanks for this tutotial, it’s great.
I had two problems with validation, one turned out to be the quotes character as has been mentioned before, the other was not closing a div… duh!
Man this is weird: I used SciTE to write the code, and it made all the quotes (â€) like (â€), instead of (“).
So none of it validated….
here’s an example:
Error Line 52, Column 8: an attribute value must be a literal unless it contains only name characters.
I’ve never had this problem with SciTE…
I had to go and replace all with notepad.
But this tutorial kicks serious butt!
Nice… only 1 error and found out that in the image, I was asked to put “alt” attribute. Added them and passed the validation
Hi Smalll Potato… Thank you so much for putting up this tutorial. I have NO errors but 1 warning.. and not sure what to make of it:
DOCTYPE Override in effect!
The detected DOCTYPE Declaration “” has been suppressed and the DOCTYPE for “XHTML 1.0 Transitional” inserted instead, but even if no errors are shown below the document will not be Valid until you update it to reflect this new DOCTYPE.
I’m not sure what is wrong? Thanks so much. Pamela
I’ve been following closely and understand up until now.
I have 3 errors. All of which says: Opening and ending tag mismatch. The first one is for a div and the other is for the body. It says I have and but I didn’t open the tag. Which is weird. But sure enough, when I looked into the source page closely, I found out that there’s an extra after the correct in my Navigations. But the body one I have no idea.
How do I fix this?
Never mind… I don’t know why but when I deleted the closing “” for the navigation id, it passed validation. Ehr?
I am also getting mismatch error things. And I can’t for the life of me figure out what to fix. Everything looks perfect from my perspective.
I only have four errors. They are about the body and html not closing correctly. Can someone please help??
Thanks so much. This is the greatest thing ever. I like it even more than the normal WordPress forums. Much more friendly.
Please help with the errors! I want it to say zero.
it usually tells you which lines the errors are from. track them down and fix them one by one.
First off, great tutorial.
I got this far and wasn’t going to validate the XHTML Markup as it’s a test site, but I did anyway, 9 errors, all around ul and li errors. Time to start digging!
I’m looking forward to the CSS, I love CSS.
Thought I would reply on what I posted above. All of the invalid markup was caused by ul tags inside parent ul tags without enclosing the child ul tags within li tags, naughty, naughty.
Basically I didn’t follow the instructions properly.
Thank you, thank you, thank you. This tutorial is excellent work. I came this far, tried validation several times, but had to look back because I was getting errors. Finally I got it right, so now I’m ready to continue. I’m amazed. Once again, thanks!!!
Hi Smalll Potato…I have NO errors but 1 warning.. and not sure what to make of it:
DOCTYPE Override in effect!
The detected DOCTYPE Declaration “†has been suppressed and the DOCTYPE for “XHTML 1.0 Transitional†inserted instead, but even if no errors are shown below the document will not be Valid until you update it to reflect this new DOCTYPE.
I dont’know what to do right now,can i still follow the next tutorial even there was a warning with my validation?
Hope you can help.
Faeiz
Yea, move onto the next lesson.
I am having a problem with validation. The code I have appears to be broken but when I validate I am getting errors in the code WP automatically inserts like:
track_errorsOffOff
Error: end tag for “table” omitted, but OMITTAG NO was specified .
are you displaying the calendar in the sidebar? please take this to the forums for posting details and further help
Howdy SP. Your tutorial is superb, and I’ll do a big ‘yay’ for you next time I’m drinking. Much appreciated.
I stumbled upon a thing that might help people with validation woes. I had a bunch of widgets running in the sidebar, and a few of them had some messed up code that I couldn’t find in the index.php (poorly written javascript I think). Disabled widgets and it now validates as strict (with changed doctype).
Hey man, thanks for your tutorial. I had a misplaced tag which made the W3C website report 7 errors. After I fixed that, to my pleasant surprise, I saw a big patch of green.
I would like to point out that Dreamweaver CS3′s validation has quite a different story to tell, though. It reported 5 errors at first… now it has many. I didn’t count.
I failed validation based on the Archives link not creating any child tags under the tag. There just aren’t any monthly archives on this brand new blog I am running locally – so it doesn’t write any child tags.
I am convinced 1 month from now (actually, 2 days, since it is almost the end of January) the site will validate becuase it will list the January posts in the archive.
Thanks again for a fantastic tutorial!
I got 13 errors… Wtf?
wtf? 13 errors? that’s bad
Hi Small Potato –
I’ve been going through the tutorial, and I just wanted to say THANK YOU for writing it. It’s very easy to understand, and you’ve done a great job.
Hello – I have been following the tutorial and have had no problems until validation, 54 errors. Some just did not make sense.
So I went bacl the 3rd lerssion I think it was and copied the orginal index.php that we were instructed to copy, I received 21 errors from that, so I must be omitting something from the validator, any ideas?
No idea if I can’t see your errors. You can go to the forums for more help (if you can post a screenshot that is).
Hello Small Potato,
I’ve got error message but can’t figure out what to do (i’ve gone through your tutorial for second time because my past tutorial documents got deleted by one of my friend..Arghhh)
By the way,below is the 2 errors message that i got when validating to the site:
Line 153, Column 3: document type does not allow element “ul” here; assuming missing “li” start-tag.
Line 157, Column 4: end tag for “li” omitted, but OMITTAG NO was specified.
I’ve got no idea about them.
But when i validate them using dreamweaver,there is no error detect.
Got more confuse into this..
Help me please..
Faeiz – Support questions should go to the support forums because I can’t give you any codes in the comments. They won’t show up. Second, don’t use dreamweaver
Hey SP, I just wanted to join the long list of people blowing your well deserved trumpet! I got 15 errors which stumped me at first. I soon realised they were all caused by a missing space in the posts name link.
Anyway, thank you so much for this tutorial- I had no idea how great a green stamp of validation could make you feel!
All of my errors (6 or them) occur in lines 7 and 8 (only one of them is in line 7, the other five are in 8). I’m sure why this is the case because I have entered exactly what you have, as far as I can tell.
These are the lines that being with “meta http-equiv” and “meta name”. Should I paste the code somewhere?
Oops – I meant “I’m NOT sure”….obviously.
Never copy and paste unless the instructions tell you to.
I haven’t copied and pasted any code. When I said “copy and paste” above, I meant should I copy and paste what I have into the forums or something for someone to look at.
Comparing my index.php file with the one you showed in the tutorial, those lines where I am getting errors are exactly the same. Any idea of why this is? Again, I’m getting errors in my #7 and 8 lines. These are the ones that start “meta http-equiv…” and “meta name…”
Any suggestions?
By the way, I love the tutorial. Thanks a lot. I look forward to getting through all of your tips and tutorials eventually.
I have no idea why because I can’t see those errors. Go ahead and take this to forums so I can take a closer look at your codes.
Hi SP,
I am getting many errors (17) and I have seen all of them. It seems like all of them are coming from my posts that I made in my offline blog. There are 3 posts. All of these posts are hand made.
I have checked my index.php file and it looks correct.
Why are these errors showing?
Addies – Like I said in my previous response, bring your question to the support forums and I’ll look at it there. You also need to read this.
Once again I feel fricking stupid
I had about a million errors (okay, maybe it was 13), and it was all due to two tags, one that was created by my text editor automatically (I’m using Pragrammer’s Notepad), and another was the header close div that I didn’t close…
I never thought about validating any code I wrote before, so thanks. Good step to include
One thing I would like to mention about the validator is that if you copy and paste directly (direct input), for some reason it lists a lot of errors.
I always use the web developer toolbar in firefox. It’s quick and easy (you just click validate local HTML) and you will get a quick result.
Using the copy and paste method I got errors which were unusual, when I validated using web developer toolbar there was only two errors (I forgot to leave a space somewhere). I put in the space and it passed.
So anyone who has trouble validating, use the web dev toolbar. And remember, if you get a lot of errors, fixing one or two can get rid of the lot as they are all clustered together.
Great tutorial even for someone who has been designing sites for a while, wordpress is a new learning curve for me
Thanks and good luck with the book!
Wow. Instant validation on my first attempt.
Gosh, I’m so happy with this tutorial.. I never found any major problem so far. Thank you very much.
113 errors. Booyah! I win!
I think i know where my problem is but I’m not sure. I think I have my sidebar inside the loop for all the posts along with the search box. Is there any place on this tutorial where I can get the entire index.php file up to this point so I can check the placement of my code?
I looked at every peice of code, re-did the index file twice (by hand, no pasting) and it doesn’t validate…I tried validating small potato’s index file which he posts on one of the last tutorials and that didn’t validate either…I’m validating as XHTML 1.0 Transitional, copying the source code from the browser (not the php file).
There’s no way I can find the solution to every error in the forums, there’s A LOT…if anyone has any suggestions please let me know…I know small potato is gone now
I’m having serious problems too…I’m guessing it has to do with the validating version. Maybe its not xhtml 1.0 trans. I havent been working on these tutorials for a while, but when I do I’m going to try using the theme online. If everything works right….then who cares if it validates right?
My code is all valid.
Now….How can I add a validation button on my site, so that my visitor can click on it and see that my site is valid?
I have read over the tutorials and the comments.. I started off with 20 errors now I am down to 13… I retyped everything they said was wrong… how can I download a copy of the full php to compare to what I have? I searched the website and I haven’t found any links… did I miss something? Thanks in advance for the response.. GREAATTTTTTTTTTTTTTTTTT Tutorial!! I feel “smart” hehe
My site works fine, but won’t pass validator. I see the errors are with the php.
Hi every one i use Fire bug for Firefox its an add on but its very good for checking errors on your website. Its an ideal tool for the blogger web designer or even enthusiast well check i out for yourself and you will see.
Cheers guys Great Post!
Nice tutorial really
i just got some 19 errors with ” XHTML Validator ” all my errors is ” DOCTYPE ” ” wordpress ” ” XHTML ” ” charset=UTF-8 ” .. etc
no serious errors .. dats alright or there is something i miss ?
thx for da tutorial brother
hehe .. Passed validation .. dooooone
thx for da tutorial ..
i luv css
I am getting this error for most of my tags, 52 of them
Line 7, Column 42: character “<” is the first character of a delimiter but occurred as data.
Looked everywhere I still cannot fix them
I too am getting multiple validation errors, mainly :
“<” is the first character of a delimiter but occurred as data.”
and
character “?” is not allowed in the value of attribute “id”.
and
character “<” is not allowed in the value of attribute “id”.
I have spent the last two days re-reading, re-editing and re-creating my index.php page – but unfortunately I cannot seem to solve this problem.
This document was successfully checked as XHTML 1.0 Transitional!
I had 6 errors but thanks to the Validators hint that I may have forgotten the “=” sign I noticed i had put a “-” there instead, once I changed that all errors vanished!
I have tried numerous template tutorials for a number of CMS’ and never got to the point of really understanding what I was doing.
Validating my own (mostly yours) code, must be the coolest thing I have done in my short carreer as website builder.
Thanx a lot!
[...] WP Theme Lesson #8: How to Validate oleh Small Potato diterjemahkan oleh Mochammad [...]
darnabbit, i got 97 errors! i swear i worked really neat on this !!
page displays normal also
i have it on a public www server though, not local. does that matter a lot ?
up till now it didn’t seem to matter and for me is just the easier way to go….
~~~>This document was successfully checked as XHTML 1.0 Transitional!<~~~~~
WOOOHOOOOO!!! Onward!
I cant believe it after all those steps I went through I get stuck on Validating my code then I get 90 errors, can some please help me with this one i tried 8X fixing it but I still get errors. I just dont know what to do next.
Wow – got it also validated; at first I had 58 errors…..
And they where just because of not putting a space between ; and ?
I forgot to do that only 2 !!! – and it gave me 58 errors….
For people who can’t find their error; really – it can be THAT small…..
I had a simliar problem with pointing to the correct path for the search bar.
path should be as follows : ‘ wp-content/themes/grace ‘.’ /searchform.php ‘
after some tweaking, the only error i’m getting is this:
Line 50, Column 45: ID “post-” already defined.
it obviously wants me to delete the post- which is followed by the php call for post id
but you said to include post-
what should i do?
thanks
I validated it and i have 5 errors and 1 warning and i looked at the source code when i go to view page source and i found about 3 different tags and same with and the body tags
can anyone help?
I validated it and i have 5 errors and 1 warning and i looked at the source code when i go to view page source and i found about 3 different tags and same with and the body tags
can anyone help with that
Sorry I figure out what was wrong,
in the other files functions and search i left the html tags that were automatically set by dreamweaver
Most of my errors are the ‘ or ” symbols? I’m using an online WP dummy blog since I’m on a Mac and can’t use an offline WP blog.
Hey man, this is an awesome Tutorial so far. I never could understand what WP was trying to teach with their tutorials. So far so good, will definitely reference your site. Could even donate a few bucks for your assistance.
That is really interesting, You are an overly skilled blogger. I’ve joined your rss feed and look ahead to in quest of more of your wonderful post. Also, I’ve shared your website in my social networks