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

  • Anonymous

    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 :)

  • http://blog.thoughtpick.com 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:

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

  • Anonymous

    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.

  • http://blog.thoughtpick.com 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. :)

  • http://rvs.hu/abrut/referenciak/autocad-segedprogramok/ 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.
    Btw. your blog is great, thanks for that,
    the only reason i wrote this comment to improve it.
    sis

  • http://rvs.hu/abrut/referenciak/autocad-segedprogramok/ 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

  • http://rvs.hu/abrut/referenciak/autocad-segedprogramok/ 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

  • http://rvs.hu/abrut/referenciak/autocad-segedprogramok/ 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

  • http://socissues.wordpress.com/2009/11/10/htmlbasics/ Writing in the comments? Wish you could make it look different? « Social Issues and Social Change

    [...] HOW TO: Build a XHTML Valid WordPress Blog with DISQUS Plugin (thoughtpick.com) [...]

  • http://www.laptopbatteriesinc.co.uk Laptop Battery

    Why don’t you use the contact form on the blog to contact me with your email address.

  • Guest

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

  • Anonymous

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

  • http://blog.thoughtpick.com Amer Kawar

    The tips mentioned above did not work for you?

  • http://www.goarticles.com/cgi-bin/showa.cgi?C=1829429 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.

  • http://webjourney.me Jake O’Callaghan

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

  • http://GuideHeaven.com 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! :)

  • http://blog.thoughtpick.com 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! :)

  • http://GuideHeaven.com 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

  • http://www.djnightlife.com DJ NightLife

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

  • http://www.wholesaleinc.net/ wholesale Electronics

    disqus is very easy to use

  • http://www.blackberryunlocks.info/ Murti

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

  • http://www.wholesaleinc.net/ wholesale cell phone

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

  • http://menthix.net/ Menthix

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

  • http://susfour.net/?p=77 DISQUS Comment SystemのXHTMLを修正する at susfour.net

    [...] WordPressでDISQUS Comment Systemを使用するとXHTMLが不正になります。対処法と、フィックスしたプラグインファイルをThoughtpick BlogがHOW TO: Build a XHTML Valid WordPress Blog with DISQUS Pluginで紹介していました。 [...]

  • http://www.rhymeswithmilk.com 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!

  • cyberhobo

    I haven't tested fixVideoObjects thoroughly yet, but it seems to work. If so, you deserve at least a small medal for it – thanks!

  • http://www.hobbsy.com hobbsy

    Hi Amer, thanks for this great post.

    Your updated versions of comments.php and disqus.php solved the XHTML validation errors I was getting. If you're reading this Disqus please can you fix them in the default code so we don't need to hack the code :)

    Amer – are you able to work your magic on the CSS that Disqus pumps out?

    I get W3C CSS validation errors no matter which built-in Disqus stylesheet I choose:
    - Narcissus (113 errors)
    - A (71 errors)
    - B (88 errors)

    There is an option to add your own Custom CSS code, but this doesn't seem to remove the built-in CSS rules Disqus applies. Any suggestions?

    I think you are using the Disqus Narcissus theme as you have 113 CSS errors from the Disqus plugin:
    http://jigsaw.w3.org/css-validator/validator?ur...

  • http://blog.thoughtpick.com Amer Kawar

    Thanks for that :). I appreciate it.

  • http://blog.thoughtpick.com Amer Kawar

    Hi, Thanks for commenting.

    I am aware of that, but CSS is too much of a hassle with the need to test on all those browsers from IE6 to the versions of Chrome until most bugs were ironed out (v4).

    If you are in the mood to take on this challenge, the DISQUS function file+function that embeds the “disqus.css?v=2.0″ file is “disqus.php” (in my version line 222):

    function dsq_get_style() {
    echo <link rel="stylesheet" href="" . DISQUS_API_URL ."/stylesheets/" . strtolower(get_option('disqus_forum_url')) . "/disqus.css?v=2.0" type="text/css" media="screen" />;
    }

    Here, you can download the CSS file locally, and override this function (edit it directly) to link to the local file which you fix the CSS errors in.

    For me to put my head into CSS is too much of a hassle that I'd prefer to go back to WP's default comments. :)

    Hope this is helpful.

  • http://www.hobbsy.com hobbsy

    cheers Amer

    I think that disquss.css?v2.0 file contains just your own customizations, rather than the full Narcissus css file

    eg. mine has only 2 rules and reads:

    #dsq-content iframe, #dsq-popup-alert iframe {
    height: 355px;
    }

    /*
    * Narcissus theme customization
    */
    #dsq-content .dsq-header-avatar img {
    width: 32px;
    height: 32px;
    }

    Do you know the URL where I can download the original Narcissus css file in full (so I can look at how to over-ride parts of it?)

    Any idea how to over-ride for example “-webkit-border-bottom-right-radius” so that this property isn't called?

    ——

    82 #dsq-content #dsq-comments .dsq-header-avatar .dsq-drop-profile Property -webkit-border-bottom-right-radius doesn't exist : 5px 5px
    83
    #dsq-content #dsq-comments .dsq-header-avatar .dsq-drop-profile Property -webkit-border-bottom-left-radius doesn't exist : 5px 5px

    88 #dsq-content #dsq-comments .dsq-header-avatar .dsq-drop-profile Property _position doesn't exist : absolute absolute

    108 .dsq-overlay Property -moz-opacity doesn't exist : 0.8 0.8

  • http://blog.thoughtpick.com Amer Kawar

    Hi again,

    Well, the CSS file you want is: http://disqus.com/stylesheets/thoughtpickblog/d... (change the URL based on your blog's name). If you download that, store it on your server and edit the “disqus.php” function to point locally rather than to disqus.com, that should be your starting point without depending on DISQUS's hosted CSS.

    Regarding your example “-webkit-border-bottom-right-radius”, this is a CSS3 tag while your CSS is defined as CSS 2.1. You need to look into that.

    Good luck :)

  • http://www.hobbsy.com hobbsy

    Thanks again Amer

    My Disqus CSS is:
    http://disqus.com/stylesheets/adamandjoe/disqus...

    As you can see, there only seems to be 2 rules in there

    I will Google around and see if I can find out how to make my stylesheet switch into CSS3 mode rather than 2.1 (hopefully it's the same sort of method as stipulating Transitional in the XHTML first line)

  • http://blog.thoughtpick.com Amer Kawar

    Well, I think your URL is: http://disqus.com/stylesheets/hobbsy/disqus.css...

    As it turns out, CSS does not depend on versioning. So, maybe you just need to click on the “More options” button on the CSS Validator and pick v3 by yourself.

    I didn't tackle this issue on full scale yet, so you're going to need to do some researching to learn what's valid and what's not. Keep in mind, not all browsers support all the features of CSS3. For example IE8 does not support CSS3's rounded corners.

  • http://www.hobbsy.com hobbsy

    cool, I didn't spot the option to select CSS3 under More Options on the W3C CSS validator
    Still churns out that most of the code is invalid, so I'm gonna look into this:
    http://jigsaw.w3.org/css-validator/validator?ur...

    The blog I was talking about that I'm currently trying to fix errors on is
    http://www.adamandjoe.com
    http://www.adamandjoe.com/2010/01/27/the-lafta-...
    so I think the CSS stylesheet is:
    http://disqus.com/stylesheets/adamandjoe/disqus...

    http://disqus.com/stylesheets/hobbsy/disqus.css...
    ^ I think is for my main blog (linked from my Disqus profile) http://www.hobbsy.com

  • http://www.firstpagegoogleresults.com/ home builders ranking

    hi friend i agree with you for i help from here and many key word help to reach top rank.

  • http://avg-money.ru/ dizel

    Спасибо за статью, очень понравилась.

  • http://bizimsamsun.com/ Banetta Carter

    Disqus is the top commenting platform in my opinion. Not only is Facebook Connect integration nice but allowing users to also use their Twitter accounts to leave comments is awesome.

  • http://www.wirelessmaster.net/ Wendara Lewis

    Disqus is a great tool, I have it on many of my blogs already. It will only get better in the next few years..Disqus is a popular commenting platform…

  • http://www.adslviettel.com adsl viettel

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

  • http://www.laptopbatteriesinc.com/Replacement-apple-laptop-battery_c2 apple laptop batteries

    good article!

    Happy to share your blog!
    Disqus is popular and useful.Disqus is good for my work and life.I like it very much.but every coin has two back.we should use the disqus to improve our working efficient

  • http://www.laptopbatteriesinc.com.au/ well-known brand

    this was a really good article.thanks for sharing the information.disqus system is really perfect.
    it allows the blogger to have greater control with comments.

  • http://venicehotelsnear.com/ venice Cheap Hotels

    Wow amazing information. It will help me a lot in installing the DISQUS plugin in my blog. thanks a lot for the information .Keep up the good work.

  • http://www.freemixtapez.com Free Mixtapes

    can you take the plugin and apply it directly to each page or just stand alone pages.

  • http://www.naturalk9supplies.com/Brand/purebites.aspx Pure Bites Dog Treats

    I didn't tackle this issue on full scale yet, so you're going to need to do some researching to learn what's valid and what's not. Keep in mind, not all browsers support all the features of CSS3.

  • http://www.awhooty.com A Whooty

    ive had errors with it too

  • http://blog.thoughtpick.com Amer Kawar

    I just uploaded the XHTML valid DISQUS WordPress plugin files (v2.33.8752). You can download it at the bottom of the post.

    Just extract at the /wp-content/plugins/ folder, replacing the current DISQUS files or using it as a fresh install, and you're ready to go. No more DISQUS XHTML validation errors. :)

    Enjoy!

  • http://www.ankershop.ru Darren

    На этот вопрос сложно ответить.

  • http://www.gucci-outlet-store.com/ gucci

    Well , the view of the passage is totally correct ,your details is really reasonable and you guy give us valuable informative post, I totally agree the standpoint of upstairs. I often surfing on this forum when I m free and I find there are so much good information we can learn in this forum! http://www.oneor-more.com/

  • http://www.advancedraidrecovery.co.uk raid recovery

    Thanks for guidance on building valid xhtml wordpress blog with disqus.

  • http://www.broadwayseoinc.com Website SEO Company

    Nice post, we are currently switching over to disqus will save and share the post.

  • http://www.nike-air-force-one.com air force 1 shoes

    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

  • http://tuktukholiday.com cheap hotels

    Nice post thanks for your sharing.

  • http://tuktukholiday.com cheap hotels

    Nice post thanks for your sharing.

  • http://www.propertymentor.co.uk/propertydevelopmentcourses.php Bill

    Good post, just what I was looking for!

  • http://www.thaiteepak.com/pai.html ที่พักปาย

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

  • http://www.djnightlife.com DJ NightLife

    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.

  • http://www.suitusa.com/ Mens Suit

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

  • http://www.gpgsolar.com.au/ GPG Solar

    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.

  • http://socialsubmit.info social bookmarking service

    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.

  • http://6bestregistrycleaner.com/ Best Registry Cleaner

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

  • vadioli

    I was looking for thisSolution.Thanks again.Regards,

  • http://www.fireextinguishertraining.org/ Fire extinguishers training

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

  • http://security-wire.com/10/how-to-remove-thinkpoint-rogue-anti-spyware.html remove ThinkPoint virus

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

  • http://usedtransmission.blogdrive.com Used Transmission

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

  • http://eraldmariano.com erald mariano

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

  • http://security-wire.com/11/how-to-remove-spyware-protection-2010-rogue-anti-spyware.html remove spyware protection 2010

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

  • http://www.security-wire.com/08/how-to-remove-security-shield-2010-rogue-anti-spyware.html remove security shield

    I really appreciate your step by step guide.

  • http://www.laptopbatteriesinc.com/dell/dell-latitude-d420-battery dell latitude d420 battery

    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

  • http://www.laptopbatteriesinc.com/dell/dell-vostro-1510-battery Dell Vostro 1510 battery

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

  • http://www.laptops-battery.org.uk/ibm/lenovo-ibm-thinkpad-t61p-battery IBM ThinkPad T61p Battery

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

  • http://www.laptops-battery.org.uk/Compaq/Compaq-Presario-c300-Battery compaq presario c300 battery

    I can’t agree more

  • http://www.howtowinthelotteryguaranteed.com/lottery-software Lottery Software

    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

  • http://www.iphonespyreviews.org iphone spy

     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.

  • http://pulse.yahoo.com/_DBDLOJ6I4637FRY5KFKVDB4BRM Richy Raymond

    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
blog comments powered by Disqus

Latest pingbacks

Like us on Facebook

We love Tweepi

Tweepi Logo

Follow the best and unfollow the bots, with the only Twitter management tool with stats!

Big Advert

Share a post

Got an amazing campaign, web app or a social media related topic that you'd like to share with our readers?

Explore Thoughtpick

Our Archived Posts

Try Our #FF Helper App

FollowFriday Helper makes playing Twitter's #ff a piece of cake!

A brand new way to recommend tweeps based on how you tweet...

We're on Twitter

Oops, something went wrong and we could not display the latest tweets! :(

Thoughtpick by email

For more Learn Social Media by Example reviews, don't forget to subscribe to our posts by email:

©2010 thoughtpick, copyrights reserved.