Styling the WordPress Comments with Bootstrap

This tutorial goes over how to use the callback option in the wp_list_comments function to customize each comment within WordPress. We will also use the different comment_form options to style the WordPress comment form with Bootstrap classes. Once you complete this tutorial, your WordPress theme will have nicely styled comments with a Bootstrap inspired comment form.

Steps

  1. Create a new file called comments-callback.php in the /inc/ directory
  2. In this file add the following code:

  3. Open the functions.php file and at the bottom of the file add the following code:

  4. Open the comments.php and edit the wp_list_comments function to look like the following:

  5. Now that we have all the code in place, we need to style the comments. Open the styles.css file and scroll down to the Comments section. Add the following CSS to this section:

    Feel free to edit any of this CSS and make any changes that you would like.

  6. Save all the files and review your new comments. Now lets edit the comment form. Open comments.php
  7. In comments.php scroll to the bottom to find the comment_form function. Replace the comment_form function with the following:

    This code edits the comment form to add Bootstrap classes for styling.

  8. The complete comments.php file should now look like the following:

  9. Done!

Notes from the Video

To read more about the different wp_list_comments parameters go here.

You can also read more about the comment_form function here.

All the Bootstrap form classes that we used in the tutorial can be found here.

Feedback

Please let me know what you think of this tutorial and if you need help with anything.