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.

Previously this tutorial involved editing the page.php file and forcing comments on the page. This no longer appears to work in the latest version of WordPress and Divi. The following solution is more simple and tested in latest versions.

The first thing you need to do is make sure comments are turned on in WordPress for your website. Go to Settings-> Discussion and allow people to post comments on articles. Next we need to turn comments on for pages in Divi. Go to Divi-> Theme Options ->Layout -> Single Page Layout and turn on Show comments on pages.

By default, event with these options on, WordPress will not turn on comments for pages that have already been published. We’ll need to do that manually, but there is a quick way to do it.

Bulk editing pages and turning on comments

Click on Pages-> All Pages. Above your first page in the table and below the Bulk Actions dropdown on the far left side of your screen, click on the checkbox beside Title.

WordPress-Select-All-Pages

This will select all pages (up to 20 by default). If you have more than 20 pages, you can click on Screen Options and display more than 20 at a time.

WordPress-Pages-Per-Page

If you change the default 20 pages, click Apply and then go back and check the checkbox beside Title to select all pages. Next we need to click on the Bulk Actions select above the Title checkbox. Select the Edit option and then click Apply.

WordPress-Edit-All-Pages

On the Bulk Edit screen that appears, we need to click on the Comments select box and change it to Allow.

WordPress-Allow-Comments-All-Pages

Then we just need to click on the Update button in the bottom right of the Bulk Edit screen. This will turn on comments for all existing pages. You can also remove specific pages by clicking on the X to the left of individual pages before clicking Update.

Now that all pages have comments enabled, we need to add some CSS specific to Divi Page Builder pages. Without this CSS, the comments will stretch across the entire width of the screen. The following CSS restricts comments within the same limits as a Divi row.

If you have your Divi rows set to be wider than the default 1080px, you’ll want to modify the max-width to that number.

That’s it! Comments are now enabled and displaying correctly for every page on your website. By default, WordPress will not turn on comments for new pages, even with comments turned on. To allow comments for new pages, simply quick edit the new page in the Pages-> All Pages view and click on the checkbox next to Allow Comments and then click Update. Unfortunately you’ll have to do this every time you create a new page if you want comments on that page.

Adding comments to posts

The same process can be applied to posts in Divi. Make sure you turn on comments in posts. Go to Divi-> Theme Options ->Layout -> Single Post Layout and turn on Show comments on posts. Then go to Posts-> All Posts to bulk edit all existing posts and turn on comments. The only difference is that new posts will automatically have comments enabled. You won’t need to quick edit each new post published after turning on post comments.

 

    15 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

    • Thanks for sharing Angie. This tutorial was originally meant for pages, which is more difficult to enable comments for than posts. But the old method no longer works. I’ve updated with a newer method that works for pages and posts.

      Brad (admin)

      April 8, 2018

  9. I see you don’t monetize your blog, don’t waste your traffic,
    you can earn extra bucks every month. You can use the best adsense alternative for any type of
    website (they approve all websites), for more details simply search in gooogle: boorfe’s tips monetize your
    website

    BestLuke

    August 17, 2018

Post a Reply

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