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.
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.
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.
On the Bulk Edit screen that appears, we need to click on the Comments select box and change it to Allow.
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.
1 2 3 4 5 |
.et_pb_pagebuilder_layout .page #comment-wrap { width: 80%; max-width: 1080px; margin: 0 auto 40px auto; } |
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.
25 Comments
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!
August 30, 2015
This doesn’t work. The #comment-wrap element is still not generated on the page.
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).
September 30, 2015
Hello,
i have this “false” :
instead of this “on”:
can I still replace it?
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
October 7, 2015
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
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
October 9, 2015
Doesn’t work. Comments are enabled for pages, and enabled on WP settings, still don’t show up for pages.
October 28, 2015
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.
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,
April 20, 2016
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.
January 15, 2016
cant get it to work
February 11, 2017
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.
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.
April 8, 2018
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
August 17, 2018
Could you please share how you made the comments on this page look the way they do? With the avatar, name and date on the bottom with a cool circle and everything?
August 29, 2018
It’s impressive that you are getting thoughts from this
paragraph as well as from our argument made here.
September 12, 2018
Thank you! I have puzzled over this for a couple of weeks. Appears to be working right now.
December 1, 2018
thank you
April 28, 2019
Good content. Really helpful and informative. keep sharing, I’ll follow you.
June 21, 2019
Nice post it is very helpful hope to see more
July 17, 2019
Nice post it is very good hope to see more
July 17, 2019
The only difference is that new posts will automatically have comments enabled. You won’t need to quickly edit each new post published after turning on post comments.
November 20, 2020
Thank you so much for this help, completely saved me! I was really struggling to find out why previous comments were not showing, and under pressure to restore them. Big thanks!
March 4, 2021
My problem is finally solved! Thank you so much.
May 24, 2022