A unique perspective of the Web and social media...

October 31, 2009

HOW TO: Build a XHTML Valid Wordpress Blog with DISQUS Plugin

The last couple of days, I was reading about how to get your site to rank higher in Google. There are many tweaks you can do to insure that your site is Google friendly. One of the controversial topics was whether having your pages XHTML/HTML valid helps in SEO ranking or not. It’s clear that if your site has made a mess out of the HTML code, a search engine spider might have a tough time reading and parsing your page, which might lead to errors and in turn lower ranking. So, I decided that it’s better to be safe than sorry, and started converting the entire blog to XHTML 1.0 Transitional valid.

Thoughtpick Valid XHTML

Let’s start…

The main issues targeted by this post

On the Thoughtpick blog, we have a few plugins that were causing XHTML validation issues. Mainly:

DISQUS Commenting System: At least 4 or 5 XHTML validation errors were generated by this plugin. The solutions are listed below.
Wordpress 2.8+ “role” problem, and how to fix it.
Youtube and Vimeo embed object issues: the <embed> tag is invalid for XHTML 1.0, to fix the issue, I wrote a small function.

Tools recommended

A few tools are recommended to make fixing your particular blog validation issues easier. Mainly:

The official W3C Markup Validation Service: http://validator.w3.org/
Total Validator – this tool provides an easier to read way of locating HTML syntax errors and made this task much easier: http://www.totalvalidator.com/
Wordpress admin section for editing the theme. You need to “chmod 666” your them files to be able to edit from within WP-Admin. Or a text editor and your favorite FTP client. Your call!

The fixes…

1. Fixing the broken XHTML of DISQUS

DISQUS Commenting System (version: 2.12.7121) seems to result in a bunch of errors. Keep in mind that the line numbers are just given to help you locate the line easier, but if you have the slightest difference in version, you need to look for it. Here they are and how to fix them:

1a) DISQUS has an extra “</a>”

DISQUS has an extra “</a>” on line 322 of the “disqus-comment-system/disqus.php” file. Just change the “… . $post->ID . ‘”>Comments</a>‘” to “… . $post->ID . ‘”>Comments“:

DISQUS missing tag and problematic id

1b) DISQUS uses invalid “id” tags

The same “disqus-comment-system/disqus.php” file, line 322 as well, change the “… ‘#disqus_thread” id=”‘ …” to “… ‘#disqus_thread” id=”dsq‘ …”. Just add ‘dsq‘ at the beginning of the ids to avoid the “value of attribute “id” invalid: “1″ cannot start a name” XHTML validation errors.

That’s not all, you also need to change the Javascript at line 297 to use accommodate for the ids starting with “dsq” instead of being just numerical. See the image for the changes:

DISQUS Replace 'dsq' in IDs

1c) Fixing the “&” and the “<br>”

The <br> (without the closing /) is not valid XHTML, and the & characters (instead of &) is also invalid. In the “disqus-comment-system/comments.php” file, on line 21, replace the “… echo $comment['message']); …” by the following str_ireplace() function:

DISQUS fixing the br and amps

1d) DISQUS outputs empty unordered lists (ul)

The last DISQUS issue is that if there are no comments, it displays an empty unordered list <ul id=”dsq-comments”></ul>. To fix that, we simply need to check if there are comments or not before we output that. You need to do the following changes to the <ul id=”dsq-comments”> and </ul> parts of the code on lines 7 and 25:

DISQUS fix empty unordered list error

To get the the fixed code for DISQUS Wordpress plugin version 2.12.7121, they are uploaded on pastebin: download comments.php file, download disqus.php file.

2. For Wordpress 2.8+, remove role=”search”

Wordpress 2.8+ uses the HTML5 tag “role”. To validate successfully as XHTML 1.0, you need to remove that. Just remove “role=”search”” from the wp-includes/general-template.php file. You can download the edited version of general-template.php here for Wordpress v2.8.4.

Remove role=search from general-template.php

3. Fix your header.php, index.php and footer.php to be XHTML valid

This part is custom for each blog. Mainly you need to make sure that each <tag> is closed with relevant </tag>, or using the alternative <tag /> annotation. Another point to keep in mind is that XHTML “id” attributes must start with an alphabetical letter (not a number), and all tags must be lower case (<META … /> or <BR /> will result in errors). Finally, all images must have the “alt” attribute defined.

4. Youtube embeds are invalid XHTML

