Disqus plugin breaks admin area of WordPress 3.2 beta

After installing the disqus plugin in WordPress 3.2 beta1, I began to notice severe problems in the WordPress admin area. Basically, all JavaScript related things stopped working - the sliding menus on the left did no longer respond and many other things were broken as well.

Using Opera Dragonfly, I quickly found a JavaScript error:

Uncaught exception: Syntax error, unrecognized expression: [href=edit-comments.php?page=disqus]

This is caused by a change in jQuery which was upgraded to version 1.5.2 in WordPress  3.2. Unquoted selectors are no longer allowed in jQuery 1.5.2, so this is a fairly easy fix.

 Searching wp-content/plugins/disqus-comment-system/disqus.php for the phrase, I found it in or around line 761.

mc.find('a.wp-has-submenu').attr('href', 'edit-comments.php?page=disqus').end().find('.wp-submenu  li:has('a[href=edit-comments.php?page=disqus]')')

To fix the problem, you must quote the selector for li:has(). Just add single quotes like seen in the code above.

I'm pretty certain disqus will release an updated version of their plugin soon, because it's popular and widely in use, but until then, the fix above should work and restore full admin area functionality.

HTML5 validation fix

Also, if you care about valid HTML5, there is another small problem in the disqus plugin. It is using rel attributes in <span> tags (which is not allowed in HTML5) to mark these tags for the JavaScript code that later replaces them with the  x comments and y reactions link.

Instead of rel attributes, a HTML5 conformal data-*  attribute can be used. To fix this, do the following:

• Search disqus.php for <span class="dsq-postid"  rel="[...]. There should be 2 occurrences around line 700 in the functions dsq_comments_number and dsq_comments_text.
• replace the rel tag with a data-* tag of your choice, for example data-id.
• Around line 1060 there are 2 functions, dsq_output_loop_comment_js and dsq_output_footer_comment_js. Within the loops inside these 2 functions, you will find a nodes[i].getAttribute('rel') expression. Replace the rel with the name of the data-* tag you have assigned in step 2.

This will make HTML5 validators happy without affecting the functionality of the plugin.

Note: tested in most modern browsers (Internet Explorer 8 and up), Chrome, Firefox 4, Opera 10+11.  I cannot guarantee that some older browsers may react strangely on data-* attributes. In theory, they shouldn't, but you never know...