Botvinya add comment comment reply. Fine-tuning the comment form. How to style tree comments

It's time to get serious about styling your WordPress comments. In almost all themes, they are configured by system files, which in turn limits editing of individual functions. I think many people have encountered this when they needed to make changes to comments, but could not find where exactly it was. Therefore, it would be better to transfer all the functionality to the current theme, which will give us complete freedom of control.

In this article, I've put together some interesting features that will help you improve your comments. Still, they allow you to conduct dialogues both with the site administrator and between users. Answer questions, start various discussions, in general, introduce full-fledged virtual communication. So it is necessary to pay attention to them and bring them into proper shape.

Here's what we'll do:

  • Full customization
  • Appearance design
  • Numbering of comments
  • Counting messages per user
  • Assign a status to each user
  • And other little things

We will analyze each point separately, and at the end of the article all functions will be completely assembled into one ready-made code.

Customizing Comments

In WordPress, comments are displayed through the wp_list_comments function, usually in the comments.php file. And the formation of individual functions, as well as the cycle itself, is used from the system file template comment-template.php. But in rare cases, it happens that the setting may be located in the WordPress theme, functions.php or comments.php file.

So, if your theme does not fall into a rare case and you need to make your own settings, then open the functions.php file and before the ?> sign add the following code:

If (! function_exists("my_comment")) : function my_comments($comment, $args, $depth) ( global $commentnumber; $GLOBALS["comment"] = $comment; switch ($comment->comment_type) : case " pingback" : case "trackback" : ?>

  • ", ""); ?>
  • id="li-comment-">
    comment_parent) $avatar_size = 39; echo get_avatar($comment, $avatar_size); /* translators: 1: comment author, 2: date and time */ printf(__("%1$s %2$s", "my_press"), sprintf(" %s", get_comment_author_link()), sprintf(" ", esc_url(get_comment_link($comment->comment_ID)), get_comment_time("c"), /* translators: 1: date, 2: time */ sprintf(__("%1$s %2$s", " my_press"), get_comment_date(), get_comment_time()))); ?>
    comment_approved == "0") : ?>
    __("Reply", "my_press"), "depth" => $depth, "max_depth" => $args["max_depth"]))); ?>
    ", ""); ?>

    Then in the comments.php file add a calling function:

      "my_comments")); $commentnumber = 0; ?>

    After these manipulations, your comments will be generated using a template function from the functions.php file of the current theme.

    Counting comments per user

    Using the function presented below, we can display the total number of messages left next to the commentator. Thus, you can observe how active the user is, and besides, statistics are never superfluous, especially in this regard.

    We open the functions.php file we are already familiar with and add the following code at the end before the ?> sign:

    //counting user messages function bac_comment_count_per_user() ( global $wpdb; $comment_count = $wpdb->get_var("SELECT COUNT(comment_ID) FROM ". $wpdb->comments." WHERE comment_author_email = "" . get_comment_author_email() ." " AND comment_approved = "1" AND comment_type NOT IN ("pingback", "trackback")"); if ($comment_count == 1) ( echo " 1 Message"; ) else ( echo " " . $comment_count . " Messages "; ) )

    Now all that remains is to add the call function to the location you need:

    Messages will be counted based on the user's e-mail, whether registered or not. Only comments confirmed by the site administrator are taken into account, but those in standby mode and deleted are not.

    We assign a status to each user depending on the number of comments

    This is precisely the case where statistics definitely play an important role. Since the function is built on the basis of the number of messages, and the resulting number gives the user the proper status. This, in theory, is used on every forum to show the authority of the user on a given resource.

    Open the functions.php file again and before the ?> sign add the following code:

    //user status function get_author_class($comment_author_email,$user_id)( global $wpdb; $adminEmail = get_option("admin_email"); $author_count = count($wpdb->get_results("SELECT comment_ID as author_count FROM $wpdb->AdminUseR "; if($author_count>=1 && $author_count<50 && $comment_author_email !==$adminEmail) echo "Прохожий"; else if($author_count>=50 && $author_count<100 && $comment_author_email !==$adminEmail) echo "Новичок"; else if($author_count>=100 && $author_count<250 && $comment_author_email !==$adminEmail) echo "Знающий"; else if($author_count>=250 && $author_count<400 && $comment_author_email !==$adminEmail) echo "Опытный"; else if($author_count>=400 &&$author_count<800 && $comment_author_email !==$adminEmail) echo "Бывалый"; else if($author_count>=800 && $author_count<1200 && $comment_author_email !==$adminEmail) echo "СуперПупер"; else if($author_count>Professor"; )

    And in the desired place we display the calling function:

    comment_author_email,$comment->user_id)?>

    Explanation: this function, like the previous one, is associated with the user’s email. Only here the main task is not just counting messages, but the number from and to depending on the set number. And once the user reaches it he gets a certain position. There are 7 statuses in total, plus admin and insignia for registered participants.

    Completely finished comment code

    Here we come to the end of this article. Here I was not lazy, collecting all the functions, including setting up comments, into one ready-made code. I added my own styling styles and the result was something like a mini-forum.

    Open the functions.php file and at the end before the ?> sign add the following code:

    //counting user messages function bac_comment_count_per_user() ( global $wpdb; $comment_count = $wpdb->get_var("SELECT COUNT(comment_ID) FROM ". $wpdb->comments." WHERE comment_author_email = "" . get_comment_author_email() ." " AND comment_approved = "1" AND comment_type NOT IN ("pingback", "trackback")"); if ($comment_count == 1) ( echo " 1 Message"; ) else ( echo " " . $comment_count . " Messages "; ) ) //user status function get_author_class($comment_author_email,$user_id)( global $wpdb; $adminEmail = get_option("admin_email"); $author_count = count($wpdb->get_results("SELECT comment_ID as author_count FROM $ wpdb->comments WHERE comment_author_email = "$comment_author_email" ")); if($comment_author_email ==$adminEmail) echo "Admin"; if($user_id!=0 && $comment_author_email !=$adminEmail) echo "UseR"; if ($author_count>=1 && $author_count<50 && $comment_author_email !==$adminEmail) echo "Прохожий"; else if($author_count>=50 && $author_count<100 && $comment_author_email !==$adminEmail) echo "Новичок"; else if($author_count>=100 && $author_count<250 && $comment_author_email !==$adminEmail) echo "Знающий"; else if($author_count>=250 && $author_count<400 && $comment_author_email !==$adminEmail) echo "Опытный"; else if($author_count>=400 &&$author_count<800 && $comment_author_email !==$adminEmail) echo "Бывалый"; else if($author_count>=800 && $author_count<1200 && $comment_author_email !==$adminEmail) echo "СуперПупер"; else if($author_count>=1200 && $comment_author_email !==$adminEmail) echo "Professor"; ) //customize comments if (! function_exists("wordsmall_comment")) : function wordsmall_comment($comment, $args, $depth) ( global $commentnumber; $GLOBALS["comment"] = $comment; switch ($comment- >comment_type) : case "pingback" : case "trackback" : ?>

  • id="li-comment-">
    %s", get_comment_author_link()); ?> comment_parent)( $comment_parent_href = htmlspecialchars(get_comment_link($comment->comment_parent)); $comment_parent = get_comment($comment->comment_parent); ?> @Reply for:comment_author;?>
    comment_parent) $avatar_size = 60; echo get_avatar($comment, $avatar_size); ?> comment_author_email,$comment->user_id)?>
    comment_approved == "0") : ?>
    ", ""); ?> __("Reply", "wallpress"), "depth" => $depth, "max_depth" => $args["max_depth"]))); ?>

    Now open the comments.php file, find in it the function for calling comments. It looks something like this:

    Change to this:

      "wordsmall_comment")); ?>

    The final step. Open the style.css file and at the end add the following styles:

    My_commentlist( border-top:none; ) .my_commentlist .comment( padding:0 0 15px 0; border:none; ) .my_commentlist .pingback( padding:0 0 15px 0; border:none; ) .my_commentlist .comment .children ( list-style-type: none; padding:0px; margin-left:0px;/*if you need indentation for tree-shaped boxes, put 15px*/ ) .my_commentlist .comment .children .comment( margin:15px 0 0 0; border: none; padding: 0; ) #comments ( background: #fff; ) #comments .my_commentlist ( margin: 10px 0; padding: 0; list-style: none; background: #ebf0f3; padding: 5px; ) #comments .my_commentlist .comment ( margin:0; padding: 0 0 10px; background: #fff; ) #comments .my_commentlist .my_comment-author ( display: inline; border-right: 1px solid #e0e0e0; width: 100px; float: left; margin : 0px 15px 10px 0; ) #comments .my_commentlist .commentmetadata ( float:left; ) #comments .my_commentlist p ( clear:none; color: #555; font: 14px arial; line-height: 23px; ) #comments .my_commentlist .comment-content ( margin-left: 116px; padding-right: 10px; ) #comments .my_commentlist .reply ( text-align:right; ) #comments .my_commentlist .reply a( background: #f5f5f5; border: 1px solid rgba(0, 0, 0, 0.06); border-radius: 2px; color : #515456; display: inline-block; font-size: 13px; font-weight: normal; line-height: 30px; margin-right: 15px; min-height: 30px; padding: 0 12px; text-align: center ; text-decoration: none; ) .my_commentlist .avatar( border: medium none; border-radius: 50%; float: none; margin: 5px auto; padding: 0px; display: table; ) .my_commentlist .comment-header( height: 30px; background: #DEE5EB; margin-bottom: 15px; ) .my_commentlist cite.fn( color: #444; font: bold 13px/30px arial; padding-left: 10px; ) .my_commentlist .com_date ( color: # 8ca0b5; font: normal 13px/30px arial; float: right; padding-right: 15px; ) .my_commentlist .commentnumber ( color: #8ca0b5; float: right; font: italic 13px/30px arial; padding-right: 15px; ) .my_commentlist .comment-body ( overflow: hidden; position: relative; background:#fff; ) .my_commentlist .rep-authorcom ( color: #25394e; font-size: 13px; line-height: 30px; ) .my_commentlist .edit-link a ( background: none !important; border: none !important; border-radius: 0 !important; color: #999!important; display: inline-block; font-size: 11px !important; font-weight: normal; line-height: 30px; margin-right: 5px !important; min-height: 30px ; padding: 0 !important; text-align: center; text-decoration: none; ) .com_per ( border: medium none; color: #666; display: block; font-size: 11px; text-align: center; ) .vip1,.vip, .vp, .vip2, .vip3, .vip4, .vip5, .vip6, .vip7 ( border: medium none; font: bold 13px arial; display: block; text-align: center; margin- bottom: 5px; text-decoration: none; ) .vp (color: #e82e24;).vip1 (color: #348be8;).vip2 (color: #BE005E;).vip3 (color: #2e517e;).vip4 ( color: #658a18;).vip5 (color: #00A56D;).vip6 (color: #e35d28;).vip7 (color: #99A400;).vip (color: #4c5176;font-size: 11px;margin: 0 ;)

    The code is fully working and does not cause errors, but minor changes to the CSS styles may be needed.

    This name does not bother many people, but sometimes the question arises of how to change add a comment to leave a review or the like. In this case, this article will help you. As I wrote above, I’ll show you a couple of ways.

    Method No. 1

    For the first method, you must find the file in the folder with the theme that is installed on your website comments.php. If there is one, open it and look for the array in it that is responsible for setting up and displaying the contents of the comment form. It looks something like this:

    $args = array("comment_notes_before" => "

    ", "comment_field" => "

    ", "id_submit" => "comm_subm", "label_submit" =>

    So, to this array, you need to add a new parameter with the desired value and that’s it. In our case, this is:

    "title_reply" => "Leave your review",

    As you understand - Leave your review, this is the new name instead of - Add a comment. You can add such a parameter at the end or at the beginning of the array. It will turn out something like this:

    $args = array("title_reply" => "Leave your review", "comment_notes_before" => "

    Fill out the fields below. Your email will not be published. Required fields are marked *

    ", "comment_field" => "

    ", "id_submit" => "comm_subm", "label_submit" => "Submit",); comment_form($args);

    Added to the beginning and now, on the post pages the line will be displayed - Leave your review. This method is not complicated and requires minimal effort, the main thing is to correctly define the array. But sometimes it happens that there is no comments.php file inside the theme or there is no array in it and you don’t know how to add it there correctly, then the second method will help you.

    Method No. 2

    The essence of the second method is to add a new function, which will replace the name. To do this, in the folder with the active theme, you need to find the file function.php with custom functions and in a convenient place, if you don’t know this, then at the very end before the closing PHP tag - ?> , if there is no such thing, then just add the following code at the very end:

    Function wph_change_submit_label($defaults) ( $defaults["title_reply"] = "Leave your review"; return $defaults; ) add_filter("comment_form_defaults", "wph_change_submit_label");

    Bonus

    This is essentially the same as what was done in the first method, simply, there we implemented it directly into the array, and here through a filter. After these steps, you will see a change in the name. As in the first method, you can change the text - Leave your review to the one you like. This text is provided as an example.

    I also want to suggest and draw attention to the declension of the word Comments. If your form displays the line - 1 comment published or Comments: 10. You can use the Function from the article. If you are already using it, I recommend in a line with an array:

    Array("comment","comment","comments")

    Change the names to review, review, reviews if you used this word in the methods above. this way, you will have everything the same, and not scattered, there are reviews and there are comments.

    This is the information I wanted to provide you with today. Perhaps it will be useful to someone.

    That's all, thanks for your attention. 🙂

    Recently I was delving into the files of my WordPress theme, namely the rules for the comment display template, simultaneously understanding its structure and various functions responsible for displaying comments on blog posts. As a result, I changed the standard output, created and included my own comments.php file. I decided to present the result obtained in the form of an article, since I understood this topic well, and there was quite a lot of material.

    I hope that the article will be useful for WordPress blog owners familiar with HTML, CSS and PHP.

    ***

    In WordPress, to connect a comment template to a post or page, use the comments_template() function, which takes two parameters:

    • the first is the path to the template file, by default it is comments.php in the folder with the current theme
    • the second is used to separate comments by type (regular, trackbacks and pingbacks), false by default

    Let's insert comments_template() after the entry is displayed in the post template single.php or page page.php .

    For a description and accepted arguments of the comments_template() function and others mentioned in the article, look in the WordPress Codex.

    Preparing the template

    Let's try to understand WP comment templates and make our own file for displaying comments on blog posts and pages. As examples for reference, you can take templates from standard WordPress themes. Let's create a new document in any text editor, call it comments.php and start editing.

    • In principle, you can name the file anything you like, and then write the path to this file in comments_template(), but it is better to stick to the standard name
    • You can also edit the file in the WP admin panel, by the way.
    • It is best, of course, to write code and immediately test its effect on your blog or on a local server.

    In WordPress it is possible to disable comments for individual posts, so before displaying them you need to check for “openness”:

    This is a wrapper code for our further actions. Now let's prepare a container for the comment block

    with a semantically correct class or identifier (class is of course preferable):

    Inside

    let's write a title so that your readers understand that there are comments here and nothing else, tag

    This will be just right for this:

    "

    Here we have indicated one of the WordPress functions - the_title(), the result of executing this function will be the output of the title of the current post or page. If you do not want to display the title, you can simply write “Reader Comments.”

    Next, before displaying comments, you need to make sure they exist, i.e. check, if there is, display the full list, if not, then you can show the user something like “”. This way, it will be clear to the visitor to your post/page that no one has written anything yet, and the motivating phrase “You can be the first” will increase the likelihood that they will write something to you faster.

    So, after this formulation of the problem, it becomes clear that for implementation we will need if/else constructs and a function for displaying the number of comments get_comments_number() . If the function returns 0 (zero), then we display “No comments yet...”, otherwise “Reader comments...”:

    There are no comments yet, but you can be the first

    Reader comments on the article ""

    Discussions are closed for this page

    Outputting comments

    Great, we have displayed the headings depending on the presence or absence of comments, now it is logical to display the comments themselves - the wp_list_comments() function is responsible for this. The default function wraps all comments in tags

  • , so a wrapper should be added
      with class assignment.commentlist:

      wp_list_comments() takes an array of arguments that can be used to flexibly customize the display of comments. For example, you can change the avatar size, comment reply text, and other settings by passing a keyword and value:

      $args = array("avatar_size" => 64, // avatar size 64*64px, default 32 "reply_text" => "Reply" // text of the response to the comment "callback" => "my_comments" // function for generating an external type of comment)

      The callback parameter deserves special consideration, which takes the value of the name of a custom function for displaying a comment. With its help, you can flexibly customize the appearance of each comment. This is what the standard output function looks like from the comment-template.php file:

    1. id="li-comment-">
      "); ?> %s says:"), get_comment_author_link()) ?>
      comment_approved == "0") : ?>
      $depth, "max_depth" => $args["max_depth"]))) ?>

      The easiest way is to take this function and edit it for yourself, and then call it as a custom one by writing it in the comments.php or functions.php file.

      After displaying a list of comments, you can change their appearance using CSS styles. Some parameters of wp_list_comments() are duplicated in the WP admin, Options → Discussion tab, in particular the presence of tree comments, sorting by date, etc.

      Comment submission form

      To add a comment form, use the comment_form() function. Let's add it under the list of comments:

      There are no comments yet, but you can be the first

      Reader comments on the article ""

      1. 64, "reply_text" => "Reply", "callback" => "my_comments"); wp_list_comments($args); ?>

      Discussions are closed for this page

      When called this way, comment_form() will load the standard code from the WordPress comment-template.php file. The function takes two parameters:

      Comment_form($args, $post_id);

      • $args — array of form output settings
      • $post_id — id of the post to which the function will be applied, by default the current post

      For example, let's validate form fields in HTML5 and add text hints. Let's create an array $args to enter the required settings:

      $args = array(); comment_form($args);

      You need to register the settings keys in the array:

      $args = array("fields" => apply_filters("comment_form_default_fields", $fields));

      Now we need to fill the $fields array variable, which includes the form fields. The easiest way is to take the standard WordPress code from comment-template.php and change it a little:

      "

      " . ($req ? " *" : "") . "

      ", "email" => " ", "url" => "

      " . "

      "); $args = array("fields" => apply_filters("comment_form_default_fields", $fields)); comment_form($args); ?>

      Here, the values ​​of the author , email and url parameters are the html code of the “Name”, “Mail” and “Site” fields, respectively. These values ​​must be edited.

      For the fields we need to add the following attributes:

      • required - makes the fields mandatory, add it for the “Name” and “Site” fields
      • placeholder - adds a text tooltip to the field
      • pattern="(3,)" for the "Name" field - indicate the name in letters of the Latin or Russian alphabet and a length of at least 3 characters
      • type="email" for the "Mail" field - this will add HTML5 email validation
      • autocomplete - enables autocomplete for fields
      • type="url" for the "Site" field

      Remember that the new HTML5 attributes will not work in older browsers. Those browsers that do not understand the new field types will simply display them as text, i.e. .

      In addition, for my blog I swapped tags here and there, added classes for styling, and as a result I got the following code for the $fields array:

      "

      ", "email" => " ", "url" => "

      "); ?>

      We have changed the data entry fields. Now let’s edit the comment form itself

      " ?>

      This is standard WordPress code, I just modified it a little - I added a text hint and wrote an additional class for styling.

      This is what I ended up with using CSS styling:

      WordPress Comment Form Using HTML5 Attributes

      Bottom line

      Finally, I’ll post my resulting comments.php code:

      readers of the article ""

      • Leave the first comment - the author tried
      1. id="li-comment-">
        "); ?> %s writes:"), get_comment_author_link()) ?>
        comment_approved == "0") : ?>
        $depth, "max_depth" => $args["max_depth"]))) ?>
        "Reply", "callback" => "verstaka_comment"); wp_list_comments($args); ?>
      "

      ", "email" => " ", "url" => "

      "); $args = array("comment_notes_after" => "", "comment_field" => "

      ", "label_submit" => "Submit", "fields" => apply_filters("comment_form_default_fields", $fields)); comment_form($args); ?>

      Discussions are closed for this page

      FAQ about comments

      How to highlight author and user comments?

      Sometimes it is very convenient to set a separate appearance for author’s comments; there are even special plugins for this. However, you can do without any plugins - simply by writing styles for the .bypostauthor class in a css file. Similarly, you can set styles for user comments - .bypostuser:

      How to style tree comments?

      To enable tree comments, you need to go to the WP admin, Settings → Discussion → Allow tree comments. Now child comments will have a tree structure; they can be given individual styles, for example, indentations. All you need to do is set the rules in css for the list with the class.children:

      Commentlist .children ( padding: 0 0 0 40px; /* left padding for child comments */ )

      Styles for even and odd comments

      WordPress by default gives odd comments a class of .even and even comments a class of .odd . It's easy to set your own styles through these classes:

      Commentlist .even ( /* styles for odd comments */ ) .commentlist .odd ( /* styles for even comments */ )

      How to close comments on a separate post?

      It’s very easy - go to the page for writing a post, Screen Settings → Discussions, a Discussions block appears under the post field, uncheck the Allow comments item.

      • When creating your own comments template, you can use comments.php files from standard and other paid and free WordPress themes
      • An alternative to standard comments is third-party comment form plugins, for example the popular DISQUS
      • It is quite possible to edit the code directly in the comment-template.php file itself, however, if WordPress is updated, all the code will be overwritten - you will have to edit again
      • Remember, there is no perfect comment template.

      Help the project

      65 votes, average: 4,46 out of 5)

      It's been a while since I wrote anything about WordPress. Therefore, today I will share with you how you can manually change the comment form in WordPress. I think that this knowledge can be useful to any novice blogger, because the commenting form is sometimes the only means of communication between visitors and the author. Don't pass by :)

      Before we begin any manipulations with the code, I want to warn you in advance that we will be editing the files of WordPress itself, and not the theme files. Yes, it may seem dangerous to some, pointless to others, and simply won’t be liked by others :) But I did it exactly like that and I didn’t have any problems. I advise you to make a backup of the file you are editing before starting.
      I warned you about safety, now I want to show the result I arrived at.


      As we can see, the line “Your e-mail will not be published” has been removed. Required fields are marked *". There is no need to consider visitors as brainless idiots. They already understand what needs to be filled out and what not. I also hid the names of the fields inside the fields themselves. What are these bold notes for? Most visitors, even without field names, can “by eye” determine which one belongs to what. But internal hints must still be present. Well, the caption to the comment field has lost its unnecessary boldness. In my opinion, it has become much better and freer.

      So let's change everything quickly! ;)
      We go to the folder of our site and find the file wp-includes/comment-template.php in it. We are looking for line 1522 in it, yes, that’s it. How I found it myself is a whole story, I’ll tell you about it a little later :)
      So, open the file for editing and go to line 1522. Now it and the following (up to 1529) are approximately like this:

      $fields = array("author" => "

      " . "" . ($req ? " *" : "") . "

      ", "email" => " ", "url" => "

      " . "

      ",);

      How simple and clear everything is. It’s enough just to cut out all the excess and add a little. The parameter will be added

      Placeholder="Help text" !}

      This option allows you to display any text inside fields. We use it to display hints:

      "

      " "

      " "

      "

      We will delete the lines:

      "

      " . "" . ($req ? " *" : "") "

      "

      They are responsible for displaying captions above the fields.
      As a result of ALL these manipulations, we get the following:

      $fields = array("author" => "

      ", "email" => "

      ", "url" => "

      ",);

      All that remains is to remove the stupid hint “Your e-mail will not be published. Required fields are marked *". To do this, delete the line (approximately 1537):

      "comment_notes_before" => "

      " . __("Your email address will not be published.") . ($req ? $required_text: "") . "

      ",

      That seems to be all, now our form has become a little more attractive. I hope this information is useful to someone :)

      Subscribe, comment, I will be glad to receive any adequate comments. Maybe I don’t know something myself and it can be done differently, share your thoughts.

      Hello!

      Today's article is dedicated to WordPress comment output. We will look at which files and functions contain the code responsible for displaying comments. What needs to be done to be able to make changes to this WordPress blog block.

      Let me start with the fact that every WordPress template (theme) has a file comments.php The full path to it from the root directory is: /wp-content/themes/template_folder/comments.php

      Exactly comments.php is generally responsible for the comment block in a specific WordPress theme.

      What is most often contained in comments.php:

      – check password protection of comments

      – checking whether comments are allowed on the article

      – checking for comments and displaying the corresponding text (“No comments...” or “N comments left”)

      calling the comment output function – wp_list_comments()

      – output of navigation (paging) when posting comments on multiple pages

      – displaying a form for leaving comments on the article

      Here it is clear that you can define your classes or change properties in style.css for already existing classes. Thus, you can change the appearance of the form for leaving comments and texts before the list of comments and after this list or form. But The output styles of the comments themselves cannot be changed in comments.php.

      When I listed the contents of the file comments.php, then he specifically emphasized that in comments.php there is only a call to the function for displaying comments wp_list_comments(), but not the conclusion itself. Those. V comments.php you will not find (at least in the latest versions of WordPress and with the right approach to template development): displaying the name of the author of the message and a link to his website, displaying the author’s avatar, displaying the date and time of the comment, the comment itself and the “reply” link.

      How to change styles in the comment list?

      First, you need to find out whether your template uses a custom function to display comments.

      The wp_list_comments() function can be called without a callback (callback is a callback function) and with a callback.

      1. Call wp_list_comments without a callback:

      Those. in the function parameters (what is in brackets after the name) there is no parameter called ‘callback’.

      If in comment.php your template is such a situation, then this means that this theme does not have its own (user) function for displaying comments and for this a standard template (template from WordPress core) is used. It is located in the file. And since, then In this case, we won’t be able to change the comment display styles until we move on to the second option.

      2. Call wp_list_comments with a callback:

      "type=comment&avatar_size=48&callback=custom_comment") ; ?>

      callback=custom_comment indicates that to display comments we have a custom function custom_comment , the code of which, roughly speaking, we pass as a parameter for execution to the standard function wp_list_comments. But we are no longer interested in the technical side of this issue, but in the presence in the template of its own function for displaying comments. The code for this function is located in .

      Exactly in this custom function custom_comment and the code responsible for the appearance of an individual comment, and therefore all comments as a whole, is located.

      The custom function code is intuitive. It typically uses the following standard WordPress features:

      get_comment_author_link()– receives an html link to the website of the author of the current comment;

      get_comment_date()– gets the date of the comment;

      get_comment_time()– gets the comment time;

      comment_text()– displays the text of the comment;

      You can find snippets with these functions in the code and change the appearance of certain elements by framing them in divs or spans and assigning specific style classes.

      For example, in the custom function code, a fragment of the avatar output:

      < div class = "comment-author" >

      < / div >

      Now it remains in style.css set the desired properties to the class comment-author. I will look at specific examples of changing styles in more detail in one of the following articles.

      Now you may be wondering: “ What if my template doesn't have a custom comment function?

      Answer: you need to create it.

      The easiest option is to copy the code of a standard WordPress function comment().

      Instructions for creating a custom function to display comments:

      1. Open the file /wp-includes/comment-template.php and find the function in it comment().

      Here is the beginning of her description

      /** * @since 3.6 * @access protected * * @param object $comment Comment to display. * @param int $depth Depth of comment. * @param array $args Optional args. */ protected function comment($comment, $depth, $args) (

      * @since 3.6

      * @access protected

      * @param object $comment Comment to display.

      * @param int $depth Depth of comment.

      * @param array $args Optional args.

      protected function comment ($comment, $depth, $args) (

      2. Copy the entire function body comment().

      You need to copy the code fragment from the beginning of the description shown in step 1 to the closing curly brace } and the following similar description of another function