In this tutorial, I am going to demonstrate how you can make a very nice enhanced version of the plain old comments section for your current WordPress theme. This is an advanced WordPress tutorial. You should have a decent knowledge of WordPress, PHP, HTML and CSS before you attempt an advanced tutorial. You will learn how to customize the text of the comments that have been made as well as the comments form people use to enter new comments. I will also describe a method to hide and show comments after a post with a click of your mouse. The goal of this tutorial is for you to be able to turn your ordinary WordPress comments section on your posts page to something that looks more like the image below:
The first thing we need to do is locate the files we will need to modify in order to make the above image a reality on your WordPress blog. There are a few files you will need to edit to make this happen. Please start by opening each of these files in your favorite text editor for coding. I like to use Notepad++ because you can open them all in tabs at the same time. The first file you need to open will be style.css located in your theme’s main directory. For those of you that don’t know where that is, open your FTP client, go to the folder that your WordPress blog resides in and open it. Navigate to wp-content/themes/your-theme where your-theme is whatever theme you have active on your installation of WordPress. Also in your theme’s main directory, grab the file named comments.php as well. You may or may not need this. We will find out shortly.
Next, go to your WordPress main directory. This is the folder that holds the wp-contents and wp-includes folders among others. In this directory, locate the file named wp-comments-post.php. After that, from the same directory, open the folder named wp-includes and open the file named comment-template.php. Now you have what you need to start making changes to your WordPress theme’s comment section. Here is a list for quick reference:
First thing we need to do is determine which files you need to edit. Some themes will require you to edit comments.php while other will not. Here is simple test you can do to figure out if you need to edit your comments.php or not:
In comments.php search for the text “will not be published” and change the text to something that is more easily recognizable like “XXXXXXXXXXXXXXXXXXXXXXXX”.
Re-upload comments.php to your server in your WordPress current theme’s directory.
Now go view your blog and see if you find the X’s in your comments form or not. If you see them, then you know you will need to edit that script, otherwise, you can close it because you won’t need it. Be sure to also check any other pages you want to have comments on as well because they may use different comments templates. Many themes use the default comments script in the main WordPress directory also which we will discuss shortly.
Now determine if you need to edit comments-template.php and wp-comments-post.php file in a similar fashion as we just did with comments.php. After doing so you should know exactly which files make up your WordPress comments section. If your theme is more complex, there may be slightly more to it, but this should describe over 90% of your situations. Contact your theme developer if you cannot figure out which files to edit. In the project I had to do, I didn’t need to edit the comments.php file in the theme and did need to edit both the wp-comments-post and comments-template.php files. Therefore, that is what I will demonstrate here. If in your case, you had to edit comments.php, then it will probably be even easier and you can easily interpret what we have done in the comment-template.php file for your comments.php file as they both just display the comments form and should have very similar HTML content.
Now that we have determined exactly what files need editing, let’s get started with the code changes necessary to make the comments area look like it does in the image above.
I am going to start with comment-template.php. Here is what you need to do:
Search for the text “comment_form(”. That is the function that we need to make changes to in order to edit the comments form. The comment_form function should be found nearly at the bottom of the page.
Look for where the $fields array is first defined. This is an array of fields that are shown in the comments form. You will want to make changes to the style declarations associated with this in style.css which you should already have open in your text editor. You will also likely want to make changes to the text of the field names the user sees such as email, message, etc. I chose to take out all but name, email and message in my example in the image above. What I did was gave the table in the fields array a new class name so I could start from scratch in defining all the elements inside that table by referencing them through that table class. You can choose to do your own customizations here or just copy and paste mine if you like, here is what my edited $fields array looks like the rest of the function shouldn’t need anything changed:
Notice two things I did in the above example. First, I used my name, Ian, in the class name. I do this in many ways throughout scripts that I edit. If you do this all the time, you can very easily locate any changes you have made to any script simply by doing a text search for your name! I find it comes in very handy, especially if you don’t remember so good like me sometimes. Would you remember a script you edited over a year ago? I wouldn’t, but with this practice, I can easily find out if I made changes to a script and where they are in no time at all.
The second thing I want to point out in the above code is the last line. Notice where it says “label_submit”? That is where you can change what text appears on the submit button. It took me a minute to find this, so I thought I’d point it out to anyone wanting to change their own button text for the submit button. I changed mine to “PUBLISH” as you can see above. Then you can change the style from style.css by editing the CSS declaration for the submit input of that form or reference it by the table it’s in if you can’t find it. Another handy tip I like to use for scripts like this is this: If you have a hard time distinguishing the HTML in the midst of all that nasty PHP code, just look at the resulting page in any browser by using the view source feature. Then you can see just the HTML without all the PHP wrapped around it and can more easily locate the code you need to change even though you still need to make the actual change in the PHP file.
Now open your index.php file from the current theme folder. You need to find the area where comments are shown within the WordPress loop. Of course each theme has different mark up, but you should be able to recognize the loop if you have worked with WordPress for long. If not, it should be commented. The code we are looking from within the loop is the parts that make up the comments. A common problem you will run into with many themes, including the default twentyeleven theme is that they use a template for the loop and you cannot dissect it easily enough. To solve this issue we recommend replacing the loop in your current theme with a very basic one I will provide below:
A Basic WordPress Loop Example:
The below loop has all of the elements you would want to change clearly labeled and available instead of hidden in other WordPress files or templates. Use this if you cannot figure out how to customize your own loop:
When you are done adding the above code, you can erase the code that displayed the comments before because this replaces that code. So if you are using our loop example above, delete the line with the comments_popup_link function in it. I realize that’s a lot of code for just comments, but it is fairly simple really and it gets the job done. All is does is adds a header for the comments area, makes an array for the comments, counts them and numbers them before displaying each one. You can customize this as you see fit. If you use the exact code above, you will need the line image and the arrow images. You can make your own line in any drawing program by just drawing a straight line anywhere from one to ten pixels wide and one pixel high whatever color you want to make it. Then you have your arrow from earlier, but you need one for the closed position too and then you will be all set. If you are advanced enough at PHP coding, you can probably write your own code like this or even improve upon it, but this is what worked for me, so good luck developing your own look and feel for your comments.
Now that you have made the necessary changes to your comments form and index.php file, it’s time to go make corresponding changes to your style.css file. Some styles you will surely want to change will be:
The submit button which can be accessed with input[type=submit] or as I did, with #submit because the name/id of the submit button in this case is “submit” Which can be determined also in the $fields array shown above. Just look for the id_submit variable towards the bottom. That defines the id of the submit button for the comments form. Here is how I styled mine: