IA | Miklas Njor

How to add collapsible comment form to your wordpress blog

Works in: firefox, safari, chrome.

Possible conflicts:
Problem with WP Ajaxify Comments, which makes the page jump to the top. It also updates the top first post, which might only be a problem if you use the Auto Load Next Post plugin.

Set up

Abstract: Users expect to be able to comment on your blog posts, however, very few users choose to actually do so. The comment box takes up a lot of space. Removing the comment box is out of the question, because you want people to be able to comment. This creates a gap between expected usability and functionality, and your website’s design. Comment boxes take up a lot of screen real estate, since users need to fill in at least three fields: their name, email address and the comment itself. On top of that, there is the submit button and perhaps checkboxes for also subscribing to the blog, new comments, and perhaps even buttons to use some API’s to login via social accounts. So the comment area needs to be there just in case, but still not be in the way. This is good information architecture…

Jetpack has a nice workaround to this problem, where the box expands and buttons come into view once the user clicks inside the comment field. This is great usability, but I couldn’t get this feature to work as expected on my blog. No matter what I did (CHMOD’ing files, changing .htaccess, deactivating plugins), I would get an error once a comment was submitted that said: “You don’t have permission to access /wp-comments-post.php”.

A second problem was, that I use the Auto Load Next Post plugin to create an infinite scroll of related posts. If the comment box takes up too much space, it is difficult for the user to figure out, that new posts are featured under the post that they are reading.

A possible workaround could be to print to the screen that new posts have been loaded below, but constantly showing a message would eventually drive users nuts, and then you would have to write a script that keeps track of how many times this modal screen had appeared infront of the user, and set a cut off point, perhaps add this to a cookie for when users came back to the site. Yada-yada. The list goes on…

So I decided to just add a simple javascript toggle on/off button to open and close the collapsable element, letting users who wish to comment on my blog, be able to do so, and the 99% percent who don’t comment, aren’t bothered by the large comment box.

Tools you need:

For editing files you need notepad if you are on Windozs; or text-edit if you are on a Mac. If you are on Linux, you hopefully know what to do, right (because I don’t!). Some other decent IDE’s (fancy name for code editors) are TextWrangler, TextMate or Komodo Edit. You also need a program to transfer the files to and from your server. FileZilla comes to mind, or Transmit.

Files you need:

  • comments.php (in your theme’s folder – use your file transfer program to fetch it)
  • functions.php (in your theme’s folder – use your file transfer program to fetch it)
  • header.php (in your theme’s folder – use your file transfer program to fetch it)
  • style.css (in your theme’s folder – use your file transfer program to fetch it)
  • js.js (this file you will create and upload to you theme folder via the file transfer program)

A note about functions.php
When you update your theme, it overwrites (deletes) every file and subsequently any customisation you have made. This is slightly problematic… If you (perhaps correctly so) feel that you shouldn’t edit your theme’s functions.php file, you can either create a child theme based off your current theme and add the functions.php, style.css and js.js to the child theme folder, or you can create what is know as a Must Use plugin. It sounds more scary than it is. There are many places to read about how to create both, see references below. Another way around this is to create a file called “myNotes.html” or similar, and add it to your top folder (don’t store passwords) but use it to keep notes about things you added to your site, or install the Note Press plugin to keep notes on your site in the admin area. This is also good if you are many people running the site.

Ok, enough talk already, lets get to it.

Creating the collapsible javascript comment form for WordPress

Step 1 (comment_form())

First off, you need to make sure that you use comment_form() in your theme. You can check this in your comments.php file in your theme’s folder. The statement will look something like this
<?php comment_form(); ?>.
If you don’t see comment_form() anywhere in you comments.php file, check other files called comments something, or try to email the theme developer. As a last resource, you might want to change themes, as this is an indication of a theme that doesn’t follow current standards, and as such might have other problems.
The reason you need to make sure that your theme uses comment_form(), is that we are going to write some code that modifies it, so if it’s not there, we can’t modify it.

Step 2 (create javascript file)

Create a file called “js.js” (.js stands for javascript). You can name your javascript file anything, but just make sure, that if you name it “jeronimo”, that the file has “.js” appended as a prefix to it, so browsers know that it is a javascript file.

Step 3 (write javascript)

in your js.js file (or whatever you called it) add the following code:

Save the file and upload it to the theme folder.

This shouldn’t clash with the other functionality of your site, or with other jQuery features which many WordPress sites use. I had some trouble getting jQuery to play nice while creating this collapsible comment box, therefore the functionality is written in plain javascript. The code is from CSS Tricks.

Step 4 (add link to javascript file)

Open up your header.php and link to your javascript file. If you are unsure how to link to it from the header here is the way I do it:

this is added in the header.php in the

section just above

and make sure it is not between any


Save and upload the file to your theme folder.

Step 5 (functions.php)

Open your functions.php from your theme’s folder. If you don’t have a file called functions.php (very unlikely), create a new file and name it functions.php and add an opening and closing PHP statement as so:

Just above the closing ?> at the bottom of the file (functions.php), you add the following code. I have added comments denoted by // to explain what is going on.

Save and upload the file.

Step 6 (CSS)

If you want to go all artsy fartsy, you can add the following to your style.css

that way people can see that the button has some sort of function…


The javascript code:

If you want to add the button somewhere else, you have a few options, however the setup is slightly different and you will have to find information elsewhere:

How to create must use (MU) plugins:
From Justin Tadlock (a very good explanation):
From the WordPress Codex: (just scrapes the surface):

Child themes

Information Layers. Posters upon posters.

Your website is not a poster

Information Layers. Posters upon posters.

Information Layers. Posters upon posters.

I think this is a very good image to explain how many companies add content to their websites. Layer upon layer, without the possibility to go up or down the information tree. Static pages with stale information and repitition, the user can’t dig deeper into or understand the relationsship with other parts of the site.

A poster has clear constraints and it is within these the designer works. A website doesn’t have these constraints, and I believe that more companies should focus on letter the consumer consume content they way they want to.