How to Edit the Divi Comments Section Without a Plugin

September 12, 2018
how-to-edit-the-divi-comments-section-without-a-plugin Theme Builder Layout

The comments section is included at the bottom of all standard posts in Divi. By default, it includes fields for a name, email, URL and a comment. There is also some boilerplate text above the comment section that is hard-coded into the template files.

In this post, I’m going to show you how to change the text, remove and add fields to the comment section, and how to do it all without the need for any plugins.

All of the code below can be added to the functions.php or custom.js files in your child theme. For this, you’ll need to have a child theme set up and running.

If you are unfamiliar with the concept of a child theme, read the following to posts:

If you’re ready to create a child theme for your Divi website, you can use the Divi Space Child Theme Generator. If you need some help using the generator, read our post, “How to Use the Divi Space Child Theme Generator.”

How to Edit the Divi Comments Section Without a Plugin

To begin the tutorial, we’ll start with the easy bit of adjusting the comments title and description.

Editing the Comments Title and Description

We’re going to use jQuery to adjust this text, this has a few advantages: It’s easy to add, doesn’t require you to copy or move any template files and can even be done without a child theme if you prefer to place your jquery between <script> tags in the Divi Theme Options Integrations tab.


   $('#comment-wrap #reply-title span').html('<span>Choose a new title...</span>');

   $('#comment-wrap .comment-notes').replaceWith('<p class="comment-notes">Add anything you like here. You\'ll need to pop a backslash before any apostophes, like I just did.</p>');


What you’re seeing here is a document ready function with two pieces of jQuery inside, the first one replaces the contents of the span that currently hold the comments section title. The second one takes care of the description.

Looking at the image you can see that the \ backslash \ I placed into the description code isn’t visible, it just stops it from breaking the string. You’ll need to do the same thing if you use single apostrophes in your jQuery.

As mentioned before, this is best suited to a child theme JS file but will be just as at home in the Divi Theme Options > Integrations > Body section, between <script> tags.

Removing the URL Field

Next we’re going to remove the url field from our comments section. To do that, we’re going to use a function in our functions.php file, which we’re going to hook to the ‘comment_form_default_fields’ filter.

function customize_divi_comments_fields($fields){
  // Remove the website url field
     return $fields;
add_filter('comment_form_default_fields', 'customize_divi_comments_fields');

Simply running that code will have the desired effect of removing the url field from your website’s comments section. Next we’ll look at adding data.

Adding a ‘Mobile Number’ Field

For the purposes of this demo we’re going to assume you want to add a mobile number field to your comments section, though as you’ll see, the same process could be used to add almost anything.

First we’re going to adjust our function above. We’ve already used it to remove a field, now we’re going to use it to add one.

function customize_divi_comments_fields($fields){

  // Remove the website url field

     // Add a new field for mobile number
     $fields[ 'mobile' ] =
     '<p class="comment-form-mobile">'.
     '<label for="mobile">' . __( 'Mobile Number' ) . '</label>'.
     '<input id="mobile" name="mobile" type="text"/>'.

     return $fields;

add_filter('comment_form_default_fields', 'customize_divi_comments_fields');

It may look like a lot is happening there but in reality we’re just declaring a new field named ‘mobile’ and then passing some information on how it should be formatted on the page.

So now our Mobile Number field exists, but if we want it to actually save the data being put in there, we’re going to have do a little more coding…

Saving the ‘Mobile Number’ Data

Next we’re going to create a function that saves our new mobile number data. Just like we did in our first function we’re going to check if the field exists before we do anything to avoid errors.

function save_mobile_comments_data( $comment_id ) {
if ( ( isset( $_POST['mobile'] ) ) && ( $_POST['mobile'] != ’) )
 $mobile = wp_filter_nohtml_kses($_POST['mobile']);
 add_comment_meta( $comment_id, 'mobile', $mobile );

add_action( 'comment_post', 'save_mobile_comments_data');

Now our data will save, but if we want to view it we’ll have to add a meta box to our comment editing screen.

Adding a Comments Meta Box

Next, we’ll use the standard WordPress approach for adding a meta box and will hook it into our comment editing screen using the ‘add_meta_box_comment’ hook.

function add_mobile_field_in_comments_meta() {
     __( 'Added Comments Data' ),
     'low' );
add_action( 'add_meta_boxes_comment', 'add_mobile_field_in_comments_meta' );

function extend_comment_meta_box ( $comment ) {
 $mobile = get_comment_meta( $comment->comment_ID, 'mobile', true );
 wp_nonce_field( 'mobile_meta_update', 'mobile_meta_update', false );

     <label for="mobile"><?php _e( 'Mobile Number' ); ?></label>
     <input type="text" name="mobile" value="<?php echo esc_attr( $mobile ); ?>" class="widefat" />

Now we can see the data in the back end, great!

For most use cases this would be enough, but if you want to be able to edit the data from the back end too then you’ll need to add another function to check for changes made in the edit screen.

Editing Mobile Number Data

Here we’re running some checks against the data stored in our new input field, now if we make any changes to it in the editing screen then those changes will be saved.

function extend_comment_edit_metafields( $comment_id ) {
if( ! isset( $_POST['mobile_meta_update'] ) ||
       ! wp_verify_nonce( $_POST['mobile_meta_update'],
       'mobile_meta_update' ) )
  if ( ( isset( $_POST['mobile'] ) ) && ( $_POST['mobile'] != ’) ) :
 $mobile = wp_filter_nohtml_kses($_POST['mobile']);
 update_comment_meta( $comment_id, 'mobile', $mobile );
else :
 delete_comment_meta( $comment_id, 'mobile');
 add_action( 'edit_comment', 'extend_comment_edit_metafields' );

And that’s it! You’ve now changed the title and description of the comments section. You’ve also removed a field and you’ve added your own.

If you’re interested in learning more about what is possible with manipulating the comments section in this way, check out the following resources:

We want to hear from you!

It’s easy to change up the form and function of the Divi theme with just a little bit of CSS and jQuery. Have you tried to change the comments section on your Divi website? Did you find this tutorial easy to follow? If you have other tutorial requests, let us know what they are!

Please feel free to share your comments, questions or feedback below! We love receiving your feedback!

Thanks for reading!

Share this article:

eHost-square-ad Theme Builder Layout

We’re listening.

Have something to say about this article? Share it with us on Facebook, Twitter or LinkedIn:


Related Posts

how-to-configure-your-woocommerce-shipping-options Theme Builder Layout

How to Configure Your WooCommerce Shipping Options

WooCommerce is an ecommerce tool for WordPress that lets you sell digital and physical goods. If you’re selling physical goods, it’s important to understand all of the shipping options available to you and how to configure them to suit your needs. There are a lot of...

Get ALL Your SEO, WordPress & Divi News

Join Our Daily Roundup

SEO News and More

SEO News and More

Subscribe ToThe Weekly SEO Trade News Updates

Get the latest SEO, SEM and SMM marketing intel, tips and tricks from one of the best SEO Gurus online. 

Every Tuesday morning we send out an aggregated email listing all new posts on SEO Trade News.

Excellent! Now check your email to confirm your subscription.