How to Get Disqus Comments Plugin to Work With DIVI Theme Builder

The Problem

For years our website blog commenting system has been using Disqus to increase reader engagement, grow audience and traffic, and monetize our content. Disqus helps publishers of all sizes engage directly with their audiences to build loyalty, retain readers, and foster thriving communities. This past fall we designed and developed our new website using our visual builder of choice, DIVI. The problem is the DIVI theme builder doesn’t play nice with the Disqus Comment System plugin. After hours of google searches and talking with DIVI support, we came to the realization that the answer to our problem didn’t exist. DIVI support said that they were aware of the issue but didn’t have a time frame on when it would be fixed. This would mean we either abandon Disqus or come up with our own solution. So of course, we developed a way to hard code the integration into our child theme.

Step 1: Install & Setup of the Disqus Plugin

This step requires that you have a disqus account so if you don’t, create one now.

1. In the left panel of your WordPress admin, select Plugins > Add New
2. Search for “Disqus” and find the plugin provided by “Disqus”.
3. Select Install Now > Activate Plugin
4. Proceed with the onscreen install instructions.
5. Log into your Disqus account, then choose the forum shortname you would like to install.

Step 2: Adding the Disqus embed code to your DIVI child theme

This step requires that you have a child theme of DIVI as well as the main DIVI theme installed. If you don’t have a child theme you can create one using this free child theme generator. We also recommend that you make sure your WP site is updated and you are running the current version of DIVI.

Once you’ve got your child theme installed and active you can add the code below to your child themes functions.php file.

function disqus_embed_code( $atts, $content = null ) {    
	return '<div id="disqus_thread"></div>
	<script>
		var disqus_config = function () {
			this.page.url = ' . "'" . get_permalink() . "'" . ';
		};

		(function() {  
			var d = document, s = d.createElement("script");
			s.src = "//SHORTNAME.disqus.com/embed.js";
			s.setAttribute("data-timestamp", +new Date());
			(d.head || d.body).appendChild(s);
		})();
	</script>';
	}
add_shortcode( 'disqus_embed_code', 'disqus_embed_code' );

Once you’ve added the code to your functions.php file you’ll need to update the Disqus SHORTNAME.

To find your Disqus shortname you can follow the instructions from this help article

Step 3: Adding the Disqus shortcode to your post template in the DIVI theme builder

Now that we have created the shortcode that will add the disqus code to your website, we need to add it to your post template in the DIVI theme builder. If you haven’t created a post template yet, you can follow these instructions on creating a site wide post template with the DIVI theme builder.

Once you’ve created your post template, add a text or code module to your template and add the shortcode disqus_embed_code. You can place this module wherever you would like the Disqus comment system to appear (typically at the bottom of your posts).

Final Step: Test & Review

If you’ve set up everything correctly you should be able to head to the front-end of your website and view one of your blog posts or articles. If successful, you should see the Disqus comment system displayed on all your posts.

Make sure your post has comments enabled or you will not see the Disqus comment system.

Final Thoughts

Hopefully anyone who is struggling with adding the Disqus comment system to the DIVI theme builder will find this article useful. We believe this fix is something the DIVI team should add to a future update, but for now this workaround has worked for us and hopefully it can help you too. If you found this useful or have any questions, please let us know in the comments below. If you need help with custom WordPress or DIVI design, please don’t hesitate to contact us.