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:

show-comments-on-pages-divi-no-pb

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!):

divi-show-comments-on-pages

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.

show-comments-on-pages

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:

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:

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:

show-comments-on-pages-not-centered

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:

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:

show-comments-on-pages-centered

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

comments on pages

Luis Alejandre
Latest posts by Luis Alejandre (see all)
×

Get the new Divi 4.22... With a special membership discount for our users! Get a DISCOUNT on Elegant Themes membership

Pin It on Pinterest

Share This