How to add Disqus to your WordPress site manually

Last Updated:

Using a plugin

The simple way to install Disqus to your WordPress site is to use Disqus the Disqus Comment System plugin created by Disqus.

Maybe, there will no problem for most sites. However, I noticed that the following error occurred when double quotation marks are included in post titles:

We were unable to load Disqus. If you are a moderator please see our troubleshooting guide.

In this case, please just remove such quotes from post titles.

Install Disqus by pulling Disqus API manually

You can embed Disqus code to your WordPress blog by referring to "Universal Embed Code".

I feel that this method will improve performance slightly than other methods.

You can replace the Disqus code with the comments form code of WordPress in single.php or comments.php.

For example, in the Divi theme, once used in this blog, please search the following code in the single.php file:

<?php
if ( ( comments_open() || get_comments_number() ) && 'on' == et_get_option( 'divi_show_postcomments', 'on' ) ) {
comments_template( '', true );
}
?>

Then, replace it with the following code:

<div id="disqus_thread"></div>
<script>

var disqus_config = function () {
this.page.url = '<?php echo get_permalink(); ?>'; // Replace PAGE_URL with your page's canonical URL variable
this.page.identifier = '<?php echo dsq_identifier_for_posts($post); ?>'; // Replace PAGE_IDENTIFIER with your page's unique identifier variable
};

(function() { // REQUIRED CONFIGURATION VARIABLE: EDIT THE SHORTNAME BELOW
var d = document, s = d.createElement('script');

s.src = '//EXAMPLE.disqus.com/embed.js'; // IMPORTANT: Replace EXAMPLE with your forum shortname!

s.setAttribute('data-timestamp', +new Date());
(d.head || d.body).appendChild(s);
})();
</script>
<noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript" rel="nofollow">comments powered by Disqus.</a></noscript>

As indicated, please replace EXAMPLE with your forum shortname.

Next, please add the following code to the function file of you theme (or child theme):

// Add Disqus to WordPress manually
function dsq_identifier_for_posts($post) {
return get_the_ID() . ' ' . get_the_guid();
}

Now Disqus will appear.

You can change the layout using CSS.

Alternative method

Please add the following code to the functions.php file of your WP theme (it's desirable to install child theme):

// Embed Disqus
function disqus_embed($disqus_shortname) {
global $post;
wp_enqueue_script('disqus_embed','//'.$disqus_shortname.'.disqus.com/embed.js');
echo '<div id="disqus_thread"></div>
<script type="text/javascript">
var disqus_shortname = "'.$disqus_shortname.'";
var disqus_title = "'.$post->post_title.'";
var disqus_url = "'.get_permalink($post->ID).'";
var disqus_identifier = "'.$disqus_shortname.'-'.$post->ID.'";
</script>';
}

Now, please replace WP comments form code (in single.php or other file depending on your theme) with the following:

<?php

disqus_embed('your_disqus_shortname');

?>

If you have problems with the first method, you can embed Disqus to your WP blog using this method.

Export existing WP comments to Disqus

You can export your existing WordPress comments to Disqus. For this, you can use the Disqus Comment System plugin.

I normally disable this plugin except when I need to download my Disqus comments and store theme locally in WordPress.

Leave a Comment