Youtube embed code has an invalid XHTML tag “embed”. I wrote a function that does DOM traversal to fix this issue, without bothering your blog contributors to use a custom made function. I will discuss the code in another post, so subscribe to our feed and keep an eye out for the post. Meanwhile, the Fix Video Objects function code can be found here.

If you face any problems or have any questions, feel free to ask…

Filed under: Offbeat, Tips and How To’s — Tags: Content management systems, disqus, disqus comment plugin, DOM, fixes, google, HTML, php, PHP programming language, ranking, search engine, search engine spider, SEO, Technical communication, text editor, twitter, valid code, validation, w3c, W3C Markup Validation Service, wordpress, xhtml, xhtml 1.0, xhtml transitional, youtube — Amer Kawar @ 7:28 pm

Possibly related posts:

Amer Kawar: Founder of ThoughtPick, a 2009 start-up "aiming to make the Internet a smoother surf". Based on a profound interest in information and technology, Amer was able to nourish this interest through studying at the University of Liverpool and graduating with a Bachelor's degree in Electrical Engineering followed by a Masters degree in Computer Network Security.

Comments

Rockstarsid

Awesome article.. was searching for ways to fix my errors and disqus surely has bugs..

But one thing, I wasn't able to fix them. Some of the codes you mentioned (1b, 1c) aren't seen on my Disqus.php .. maybe coz I upgraded it recently to the newer version.

20 errors remains! Sigh.. but a great job mate :)
Amer Kawar

Hi mate. Try http://totalvalidator.com/. I just ran it on your site, and you seem to have many upper case tag definitions, duplicated "id" attributes, and a missing tag from the header section:
<meta http-equiv="Content-Style-Type" content="text/css" />

Try to fix these and let me know if it works out for you. :)
Rockstarsid

I am sorry but I don't know how to fix them and where they are located.. actually I have 2 css files. One is style.css and the other one is custom.css and is there any tool to fix these stuffs automatically?

Thanks.
Amer Kawar

I'm not aware of any tools that fix XHTML and CSS errors automatically. Why don't you use the contact form on the blog to contact me with your email address, I can try to help you out. :)
sis

hi,
I started to implement your code fix video object,
then realized there must be a plugin for this issue.
There is http://wordpress.org/extend/plugins/wp-youtube/
so i stopped implementing. With this plugin you only need to specify
tagnames like [wpyt_myvideo] then put eg. [wpyt_myvideo]U6USH61YxAY[/wpyt_myvideo]
into your posts. Afaik it does not handle comments at this time.
Btw. your blog is great, thanks for that,
the only reason i wrote this comment to improve it.
sis
sis

another plugin, that handles comments too:
http://wordpress.org/extend/plugins/smart-youtube/
you only need to use "httpv" instead of "http" in youtube links
ADSL Viettel

Thanks man, just what I was looking for. Worked like a charm Thanks so much…
audrey159

DISQUS Commenting System seems to result in a bunch of errors. What is its solution?
Amer Kawar

The tips mentioned above did not work for you?
Acai Berry

Thanks for giving the procedure of building a xhtml wordpress blog with Disqus plug in. I was looking for this since a long time.
Jake O'Callaghan

Just to let you know, Disqus causes massive CSS errors. It personally causes over 100 on my blog.
Cem Turan

I am getting this really weird error when i use your method:
http://drp.ly/8H34D
And i still get some errors in w3c validator total validator:
http://drp.ly/8H4dw
I hope you can take a look. Thanks mate! :)
Amer Kawar

Hi there, well first make sure you are using "XHTML 1.0 Transitional". I think it's either that or you have an unclosed tag before the "noscript" tag, as the noscript is an entirely valid XHTML tag, and this blog is an example.

Also, try using http://www.totalvalidator.com/index.html, it usually previews easier to read errors.

Let me know if you need more help by replying or using the contact us form on the top.

Happy New Year! :)
Cem Turan

Thank you for the answer! But the problem is that this error with multiple disqus comment counts only appears when i use your "fix". I am using XHTML 1.0 Transitional.

My site:
http://guideheaven.com
DJ NightLife

Great post! Those should be built-in inside the next Disqus release hopefully.
wholesale Electronics

disqus is very easy to use
murtiasih2020

Wow that was great post, i'm gonna try in my blog soon. Thanks
wholesale cell phone

lol~it is very useful for me ,thanks ,thanks
Menthix

Thank you very much. The Disqus XHTML errors were driving me crazy, this fixed it without any effort.
rhymeswithmilk

I've been putting off fixing the Disqus errors because I knew it would take me FOREVER to sift through all of that php. Your solutions worked like a charm. Thanks so much for this post!