In this session we show how to make a Thesis site W3C standards compliant. We use the website http://validator.w3.org/ to find the errors or the site. The errors turned out to be coming from misplaced HTML codes, placement of Thesis hook, use of self closing element brackets, plugins and Facebook codes that are not compliant. For some of the errors what is needed is a plugin that validates to XHTML Strict.
Member: That answers that. Okay well, the reason I did contact you was I need to learn how to make a WordPress website, W3C compliant. Using my website as an example, I’m using WordPress and a Thesis theme. When I ran it, the W3C validator, I came up with 16 errors. So I’m wondering, how do we fix these?
Rick: Okay so I’ve got your site. You’re talking about webdetail.com?
Rick: Okay and so I’ve got your site in the validator right here. And if we look at your 16 errors, actually, let’s look at it inside… what I’ve done is I’ve run it showing the source and listing the messages with verbose output so we can try and figure out what’s going on there. And so if we look at line 16 or it says that there’s… this document type does not allow a div here and what I believe is that we’re looking at something inside of the head of your page. So if we go down to line 16, we’re inside the head. We’re still inside the head of your page and you’ve got this Facebook code that starts where? Yeah okay, it starts with line 16 and really, line 16 through line 23 is in the wrong spot. It doesn’t belong in the head of your document. It belongs in the body and my guess is that it’s causing 16, 17… so it causes the first two.
Rick: When you insert that code, you need to insert it inside the body tag, not inside the head tag. And so it can happen right here so you would use Thesis hook before HTML which will place it directly after the body tag for that script. Or you can use it Thesis hook after HTML which will put it at the very bottom of your page.
Member: But where do I find that code, Rick?
Rick: Well, maybe you’re using a plugin that inserted it. What are you using to do Facebook with?
Member: It’s a plugin.
Rick: Okay well, you have to… hang on just a second. You’re going to need a different plugin.
Member: Okay so deactivate…
Rick: What is the plugin that you’re using?
Member: It’s called Social Media Widget by Brian Freytag.
Rick: Why don’t you deactivate… are you in your panel right now?
Rick: Why don’t you deactivate it and let’s run a check again?
Member: Okay. Okay, it’s deactivated.
Rick: Okay so let’s revalidate.
Rick: Okay that got rid of two errors. Although it did not get rid of line 16 and 17 so you’re doing something else as well. Somewhere else, you are inserting this code. Now it could be that you’re inserting it using the Thesis Site Options under Thesis Site Options. It could be that you placed it in the additional scripts section. That’s probably what it is and if not, then maybe you have a custom function that’s doing it or there is some other plugin that’s doing it.
Member: Okay, I’m looking in the additional scripts and I see that code in there.
Member: It’s the first line.
Rick: Yeah so you have to… well, it’s not… I mean, you’re going to want to delete all 5 lines or whatever it is.
Member: It’s my Google Site Verification.
Rick: Well, no. That’s not what this is. This fb… it should start with fb root.
Member: Alright, so just what you see there? Just that line?
Rick: Well, it’s… no, remember we looked down here at the… it’s this set of lines. It starts with div id fb root and it says script function dsid and then all the way down here to the end of line 23. So it’s line 16 through line 23.
Member: I got you.
Rick: Is that stuff actually… was that there?
Member: Yeah, it’s above the Google…
Rick: Okay so that’s… so you got to delete that.
Member: And I’ll save it and now let’s run it.
Rick: See, now you’re down to 9 errors. You just mucked out 7 errors by taking those 2 things out. Now we’re at line 94 and this is an error that you have existing a couple of times and it’s this… you have an image or you’ve given it a tag align. So look at… we’ve got this image src align=middle alt = wire high paper link. Align = middle is not standards compliant so this is inside of your 3rd text widget.
Rick: And this probably exists several times. It exists on line 94. It exists… oh pardon me. Okay actually, 1, 2… 2 of those times, it’s the same issue really. It’s the align. I guess it only exists once. It’s only in that one text widget. So if you get rid of the align equals middle, it’s old HTML. If you want to do a center aligned image, what you would do would be to say style equals double quotes and then text-align colon middle or center, actually… text align center. Do you understand what I’m saying now?
Member: Right. style equals in quotes, text-align-center?
Rick: No, no. text=align: center and then your double quotes again, closing and double quotes.
Member: Alright, I’ll save that and see. Okay, save that does it. Yeah.
Rick: Actually, your image… okay so your image tag is also missing a closing slash so it should… the image tag should end with a slash closing bracket. Does that make sense?
Member: Right. But where would I find that div then?
Rick: What’s that?
Member: Where would I find the code for that div tag?
Rick: Well, it’s not the div. It’s the image tag.
Member: The image tag.
Rick: Yeah, you’ve got that image tag so if we look at line 93 now, we’ve got LI class widget id text 3 div class text widget image scr = such and such, style = text align: center alt = wire high paper and ink. And right after that, there should be a slash inside that image tag.
Member: Okay, before… right after the bracket…
Rick: Right before the bracket.
Member: Right before the bracket of closing tag? Okay.
Rick: Right before the closing bracket. This is standard HTML. You can either have closing tags or you have self-closing elements. Images are self-closing elements but the way you indicate that you recognize a self-closing element is by using the closing element bracket which is a slash greater than sign.
Member: Gotcha. It worked.
Rick: So now we’re down to another Facebook error and that’s on line 104 and what you’ve done is pasted in Facebook’s… it looks to me like you’ve pasted in Facebook’s code.
Member: Okay, yes.
Rick: But their code doesn’t validate so if you want to make sure your site validates, you can’t use their code.
Member: Okay so lose that. Alright, let’s see if that… now it passed. That took care of… so what could I use for Facebook as far as the buttons?
Rick: Well, let’s see. Let’s see what I use. I’ll go to the blog. Okay so now let’s validate this, see what it says. 49 errors. I’m guessing that my Facebook is probably one of the problems. Okay, WishList Member throws a whole bunch of errors. Let’s see… and then here’s my Facebook… so obviously, my Facebook code is not error free because… well, in fact, the Google + code also throws errors. So you can’t use my plugin or the plugin that I’m using. You’re going to have to go looking for a plugin that validates to XHTML Strict.
Rick: And if you can’t find one then you won’t be able to use it, if it has to match XHTML Strict.
Member: Well, could I just put an image of the Facebook icon and just link that way?
Member: Okay. I mean, at least it’ll get me to Facebook.
Rick: Yeah, absolutely.
Member: Alright, I’ll try that and also, I’ll research it to see if there’s one out there. Great, I’m happy that I can put this little icon on my website now.
Rick: Well, good. I’m happy for you. So obviously, it’s not really that difficult, right? If we look at… let’s see, what’s happening in my case here? I’m… okay so… okay Google +1 so inside my script… well obviously, the Google +1 script is throwing an error. Now it could be that I need to move it… well, I don’t know. That’s interesting because you wouldn’t think that that would necessarily be the case that this built in stuff didn’t work. But that’s obviously what’s happening here is that there is no attribute a sync in an above your document when the document you’re using does not support that attribute for the element.
Member: What they’re saying is that I shouldn’t be using the strict doc type for my site. You know, it’s just a… it’s a moving target, right? And I suppose that instead of using strict, I use transitional and revalidate, how many errors do I have? Now I only have 27 errors. But I… in order for this to really work, I have to go into my site and change the doc type in Thesis which is certainly possible. But it didn’t actually solve the problem with this Google +1 text or code and actually, all of my errors currently are related to that Google +1 code or the Facebook Like code.
Rick: Yeah, I found something. I’ll email it to you here, a link.
Member; Yeah okay.
Rick; And see if this makes sense to you.
Member: Yeah, see it’s all… all of my errors are thrown… well, not all of them but really, the majority of my errors are errors related to Facebook social sharing and Google + social sharing. And the code that I used is the code that I got directly from Facebook and Google + so…
Rick: Did you get the link I sent?
Member: I see it, yes.
Member: Cool. I’ll have to take a look at that. I’m not… you know, I’m not really worried about it that much myself but I totally understand why somebody is. So…
Rick: So if I test this code out, just copy it and put my domain name…
Member: Well, I think the first thing I would do would be go look for a solution that’s already built in. You know, you had a couple of different solutions that you’re using at the same time. I would just strive for a single workable solution and the chances are, there is a plugin that understands this issue and has resolved it.
Member: That’s something to consider anyway.
Member: But I’ll take a look at this anyway and see what I get out of it.