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

January 28, 2021 | 0 comments

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

adding-disqus-shortcode

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.

comments

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

enable-comments

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.

Justin Arcara
Justin Arcara
Justin is an entrepreneur, web developer, and the founder of Arca Interactive that specializes in website design. Arca Interactive builds high-performing, custom websites for local and national brands.

Comments

GET STARTED

Free Website Consultation.

Ready to upgrade your digital presence and start achieving your online goals?

Recent Posts

Our Blog
Get More Sales with a Clean and Simple Web Design

Get More Sales with a Clean and Simple Web Design

In the modern-day business of sales, it’s important to make web design a priority. After all, in many cases, your site is going to be the primary storefront of your business — it’s the first impression your potential customers are going to receive before they even...

read more
How Google’s Core Vitals Update Will Impact SEO

How Google’s Core Vitals Update Will Impact SEO

In June 2021, Google Chrome updated its algorithm to include core web vitals in its ranking process. These core web vitals are constructed from load times, interactivity, and visual stability of the user as they load into the page. Their primary goal with this update...

read more