Many of you Divi users were surprised about Divi not allowing to show comments on pages. I didn´t notice at the beginning because I didn´t need to show comments on pages for this site, or for any other client sites where I was using Divi. But then I started receiving comments and emails asking why is this so and how to fix it. One of my readers even said: “This issue with Divi is very annoying for me, so I hope there will be a fix soon“.
I will address this in the next update of the Divi Children plugin. However, I don´t want to make you wait until the next release of the plugin, so I´ve decided to write a little tutorial to show you how to get comments on pages working in the meanwhile.
Comments on pages work when Page Builder is not used
First of all, let´s make clear that it´s not true that Divi can´t show comments on pages in general. But it is true that there is no option to do it for pages that are built with the Divi Page Builder.
In the following image you can see the result of comments being allowed on a Divi page where the default WordPress editor was used instead of the Page Builder. It works:
Comments on pages are shown when the Page Builder is not used
What do we need to do to show comments on pages? There are a couple of settings we´ll have to activate, and this is valid for both pages using the default editor and pages using the Page Builder (although if the Page Builder is used you´ll need to do something else as we will see in a moment):
1) Allow Divi to show comments on pages via the epanel
The first thing we have to do is tell our theme that we want to show comments on pages. To activate this option, go to Appearance>Divi Theme Options to open the epanel and then activate the “Show comments on pages” option you´ll find for Single Page Layout on the Layout Settings section (don´t forget to save your changes!):
2) Activate “Allow comments” for your WordPress page
Now you need to allow comments for your pages on a case to case basis. You may want comments on some of your pages but not in some other, like on your homepage for instance.
When editing your page, you first need to make sure that the Discussion box is allowed to be shown. To do so, open the Screen Options panel and check “Discussion“.
Now find the Discussion box and check the “Allow comments” option. Remember that this setting will only be applicable to the page you are editing.
If your page is not using the Page Builder, you will be able now to see the comments section appearing on the bottom of your page as soon as you save it and preview it.
But what about pages using the Page Builder?
If you allow comments for a Divi page as we´ve just seen but you used the Page Builder to create the page, you´ll notice that comments won´t show up anyway.
I don´t know the reason why Elegant Themes decided not to allow comments in this case. I guess it has to do with styling of comments not looking good on many pages built with the Page Builder.
But what I do know is this: the code used in the page.php template file of Divi makes sure that comments will not be shown on pages when the Page Builder is used.
If you open the Divi page.php file, you will find that it includes this line:
|
1 2 3 |
<?php if ( ! $is_page_builder_used && comments_open() && 'on' === et_get_option( 'divi_show_pagescomments', 'false' ) ) comments_template( '', true ); ?> |
See that $is_page_builder_used variable? That is the culprit. It gets the true value when the Page Builder is used for the page to be displayed, or false otherwise.
If you don´t understand PHP don´t worry, I´ll translate that line to plain language for you. It says:
If the Page Builder is not used for the current page and comments are allowed for the current page and the option to show comments on pages for the Divi theme is enabled, then load the comments template on this page.
The comments template is the WordPress core piece of code responsible for showing the comments and the comments reply form, among other things. So, as soon as at least one of the conditions chained by the and operators is not satisfied, comments will not be shown for that page.
What do we need to do then to be able to show comments on pages no matter whether we use the Page Builder or not? Exactly, we just need to get rid of that Page Builder condition. In other words, we need to replace that line of code with the following line:
|
1 2 3 |
<?php if ( comments_open() && 'on' === et_get_option( 'divi_show_pagescomments', 'false' ) ) comments_template( '', true ); ?> |
That easy. But, since I am a convinced advocate of child themes, I strongly recommend you not to modify any Divi file. It will be overwritten next time you update Divi.
Instead, use your child theme. What? You are no using a child theme for your Divi site? What are you waiting for? Go download the Divi Children plugin and create one in seconds!
Now seriously, instead of editing the original page.php, copy that file and paste in your child theme folder. Then modify the new child page.php by changing the line I´ve showed you above and you´re all set. WordPress will load the modified page.php template from your child theme instead of the original one from the Divi parent theme. And comments will be shown, even on pages using the Page Builder.
But they won´t be displayed very nicely though…
The styling problem
If we just modify the page.php file as explained above without doing anything else, we will see that comments are displayed on any page we allow them to be shown. But in the case of pages which make use of the Page Builder, we´ll notice there´s a styling problem.
The comments section will take over the full width of your screen, looking like this:
Comments on pages using the Page Builder don´t look too good at first sight
Do you like that? I don´t either. Not at all. But don´t worry, it can be fixed very easily.
The solution
There is a very easy way to solve the appearance problem. We just need to force the comments area to be displayed with a maximum width value that can´t be exceeded. That and, for most users, also force it to be centered on your screen (otherwise everything except the Submit or Reply buttons would appear left-aligned).
It´s a piece of cake. All we need is to just add a little CSS to our stylesheet. Psst, not that one, not the Divi stylesheet! I told you, use a child theme!
So go open the style.css file of your Divi child theme and add these lines:
|
1 2 3 4 5 |
.page #comment-wrap { max-width: 1080px; margin: 25px auto; padding-top: 25px; } |
Of course, you can change the values shown on those lines. I´ve used 1080px as it is the default page width in Divi, and 25px for the vertical margins, which you can change to any desired value. But you need to make sure you have the auto value for the horizontal margins if you want your comments to be centered on your screen. As for the top padding, give it any value that makes the page look good to you.
Here is what you´ll get now, after the addition of those lines to your stylesheet:
It took just a little CSS to make everything look alright
It looks much better now, doesn´t it?
If you enjoyed this tutorial, make sure you subscribe to this blog. Or tweet it. Or both. Or let me know what you liked via the comments. Or everything. 🙂
- New Divi Children 3.0.10 update released - April 7, 2022
- New Divi Children 3.0.7 version for WordPress 4.9 - November 15, 2017
- Understanding Divi Children Output Mode - October 11, 2017
Well done Luis.
This has been added to my toolbox for the implementing on all new sites divi-developed. At least until you’ve incorporated into the update you’ve referenced.
Like you, 99% of the time the sites I develop utilize ‘pages’ for static-content, rather than anything dynamic or otherwise looking for comments from readers.
But ‘not’ having that ability without your suggestion isn’t so good either.
With that said– Thanks again.
You´re quite welcome Michael.
People like you make me feel always motivated to keep on working. Thanks for your encouraging feedback.
Thank you so much for your reply and this tutorial. Unfortunately I cannot make it work 🙁
Hi Helene,
If I understood your comment on my other post right, you´re not even able to show comments on posts either. I´m I right?
Hi Luis 🙂
Thanks for this hint.
On my site i use Disqus comment system – finally it works but there is a mentioned problem with styling .
Can you please help with this ?
I tried to modify #disqus_thread width but with no success.
Hi Szymon,
I´ve visited your site, modified
#disqus_threadmax-width via “inspect element” in Chrome and it does work. Did you solve it?Yes, I did 🙂 sorry for not informing you earlier…
Thanks a lot !!! You are awesome! 🙂
Hi,
Your tips is ok in site – good work,
But Project don’t work.
Yes. It dont work on Projects
Where can I find that #disqus_thread max-width ?
Works like a charm. Thanks.
FYI – the code to replace in page.php is around line 52. I should be able to use this style.css and page.php on other sites too, right? (Obviously, I have to edit the “import” line)
One question, though. The comments block is now centered on the page, how do we get it left justified? It looks awkward
Thanks,
Bob
Hi Bob,
I visited your site and it´s not centered but left aligned. However, it looks like it is kind of centered because you gave the comment wrapper a maximum width which is too narrow (540px). Increase the number of pixels for that max-width (or make it 1080px directly) and you´ll see how it goes left.
I made is small because I didn’t like the comment section spanning the whole page. Is is possible to left align it and make is, say half a page width (which is what I did at 540 px)
This comment section isn’t 1080 px
Hi again, Bob
Sorry I didn´t get what you meant. The best way to achieve that would be to add a second wrapper div having the the desired width and enclosing everything under
comment-wrap, but you need to modify a php template to do it.The problem to get the correct left alignment is this: if you specify a left margin other than “auto”, the position of your comment section will depend on the width of the screen, so it would look different on devices having different screen sizes.
There is yet another solution that would only need CSS changes: You can leave
comment-wrapas it is now (1080px wide and with auto side margins), and force the other divs enclosed by it to have your desired max-width, for example:ol.commentlist, #comment-section, #respond {max-width: 540px;
}
By the way: this comment section is narrower because the page has a sidebar, even though you don´t see it this far down the page.
Thank you so much for this find Luis, it perfectly worked on my website ! 😀
Hi Luis,
Great post and you finally convinced me to adopt a child theme. However, I followed your instructions by pasting the 2 pieces of code into the style.css sheet and nothing.
I also searched for “pagescomments” in comments.php, which you mentioned is the part of the “broken” piece of code that is preventing comments from being rendered on the discussion page -and it was nowhere to be found.
Any chance that the new Divi version needs something else to make comments reappear? If so, I’d love your help if possible!
Thanks!
Actually, just found this comment on Divi’s forum and it showed a resolved tickey -but still no success for me.
And that one is dated Dec 2nd -so the date really can’t be blamed!
Am pasting it to this thread in case it might help others:
Replace
if ( ! $is_page_builder_used && comments_open() && ‘on’ === et_get_option( ‘divi_show_pagescomments’, ‘false’ ) ) comments_template( ”, true );
with
if ( comments_open() && ‘on’ === et_get_option( ‘divi_show_pagescomments’, ‘false’ ) ) comments_template( ”, true );
from page.php file.
Hi Aiko,
That is exactly the same code change I posted. But your problem is this: you mentioned that you followed my instructions “by pasting the 2 pieces of code into the style.css“. As I explained on my post, that php line should be modified in page.php, not in the stylesheet.
Just follow my instructions and it´ll work for you:
Amazing! Thank you, Luis. I was hunting through the divi parent code to try and find out why comments.php was not included. Google searched and Elegant Themes documentation talks about “Just click on this option and comments will appear in Divi”… well they flipping well don’t if the builder has been used!
I’ve followed your instructions and now I’ve got comments appearing just where I need them.
Yay Luis!!
Glad to be of help, Dean 🙂
Hi Luis,
Very good post. I was looking for a solution long time ago.
I did as you explain but I’m encountering a small issue:
all the pages displays now the “insert your comment” form.
I’ve tried to remove the checked boxed “allow comments” and “allow trackbacks and pingbacks”
but the comments form is still appearing in the homepage.
Would you please help me?
Did you uncheck the “Allow comments” option on the Discussion box for the page(s) you don´t want comments on?
Thanks for your help Luis,
yes, at the home page, they are both unchecked (allow comments and allow trackbacks and pingbacks )
In the rest they are checked, but there is no difference, a comments box appear at all pages.
I can´t figure it out right now why that´s happening. Anyway, if you don´t want comments just on your homepage, you can use the following line in page.php instead of the one I showed on the post:
Hello Luis,
I was looking for this solution, and we are now in Divi 2.7.x
I was able to get it working following your steps, except for the amendment of the PHP file.
Thank you!
Frans
Latest version of Divi and this fix still works like a champ.
Thanks so much Luis
Hi Luis, when I go to my child theme, it doesn’t have the “single page” (page.php) option. How can I make the modifications then?
Hi, Marcio.
Like I said on the post: instead of editing the original page.php, copy that file and paste in your child theme folder. Then modify the new child page.php
So glad this post is still around! I’ve been wrecking my head trying to figure this out! Here we are in 2017 and this is still an issue with the Divi Theme! Thanks so much for explaining this problem so clearly. I’m going to use your instructions and hopefully fix my problem. Thanks again. Alanna
Unfortunately this doesn’t fix the comment “module” as it simply shows 0 comments. I’m still looking at a way to fix this but after several years I doubt a fix will be made for this issue. I mean what good does the comment module do if it simply doesn’t work. yet Elegant Themes being Elegant Themes they keep overbloating and making DiVi more visually “impressive” that chrome can’t even run it normally anymore.
I’m dissapointed that I want DiVi for my clients……
Thanks for this – it worked fine for me