Expand Comments for Wordpress

The Expand Comments Plugin provides Wordpress with the ability to expand the comments of a post below to any point on a page using AJAX. What this means, is that a user can click the "Expand Comments" link, and have the comments be added to the page, no refresh required. The "flow" of the site is not changed (the user can stay on the main blog page) as well as provides a streamlined feel to the blog.

As of newer versions, it also has the optional ability for users to post comments via ajax. This means no page redirects/reloads after they press the submit button.

Expand Comments has been tested on WP versions 2.0+ and 2.1

Technical Features

Demo

You can see an online demo at my test Wordpress page here

Installation

Installation is easy, just download the zip file from below, and unzip it to your wp-content/plugins folder. Inside the zip is a directory with the plugin files. Feel free to edit these if you want, but this is not required for normal operation.

Check that the plugin is seen by WP by going under the plugin options. Go ahead and activate it now. Now, you have to edit the index.php (and archive.php) file of your theme by adding two (2) lines. The only requirement to these edits is that you place the lines inside "The Loop" where each post gets entered. If you aren't sure what this means, if you see <?php the_ID(); ?> then you're good (Expand Comments uses the ID to determine which post to expand).

The first line to add is the "Expand Comments" link. To do this, open up index.php and find where you want the link, then insert the line <?php expand_comment_link(); ?> where you feel its appropriate. I put mine at the end of the postmetadata section.

Now, we need to specify where each post's comments are going to go once that link is pressed. To do this, we have another php function that adds a div to where the function is called. When you find a spot (below the post is probably best) add the line <?php expand_comment_div(); ?> Remember, this adds a div to the page, so don't put it inline with anything.

And that's it, you comments are now AJAX'd! If you'd like, you can keep reading about how the plugin works, but this isn't necessary.

Hacking the Plugin

First, lets get a very basic overview of how the plugin works. Expand Comments hooks into the wp_head action (wp_head is called whenever the header is needed for a page). This adds some vital javascript functions to the head of each page. One of these functions is set to run on the page load. This function looks for the specially tagged links and modifies them so they will cause the plugin to do its thing. By adding the above two php lines to your theme, you are adding a link and a div to the page code that is specially tagged for the javascript to find it.

When the link is pressed, it first checks the status of that post's comment div. If the div contains comments, it just hides/shows them. Otherwise, it makes an AJAX request to the exp-com.php file, which returns the comment data.

The AJAX call can be a tricky thing to understand. The call actually returns before the data is downloaded, the function basically just says "Go get this data, and let me know when its done". The "hey its done" message is sent by executing a function that you tell it to. So the communication goes as follows:

Plugin: "Go get this data, and run 'myFunction' when you have it".

AJAX: "Okay, I'm working on it".

Plugin: Continues on working on other stuff.

AJAX: "Hey, the data just got back to me!"; myFunction(data)

So from the above example, Expand Comments does the following: Plugin tells AJAX to get the comment data for a certain ID number. AJAX asks the server for the data. When it gets the data, AJAX calls the function that parses that data and puts it into the div.

Included Files

Now the specifics, first we need to know what each file is responsible for in the plugin.

expand-comments.php

This is the actual plugin file. It contains code that hooks Expand Comments into Wordpress via actions, as well as the expcom class that contains all of the functions for Expand Comments. This is where the getter/setter functions are for all of the options, as well as the expandcomment* functions. This most likely won't need to be edited

expand-comments.js

This is where all the AJAX magic like above happends. Inside thise file contains javascript to make AJAX requests using GET or POST.

expand-comments-events.js

Holds the meat of the javascript. This is where the onLoad javascript function that modifies the RSS links to the Expand/Collapse links. This also has functions for expanding the div, submitting comments, and inserting/removing comments from the div.

expand-comments-ui.php

Holds the option page for Expand Comments

exp-com.php

This talks to the database, and returns comment data in the form of XML. Browsing to this file with the query ?id=X where X is a post number will show you all of the data you can access. Take a look at the file to see how you can modify what it returns.

inline-comment-form.php

This file holds the submit comment form for when comments are expanded. This was taken from the default WP theme (with slight modifications). This also has a call to the AJAX comment submit code. Feel free to edit this file for a customized form.

style.css

This file is a dummy css file. It contains the default elements, but no styling information. Edit this to fine tune the style of the expanded comments. Note: If you have changed the CSS class/id names in the options page, you will have to change theme here to match.

CSS

You can set the CSS classes/ids in the options page, and use the style.css file to match your theme. If you're lucky, renaming the classes/ids to match your theme might be all it takes to get it to look right.

And that's all you need to know! Let me know if you want more details on anything, and I'll be happy to expand upon the above.