Customizing the comments template

Usually, the comments section is designed to show the comments of a normal post.

While using comments for custom features such as answers, we need to customize the existing template and use our own designs by performing the following steps:

1. So, open the comments.php file inside the Twenty Seventeen theme.
2. Navigate through the code and you will find a code section similar to the following one:

        wp_list_comments( array( 
          'avatar_size' => 100, 
          'style'       => 'ol', 
          'short_ping'  => true, 
          'reply_text'  => twentyseventeen_get_svg( array( 'icon' => 'mail-    reply' ) ) . __( 'Reply', 'twentyseventeen' ), 
        ) ); 

1. We need to modify this section of code to suit the requirements of the answers list. The simplest method is to edit the comments.php file of the theme and add the custom code changes. However, modifying core theme or plugin files is considered a bad practice since you lose the custom changes on theme or plugin updates. So, we have to provide this template within our plugin to make sure that we can update the theme when needed.
2. Let's copy the comments.php file from the Twenty Seventeen theme to the root of our plugin folder. WordPress will use the wp_list_comments function inside the comments.php file to show the list of answers for each question. We need to modify the answers list in order to include the answer status button. So, we will change the previous implementation to the following in the comments.php file we added inside our plugin:

        <?php 
           global $wpwa; 
     
           if(get_post_type( $post ) == "wpwa_question"){   
                                               wp_list_comments(array('avatar_size' => 100 , 'type' => 'comment',         'callback' => array($wpwa, 'comment_list'))); 

           }else{ 
             wp_list_comments( array( 
               'avatar_size' => 100, 
               'style'       => 'ol', 
               'short_ping'  => true, 
               'reply_text'  => twentyseventeen_get_svg( array( 'icon' =>     'mail-reply' ) ) . __( 'Reply', 'twentyseventeen' ), 
             ) ); 
           }             
        ?> 

1. Here, we will include a conditional check for the post type in order to choose the correct answer list generation function. When the post type is wpwa_question, we call the wp_list_comments function with the callback parameter defined as comment_list, which will be the custom function for generating the answers list.

1. We have a custom comments.php file inside the plugin. However, WordPress is not aware of the existence of this file and hence will load the original comments.php file within the theme. So, we have to include our custom template by adding the following filter code to instance the function:

        add_filter('comments_template',  
        array(self::$instance,'load_comments_template')); 

1. Finally, we have to implement the load_comments_template function inside the main class of the plugin to use our comments template from the plugins folder:

        public function load_comments_template($template){ 
          return WPWA_PLUGIN_DIR.'comments.php'; 
        } 

In the next section, we will be completing the customization of the comments template by adding answer statuses and allowing users to change the statuses.