How to Edit the Divi Comments Section Without a Plugin

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.

jQuery(document).ready(function($){

   $('#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.

Divi Comments Section Tutorial Two
  • Google+
  • Facebook
  • Twitter

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
   if(isset($fields['url']))
     unset($fields['url']);
     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
   if(isset($fields['url']))
     unset($fields['url']);

     // 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"/>'.
     '</p>';

     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.

Divi Comments Section Tutorial One
  • Google+
  • Facebook
  • Twitter

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() {
   add_meta_box(
     'mobile_meta',
     __( 'Added Comments Data' ),
     'extend_comment_meta_box',
     'comment',
     'normal',
     '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 );
?>

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

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

Divi Comments Section Tutorial Three
  • Google+
  • Facebook
  • Twitter

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' ) )
   return;
  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');
endif;
  }
 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!

 

Previous post
Next post

4 Comments

  1. Jeune

    thanks SJ, My client just asked me yesterday to change the comment title. 😉

    Reply
  2. nick pratt

    Great little post , Divi comments fields set to h1 annoys me such a stupid little error

    Reply
  3. Tim Martin

    This is great but the second part “add anything you like…” doesn’t display. “Leave a comment…” part works great!

    jQuery(document).ready(function($){

    $(‘#comment-wrap #reply-title span’).html(‘Leave a Comment or Review’);

    $(‘#comment-wrap .comment-notes’).replaceWith(‘Add anything you like here. You\’ll need to pop a backslash before any apostophes, like I just did.’);

    });

    Reply
  4. Welbeck

    Great post! However, i want only the Comments title font style to change to Oswald. Kindly help. Thanks.

    Reply

Submit a Comment

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


Receive notifications about our new blog posts.


Don’t leave before entering to win an iPad Pro! It’s Free!

You may be too early for our Black Friday specials, but you can still enter our competition! Leave your details below and you could win an iPad Pro!

Great you've entered our giveaway! Only one step remaining! Please check your email and confirm it.