How To Fix Disqus For Wordpress Themes

How To Fix Disqus For WordPress Themes

One of the major problems that some people encountered with WordPress is that when activating the Disqus plugin for the comment section, sometimes it doesn’t play nice with specific themes. If you’re having problems getting the plugin to display properly on your website, there’s an easy for it that doesn’t a lot of programming, CSS or php knowledge.

One of the biggest problems is Disqus cutting off comments. It simply looks as if there is a bar prohibiting the comment section from fully showing up to visitors. You can see an example of it below.

The cutoff is the subject of much discussion across support forums and boards. How do you fix it?

Well, there is a lengthy way to deal with it via the php files in the WordPress file editors. However, there’s a very easy fix that takes up less than five minutes of your time.

First, you’re going to want to get Microthemer if you don’t already have it. If you do already have Microthemer, just enter the visual editor and click on an article that has a few comments on it where it’s being cut off.

Scroll down to Disqus and double comment section until the iFrame is highlighted and the CSS Selector says: div#disqus_thread iframe#dsq-2.

It should look like the highlighted image below.

Click on ‘Edit Styles’ and click on ‘Behavior’. You should see one section that says ‘Overflow’. Click the drop down and select ‘visible’.

Next, click on ‘Dimensions’. Click put in 1000px in the ‘Height’ field and type in “None” (without quotation marks) in the ‘Max Height’

Press CTRL and the ‘S’ key together to save the template. The height cutoff should be removed.

Exit the visual editor, click on ‘View CSS’ and select all of the code and copy it. You can paste the code into the CSS editor, which is under the ‘Appearance’ tab in the WordPress administration editor. If you don’t have the CSS editor you’ll have to install it.

To install the editor you’ll need Jetpack installed and the CSS editor activated.

Once the code is pasted into the CSS editor just save the stylesheet and you’re all set.

For Those Who Don’t Have Microthemer

If you don’t have the Microthemer UI plugin installed or don’t feel like paying for the plugin, you can still use the Jetpack CSS editor to make the change and get Disqus working the way it was intended to.

Go into the CSS editor under the ‘Appearance’ tab and copy and paste the following CSS code into the CSS Stylesheet Editor:


/* Disqus Iframe Dsq-2 */
div#disqus_thread iframe#dsq-2 {
height: 1000px !important;
max-height: none !important;
overflow: visible !important;
}


The above code will remove the comment barrier that prevents the Disqus comments from showing up properly.

It’s as simple as that.

If you’re also having trouble with avatars showing up, you can find the following code in the Style.css file and delete it.


.js_active #main img{
visibility: hidden;
}


Alternatively, you can copy the above code and paste it into the CSS Stylesheet Editor and and replace “hidden” with “visible”.

That last tactic was found out by a user named lazlomass at Kriesi.at.