I haven't written anything about WordPress for a long time. Therefore, today I will share with you how you can manually change the commenting form in Wordpress. I think that this knowledge can be useful to any novice blogger, because the form of commenting is, at times, the only means of communication between visitors and the author. Don't pass by :)
Before we start any manipulations with the code, I want to warn you in advance that we will edit the files of WordPress itself, not the theme files. Yes, it may seem to someone dangerous, to someone senseless, someone simply will not like it :) But I did it that way and I did not have any problems. I advise you to make a backup of the edited file before starting.
I warned about safety, now I want to show the result I came to. 
As we can see, the line “Your e-mail will not be published. Required fields are marked with * ". Don't think of your visitors as brainless idiots. They already understand what needs to be filled in and what not. I also hid the field names inside the fields themselves. What are these fat records for? The majority of visitors already without the names of the fields can "by eye" determine which refers to what. But internal hints should still be present. Well, the caption to the comment field has lost its unnecessary fatness. In my opinion, this has become much better and freer.
So let's change everything as soon as possible! ;)
Go to your site folder and find the wp-includes / comment-template.php file in it. We are looking for line 1522 in it, yes yes it is her. 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 she and the following (until 1529) are approximately the same:
$ fields = array ("author" => "
"," email "=>"". ($ req?" *" : "") . "
"," url "=>"" . "
",);How simple and clear everything is. It is enough just to cut out all unnecessary and add a little. The parameter will be added
Placeholder = "(! LANG: Tooltip text" !}
This parameter allows you to display any text inside the 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 silly hint “Your e-mail will not be published. Required fields are marked with * ". To do this, delete the line (about 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 any adequate comments. Maybe I don't know something myself and you can do it differently, share your thoughts.
For many, this name does not bother, 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 will show you a couple of ways.
Method number 1
For the first method, you must find the file in the folder with the theme that is installed on your site comments.php... If there is one, open it and look for an array in it that is responsible for setting and displaying the content 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, these are:
"title_reply" => "Leave your review",
As you understand - Leave your review, this is the new name instead of - Add comment. You can add such a parameter to the end or to the beginning of the array. It will turn out something like this:
$ args = array ("title_reply" => "Leave your review", "comment_notes_before" => "
Please complete the fields below. Your e-mail 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 posts 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 do not know how to add it there correctly, then the second method will help you.
Method number 2
The essence of the second method is to add a new function that will change 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 at the very end, add the following code:
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 the same thing, in fact, what was done in the first method, simply, there we injected directly into the array, and here through the 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, 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 you have a line in the form - Published 1 comment or Comments: 10. You can use the Function from the article. If you are already using it, then I recommend in the line with the array:
Array ("comment", "comment", "comments")
Change titles to review, review, reviews, if you have used this word in the methods above. Thus, 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 today. Perhaps it will be useful to someone.
That's all, thank you for your attention. 🙂
Hello!
Today's article is about displaying WordPress comments... We will consider in which files and functions the code responsible for displaying comments is located. What you need to do to be able to make changes to this WordPress blog block.
To begin with, each WordPress template (theme) has a file comments.php The full path to it from the root directory: /wp-content/themes/template_folder/comments.php
Exactly comments.php is responsible for the general comment block in a specific WordPress theme.
What is most often contained in comments.php:
- checking the protection of comments with a password
- checking if comments on the article are allowed
- checking for the presence of comments and displaying the corresponding text (“There are no comments ...” or “There are n comments left”)
– call the function of displaying comments - wp_list_comments ()
- display of navigation (paging) for multi-page comments
- output of the form for leaving comments on the article
It is clear here that you can set your classes or change properties in style.css for already existing classes. Thus, you can change the appearance of the comment and text form before and after the comment list or form. But the output styles of the comments themselves in comments.php cannot be changed.
When I was listing the contents of the file comments.php, then specially noted underlining that in comments.php there is just a call to the function for displaying comments wp_list_comments () but not the output itself. Those. in comments.php you will not find (at least in the latest versions of WordPress and with the right approach to template development): displaying the author's name and a link to his site, displaying the author's avatar, displaying the date and time of the comment, the comment itself and the "reply" link.
How do you change the styles in the comment list?
First, you need to find out if your template uses a custom function to display comments.
Calling the wp_list_comments () function is possible without a callback (callback) and with a callback.
1. Calling wp_list_comments without a callback:
Those. in the parameters of the function (what is in parentheses after the name) the parameter with the name 'callback' does not appear anywhere.
If in comment.php your template is such a situation, then this means that this topic does not have its own (user-defined) function for displaying comments and it uses a standard template (template from WordPress core). It is located in the file. And since, then in this case, it will not work to change the display styles of comments until we move on to the second option.
2. Calling wp_list_comments with a callback:
"type = comment & avatar_size = 48 & callback = custom_comment") ; ?> |
callback = custom_comment indicates that we have a custom function to display comments 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 is located that is responsible for the appearance of an individual comment, and therefore all comments as a whole.
The custom function code is intuitive. It typically uses the following standard WordPress functions:
get_comment_author_link ()- gets an html link to the site 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 code and change the appearance of certain elements by wrapping them in divs or spans and assigning specific style classes.
For example, in the code of a custom function, a fragment of an avatar display:
< div class = "comment-author" >
< / div > |
Now left in style.css set the desired properties to the class comment-author... More specific examples of changing styles will be discussed in one of the following articles.
Now you may be wondering: “ What if my template doesn't have a custom function to display comments?”
Answer: you need to create it.
The easiest option is to copy the code of the standard WordPress function comment ().
Instructions for creating a custom function for displaying comments:
1. Open the file /wp-includes/comment-template.php and find the function in it comment ().
Here is the beginning of its 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 whole body of the function comment ().
You need to copy a piece of code from the beginning of the description shown in paragraph 1 to the closing curly brace } and the following similar description of another function
Recently I dug into the files of my WordPress theme, namely the rules for the template for displaying comments, along the way 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 draw up the result obtained in the form of an article, since I understood this topic well, and I got quite a lot of material.
Hope this article is helpful for WordPress blog owners who are 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 serves to separate comments by type (regular, trackbacks and pingbacks), by default false
Let's insert comments_template () after post output in single.php post template or page.php page.
For a description and accepted arguments for the comments_template () function and others mentioned in this article, see the WordPress Codex.
Preparing the template
Let's try to figure out the WP comment templates and make our own file to display comments on blog posts and pages. As examples for your reference, you can take templates from standard WordPress themes. Let's create a new document in any text editor, name it comments.php and start editing.
- In principle, you can name the file whatever 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 check its action 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
Inside
will be just right for this:
"
Here we have specified one of the WordPress functions - the_title (), the result of this function will be the output of the title of the current post or page. If you don't want to display the title, you can simply write "Reader Comments".
Further, before displaying comments, you need to make sure they are present, i.e. check, if there is - display the full list, if not - then you can show the user something like "". So the visitor of your post / page will understand 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 such a statement of the problem, it becomes clear that for the implementation we need the if / else constructions and the get_comments_number () function for displaying the number of comments. If the function returns 0 (zero), then we display "No comments yet ...", otherwise "Reader comments ...":
No comments yet, but you can be the first
Readers' comments on the article ""
Discussions are closed for this page
Displaying comments
Great, we have displayed headers depending on the presence or absence of comments, now it is logical to display the comments themselves - the function wp_list_comments () is responsible for this. The default function wraps all comments in tags
- with the assignment of the.commentlist class:
- id = "li-comment-">
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 the list of comments is displayed, you can change their appearance through CSS styles. Some of the wp_list_comments () parameters are duplicated in the WP admin panel, the Options tab → Discussion, in particular the presence of tree-like comments, sorting by date, etc.
Post comment form
To add a comment form, use the comment_form () function. Let's add it below the list of comments:
No comments yet, but you can be the first
Readers' comments on the article ""
- 64, "reply_text" => "Reply", "callback" => "my_comments"); wp_list_comments ($ args); ?>
Discussions are closed for this page
With this call, 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 - the id of the post to which the function will be applied, by default the current post
Let's, for example, do HTML5 validation for form fields, add text hints. Let's create an array $ args to enter the desired settings:
$ args = array (); comment_form ($ args);
It is necessary to register the settings keys in the array:
$ args = array ("fields" => apply_filters ("comment_form_default_fields", $ fields));
Now we need to fill in the $ fields array variable that includes the form fields. The easiest way is to take the standard WordPress code from comment-template.php and modify it a bit:
"
"," email "=>"". ($ req?" *" : "") . "
"," 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 fields "Name", "Mail" and "Site", respectively. These values need to 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 hint to the field
- pattern = "(3,)" for the "Name" field - specify 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. Browsers that don't understand the new field types will simply render them as text, i.e. .
In addition, for my blog, I swapped the tags here and there, added classes for styling, 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 slightly modified it - added a text hint and added an additional class for styling.
Here's what I ended up with using CSS styles:
WordPress comment form using HTML5 attributes
Outcome
Finally, I will strip off my resulting comments.php code:
readers of the article ""
- Be the first to comment - the author tried hard
- id = "li-comment-">
comment_approved == "0"):?>"Reply", "callback" => "verstaka_comment"); wp_list_comments ($ args); ?>
$ depth, "max_depth" => $ args ["max_depth"])))?>
Discussions are closed for this page
FAQ on comments
How do I 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 by simply writing the styles for the .bypostauthor class in the css file. Similarly, you can set styles for user comments - .bypostuser:
How do I style tree comments?
To enable tree comments, you need to go to the WP admin panel, Options → Discussion → Allow tree comments. Now child comments will have a tree-like structure, they can be styled separately, such as indentation. All you need to do is set the rules in css for the list with the .children class:
Commentlist .children (padding: 0 0 0 40px; / * left padding for child comments * /)
Styles for even and odd comments
WordPress by default gives odd comments the class.even, even.odd. It is easy to set your own styles through these classes:
Commentlist .even (/ * styles for odd comments * /) .commentlist .odd (/ * styles for even comments * /)
How do I close comments on a single post?
It's very easy - go to the post writing page, Screen Settings → Discussions, the Discussions block appears under the post field, deselect the Allow comments item.
- When creating your own comment template, you can use comments.php files from standard and other free and paid WordPress themes
- An alternative to standard comments are third-party comment form plugins, for example the popular DISQUS
- It is quite possible to edit the code right 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
66 votes, on average: 4,47 out of 5)There are several types of content in WordPress such as posts, pages, comments. WordPress is a very flexible platform that allows you to customize the main types of content to suit your site. You can change the appearance and functionality. In this tutorial, we'll show you how to change the behavior and appearance of comments on a WordPress site.
Step 1. Understanding the function comment_form and its arguments
Consider the WordPress function comment_form. She is responsible for displaying the comment form, which is displayed on the page or post. The call to this function can mainly be found in the file comments.php in the theme folder. This file is included in various places, for example, in files single.php and page.php, directly or via a call to the comments_template function.
The function description can be found in the WordPress codex.
If you use the comment_form function to render the form, it will be rendered using the default parameters and will contain fields such as name, email (both fields are required), website, and comment content. In the default Twenty Eleven theme, the form will look like this.
Some important arguments to the comment_form function:
- fields - it can be used to control the display of fields in the comment form.
- comment_notes_before and comment_notes_after are used to display information before and after the form.
- title_reply - used to change the title of the reply, which by default is ‘Leave a Reply’.
- label_submit - used to change the text on the submit button.
Step 2. Customize the comment form using the function comment_form
Now let's customize our comment form by passing arguments to the comment_form function.
In case we need to customize the fields in the comment form, we need to pass their list to the comment_form function. By default, the function uses the following list of fields:
$ fields = array ("author" => "
"," email "=>"". ($ req?" *" : "") . "
"," url "=>"" . "
",);If we need to remove a field, for example website, we just need to exclude it from the array and pass the array to the comment_form function.
$ commenter = wp_get_current_commenter (); $ req = get_option ("require_name_email"); $ aria_req = ($ req? "aria-required =" true "": ""); $ fields = array ("author" => "
"," email "=>"". ($ req?" *" : "") . "
",); $ comments_args = array (" fields "=> $ fields); comment_form ($ comments_args);
In addition, we will also change the name of the form to ‘Please give us your valuable comment’, and the caption on the button to ‘Send My Comment’.
To complete the task, pass the following arguments to the comment_form function:
$ commenter = wp_get_current_commenter (); $ req = get_option ("require_name_email"); $ aria_req = ($ req? "aria-required =" true "": ""); $ fields = array ("author" => "
"," email "=>"". ($ req?" *" : "") . "
",); $ comments_args = array (" fields "=> $ fields," title_reply "=>" Please give us your valuable comment "," label_submit "=>" Send My Comment "); comment_form ($ comments_args);Now the comment form will look like this:
Step 3. Removing fields from a form using a hook
Also WordPress comment form can be changed using hooks and filters. This setting can be especially useful when working with a plugin, when you need to customize several elements, but not change the theme files. Filter for adding or removing fields from the form - ‘comment_form_default_fields‘
Let's remove the URL field using a filter. The given code can be used in a plugin or in a file functions.php active topic.
Function remove_comment_fields ($ fields) (unset ($ fields ["url"]); return $ fields;) add_filter ("comment_form_default_fields", "remove_comment_fields");
Step 4. Add data to the comment form using the hook
We can add fields to the form using the ‘comment_form_default_fields’ filter. Add the author's age field using a filter and save this field with additional data and display it in the comments.
Add the field as follows:
Function add_comment_fields ($ fields) ($ fields ["age"] = "
" . "
"; return $ fields;) add_filter (" comment_form_default_fields "," add_comment_fields ");#respond .comment-form-author label, #respond .comment-form-email label, #respond .comment-form-url label, #respond .comment-form-age label, #respond .comment-form-comment label ( background: #eee; -webkit-box-shadow: 1px 2px 2px rgba (204,204,204,0.8); -moz-box-shadow: 1px 2px 2px rgba (204,204,204,0.8); box-shadow: 1px 2px 2px rgba (204,204,204, 0.8); color: # 555; display: inline-block; font-size: 13px; left: 4px; min-width: 60px; padding: 4px 10px; position: relative; top: 40px; z-index: 1;)
Now our comment form will look like this:
Age is now stored as additional information. You need to use the hook at 'comment_post':
Function add_comment_meta_values ($ comment_id) (if (isset ($ _ POST ["age"])) ($ age = wp_filter_nohtml_kses ($ _ POST ["age"]); add_comment_meta ($ comment_id, "age", $ age, false); )) add_action ("comment_post", "add_comment_meta_values", 1);
Once the data has been saved, it can be displayed in a comment as follows:
comment_ID, "age", true); ?>
Step 5. Customizing Comments for Specific Post Types
Sometimes you only want to use fields in comments for certain post types. Let's change the code to display the age field only for a record of type book:
Function add_comment_fields ($ fields) (if (is_singular ("books")) ($ fields ["age"] = "
" . "
";) return $ fields;) add_filter (" comment_form_default_fields "," add_comment_fields ");Step 6. Create a callback function to display comments
The wp_list_comments function is used to display comments in posts. The WordPress codex describes the function in detail.
wp_list_comments has a ‘callback’ argument in which you can define a function to be called when a comment is displayed.
In Twenty Eleven theme in file comments.php you can find the line:
Wp_list_comments (array ("callback" => "twentyeleven_comment"));
Let's change it to:
Wp_list_comments (array ("callback" => "my_comments_callback"));
The my_comments_callback function will be called for every record.
Step 7. Styling comments
We will now change the style of the comment a little. We will just display the content of the record and the age field that we added earlier. We will also change the background color for the comments.
Function code 'my_comments_callback':
Function my_comments_callback ($ comment, $ args, $ depth) ($ GLOBALS ["comment"] = $ comment;?>
- id = "li-comment-">
comment_ID, "age", true); ?>
__ ("Reply ↓", "twentyeleven"), "depth" => $ depth, "max_depth" => $ args ["max_depth"]))); ?>
wp_list_comments () accepts an array of arguments, with which you can flexibly customize the display of comments. For example, you can change the size of the avatar, the text of the reply to the comment, and other settings by passing the keyword and value:
$ args = array ("avatar_size" => 64, // avatar size 64 * 64px, default 32 "reply_text" => "Reply" // reply text to the comment "callback" => "my_comments" // function of forming external kind of comment)
The callback parameter, which takes the value of the name of a custom function for displaying a comment, deserves a separate consideration. With its help, you can flexibly customize the appearance of each comment. This is how the standard output function from the comment-template.php file looks like:
Change the background color as follows:
Commentlist> li.comment (background: # 99ccff; border: 3px solid #ddd; -moz-border-radius: 3px; border-radius: 3px; margin: 0 0 1.625em; padding: 1.625em; position: relative;)
