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:
Also, in the image above, the comments and the form below it will be hidden by default and only shown when the user clicks the arrow beside the number of comments on the left side of the widget.
Getting Started with Comment Section On WordPress
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.
Head over to the main directory
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:
- Blog/wp-comments-post
- Blog/wp-includes/comment-template.php
- Blog/wp-content/themes/your-theme/style.css
- Blog/wp-content/themes/your-theme/comments.php
- Blog/wp-content/themes/your-theme/index.php
- Blog/wp-content/themes/your-theme/header.php
Note that “Blog” in the above list represents your WordPress main folder and could be named anything. If you don’t know what it’s called on your server, you need to find out before you do this tutorial.
Selecting the Correct Files
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.
Start Editing
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.
Edit index.php
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:
Using a loop like the basic one above, you can easily determine where the comments will be displayed. Simply search for the word “comments” and you will soon find the comments_popup_link function which indicates that comments will be shown there. So go right above that and add something like this:
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.
Adding Style
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:
Oh, and don’t’ forget the hover effect too:
You may need to tweak it a bit for your situation but that should get you started.
In addition to the submit button’s style, I also changed the styles for the input elements and the text like so:
Then I added styles for the additional hide/show comments part and the number of comments like this:
Okay, that should be all the styles you need to add to your style.css sheet, but don’t forget to notice how I reference each. You can determine this by looking at the code in the fields array from above to see how each style declaration corresponds with the element in the style sheet. Of course it helps to have a good understanding of CSS.
Next, you also need to manipulate the wp-comments-post.php file if you want to have the effect work as mine does. Otherwise you may get some unorganized comments due to the fact that WordPress will try to use default settings for showing comments that will result in using other files that we have not customized. But my solution works great because it all revolves around using the index.php file to show comments from the comments template within, but by default, WordPress sometimes will use other templates, so this is the fix for that. In the very bottom of wp-comments-post.php make the last several lines follow my example here:
Notice again how I used my name in the variable $iansloc so I can find it later? You can name your variable similarly, just be sure to catch each occurrence of it at the bottom of the file as I have done above. By changing the location in this argument to index.php, we prevent the comments from being displayed in the wrong template after submitting a new comment. Slight modifications may need to be made for some themes, but this should work in most cases.
One final edit to your header.php file and we should be done! Go to your header.php file and add the following code somewhere inside the head tag at the top of the page. It will also work if you place it right after the get_header function in your index.php script:
That is the function you need to make the comments open and close when clicking on the arrow. You will need to make your own arrow in your favorite graphics program or download one from the internet, they are easy enough to find. Try to Google arrow with images selected in Google as the media to search and you will get hundreds of them.
Finishing Up
Okay, you have made all your changes, modified your style sheet and now it’s time to upload everything and test and debug. Hopefully it will all work according to plan, but be prepared to fix syntax errors and typos in your code as you should always be prepared to do. After uploading, try adding a comment and see how it displays. Make sure they work from all posts. If you have pages on your site, as well as posts, you will probably have to edit another script or two in order for them all to work as planned, but the methods used already in this tutorial should also work for those pages as well, so have fun with your comments section. It should look a lot less drab after you make these customizations. Once you have your comments section the way you want it check out these effective tips on how to get comments for your blog.