HOW TO: Build a XHTML Valid WordPress Blog with DISQUS Plugin [Download]

Update (08 June, 2010): A copy of DISQUS WordPress plugin version 2.33.8752 with the XHTML errors fixed is available for download at the bottom of this post. Enjoy :)


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

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:

  1. The official W3C Markup Validation Service: http://validator.w3.org/
  2. 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/
  3. 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

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

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 &amp;) 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

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 unorder list error

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

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…


Update (08 June, 2010): This post is quite popular on Thoughtpick blog; so I decided to upload the fixed version of DISQUS plugin version 2.33.8752 with the XHTML errors fixed to make life easier for our readers:

Download XHTML-fixed DISQUS WordPress Plugin via local link, or RapidShare link [28KB file].

Comments and Reactions

  • I've been looking for a similar to this post. Not only extensively but also detailly. We can learn a lot from the post. I recommend to you , you can come communication in here.Let us grow up together.On the other hand ,I know some websites content is very well.you can go and see.Such as air force 1 kids

  • Nice post thanks for your sharing.

  • Nice post thanks for your sharing.

  • Good post, just what I was looking for!

  • Your blog is so informative … ..I just bookmarked you….keep up the good work!!!!

  • Disqus has changed a lot of things in version 2.41… all of those errors are fixed but there are new ones.

  • W3c Validation

    Thanks for the good information…very good blog site.

  • really??? how come? mine doesn’t have error

  • but there are some CSS problems
    it worked out just fine with wordpress 3.0

  • Andrea009

    Also you dont know PHP, CSS or JavaScript, even unknow the the basic ignorant of HTML, but you are lucky because have WordPress who have millions of plug-ins, so that you can easily create a przeprowadzki perfect blog. This plugin displays a 'tag cloud' of all the people in your community who have contributed to our blog by commenting. The more comments someone has made on your blog the bigger and bolder their tag.

  • There are many tweaks you can do to insure that your site is Google friendly.what's valid and what's not. Keep in mind, not all browsers support all the features of CSS3.

  • hello..do you know how to add full SEO-pack in wordpress?

  • vadioli

    I was looking for thisSolution.Thanks again.Regards,

  • Pay no attention to what the critics say… Remember, a statue has never been set up in honor of a critic!

  • That would be great if it really works. Thanks for your sharing!

  • I'm not finished read this yet, but it's so fabulous 'n I'll back again when I was finished my job :D

  • i am using disqus 2.61 but still encountered the empty ul. your fix did the trick!
    thanks

  • Thanks for your article! It’s very helpful for me!

  • I really appreciate your step by step guide.

  • Such a great posts and I find Disqus a very good commenting plug-in. You can always check back your comments because Disqus compiles all your entries…so, it’s easier to see and follow your comment

  • thanks Bo master writing such a good article and sharing it, I learned a lot, I hope I can see the Similar articles

  • Read many similar articles, but you write the best, thank you for sharing, I hope I can see more.

  • I can’t agree more

  • Great post. Impressive.

  • Anonymous

    It is bright that if your website has fabricated a blend out of the HTML code, a seek engine spider ability accept a boxy time account and parsing your page, which ability advance to errors and in about-face lower ranking.You can consistently analysis aback your comments because Disqus compiles all your entries.

    hp coupon code

  •  I just implemented this and it was as easy as 1-2-3. Thank you!

  • Anonymous

    XML/HTML may be helpful for generate a site traffics, Where ever submitting blog’s or passing comment, it’s meaningful for blog presentation with advance contents.

  • That’s best information to sharable for disqus version(2.12.2171) with XHTML errors issues. The official W3C Markup Validation Service are best solution for that commenting system issues.

  • Anonymous

    This is area affair generators appear into play. Affair makers will
    advice you actualize admirable searching capacity even if you are
    clueless about WP coding, and clear designing. Moreover, it will aswell
    save a lot of money that you may absorb on accepting the casework of a
    web artist in adjustment to actualize a customized Xhtml  WordPress template.

  • Benbena001

Latest pingbacks

©2010 thoughtpick, copyrights reserved.