Adding comments to page builder pages

If you find this tweak helpful:

Beginners

Tweaking Elegant Themes involves creating a child theme and editing PHP and CSS files within a text editor. If you have never done this you may want to read our guide on creating a child theme. All tweaks are written with the assumption that you have a default installation of your theme.  Any tweaks or changes you may have previously made to your theme could affect the outcome of the tweaks on this site. All tweaks should be tested before applying to a live site. 

By default, Divi does not allow comments on pages built with the Page Builder. This tweak adds comments to those pages as well as styles them so they don't stretch all the way across the page.

There are a few ways of going about this. The first option is the "nuclear" option. By removing a small bit of code from the default page template, we can allow comments for all pages built with the page builder. Of course WordPress has the ability to disable comments on any page or post but you would have to do it individually for every page. Depending on how many pages you have and how many you would want to disable, this could be the easiest option. I'll show this method first followed by a way to turn comments only on pages you specify.

PHP

Locate the page.php file in your Divi theme folder

Copy this file into your child theme folder

Locate the following code near line 47:

<?php
                    if ( ! $is_page_builder_used && comments_open() && 'on' === et_get_option( 'divi_show_pagescomments', 'on' ) ) comments_template( '', true );

?>

All we need to do is remove the bit of code about the page builder, which says 'if the page builder is NOT being used, display comments'. We'll replace the code above with the new code below and remove that condition.

<?php
                    if ( comments_open() && 'on' === et_get_option( 'divi_show_pagescomments', 'on' ) ) comments_template( '', true );

?>

Save and close the page.php file. We still need to go into our Epanel and enable comments on pages. This is under Epanel->Layout Settings->Single Page Layout->Show comments on pages. Click the "This is Disabled" button and then save. We now have comments on all pages. But we're still not done.

The comments are not contained within the page builder so they stretch across the entire width of the page. We'll add some CSS to fix that. I'll also show you how to disable comments for any pages.

CSS

Copy and paste the following lines into your styles.css file:

.et_pb_pagebuilder_layout #comment-wrap {
width: 75%;
margin: 0 auto 40px auto;
}

If you use the Disqus commenting system, paste this instead:

.et_pb_pagebuilder_layout #disqus_thread {
width: 75%;
margin: 0 auto 40px auto;
}

Save and close the style.css file.

Now if you want to disable comments on certain pages, just go to the WordPress Dashboard, click on pages on the left, hover over a page and left click on 'Quick Edit'. You'll see 'Allow Comments' on the right-hand side with a check mark. Go through your pages and uncheck any you don't want comments on, making sure you click the Update button. You'll just have to remember to uncheck comments on any new pages you don't want comments on.

Method 2

If you have a lot of pages you don't want to go through and uncheck, or the majority of new pages will not need comments, the following method will be a lot faster.

Open your page.php file and scroll down to the same lines of code mentioned above. We're going to add an if statement that will look for a custom field to be set to true. The new code will look like this:

<?php
                    if ( ! $is_page_builder_used && comments_open() && 'on' === et_get_option( 'divi_show_pagescomments', 'on' ) ) comments_template( '', true );
                if ( (get_post_meta($post->ID, 'turn comments on', true)) === 'true') comments_template( '', true);
                ?>

Save and close the page.php file.

Now the easy part. For any pages you want to add comments to, just add a custom field called 'turn comments on' without the single quotes. Under value, type 'true', again without the single quotes. If you're not familiar with custom fields, you'll find them under the post editor when you go to edit a page from within the WordPress Dashboard. This is how it should look after adding:

Those are the two easiest methods for adding comments to pages built with Divi's Page Builder. The end result is the same, it's just a matter of whether you want to manually turn comments on for pages or manually turn them off. If you want them on every page, obviously the first method is best.

    14 Comments

  1. Thank you so much! This was detailed, helpful, clear and easy. And it helped me make a beautiful page while preserving everyone’s comments & contributions.

    Much appreciated!

    Jason Fonceca

    August 30, 2015

  2. This doesn’t work. The #comment-wrap element is still not generated on the page.

    Peter Boardman

    September 30, 2015

    • Disregard my previous comment… It turned out to be a conflict with the Owl Carousel that was also on the page (via a shortcode in a Code Divi Module).

      Peter Boardman

      September 30, 2015

  3. Hello,

    i have this “false” :

    instead of this “on”:

    can I still replace it?

    Igor

    October 7, 2015

    • the code lines did not come through on the previous message

      on my page.php file code line that you want me to replace I have the word “false” instead of “on” what does it mean? should i still replace it?

      thanks

      Igor

      October 7, 2015

  4. So, I tried the second option you suggested and the comments were added but they were added on the footer not on the body and it looks very weird.

    By the way, on the custom field I also added dsq_thread_id even if you didn’t mention that in the post but it was on the picture you posted. I tried without dsq_thread_id but it didn’t work at all. With dsq_thread_id it worked but the comments are on the footer

    igor

    October 7, 2015

    • Hey Igor. Sorry you’re having problems with this. The dsq_thread_id is automatically inserted if you install the disqus comment plugin. So no need to add that. It appears method 2 is no longer working. Possibly a WP update broke it. The comment section is added, but disabled. Looks like for now Option 1 is your only option. Again, sorry for the troubles

      Brad (admin)

      October 9, 2015

  5. Doesn’t work. Comments are enabled for pages, and enabled on WP settings, still don’t show up for pages.

    T

    October 28, 2015

  6. This is just what I was looking for. Great instructions. But as you know the second option no longer works. I got the first option to work but as someone else said it puts the comment block between the page and the footer which is not great. Is there any way to add this with a shortcode where we would WANT it on the page? Or are there other viable options? We only need comments on one page! Thanks.

    Sheila Hoffman

    January 1, 2016

    • Sheila,

      Did you find a way to remove the comment block between the header and footer and move it elsewhere on the page?

      kind regards,

      scott

      April 20, 2016

  7. Thank you for the CSS! Otherwise I would have no hair left 🙂

    Sheila, you can use the global Pages > Edit option to turn off comments on all pages in one fell swoop. Then you can enable comments as needed per page.

    Lana

    January 15, 2016

  8. I know this post is like 2 years old but people are still having problems with the Divi comments module. I applied Method 1 above but it didn’t work. I actually got the solution by searching on the Elegant Themes support site. I made a post about it (and linked back to this site) so if anyone is looking for a solution, check out my post. I hope this helps.

    Angie

    June 9, 2017

  9. I see you don’t monetize your website, don’t waste your traffic, you can earn extra bucks every month because you’ve
    got high quality content. If you want to know how to make extra money, search for: Mrdalekjd
    methods for $$$

    FirstPhillipp

    September 23, 2017

Post a Reply

Your email address will not be published. Required fields are marked *