Spice Up Wordpress with Resizable Comment Boxes

It doesn't matter where you are, comment boxes never seem to be the right size for what you're trying say. A great way to fix the problem is to let the user resize the comment box to fit their needs. This tutorial is going to demonstrate how to take our resizable textbox and incorporate into your installation of Wordpress.

The style of Switch On The Code is based on a heavily modified version of the Bitter Sweet theme. All-in-all we've really enjoyed this theme - except when it comes to the comment box. It was made a little too small and we've never gotten around to fixing it - until now. Sure we could have simply edited the theme files to make the box bigger, but where's the fun in that?

Isn't that beautiful?

First off, we really wanted to make this a plugin for Wordpress, but it doesn't look like the plugin system easily supports changes to the comment box - it's more of a theme thing. That means to actually use resizable textboxes we're going to have to get our hands dirty modifying the theme's source files. Fortunately, The Tallest designed the textbox to be nice and modular so the code required is as small as possible.

The first thing we need to do is find the PHP file to modify. The file is called "comments.php" and is stored in your theme's folder inside the Wordpress "themes" folder. I know that sounds confusing, so here's a picture to help clear things up a little.

As you can see, the file I had to modify was stored in the folder, "bitter-sweet-10". Yours will be located in the folder for whatever theme you've decided to use.

Now that you've found the file to modify, we need to find what part of the file to change. This can be wildly different depending on how your theme was implemented, but basically you need to find the textarea inside this file. For our theme, it was located on line 124.

All we have to do is replace that line with our resizable textbox code.

Pretty simple, right? We simply added the Javascript file, CSS file, a container object, and a few lines of Javascript code and everything is up and running. The resizable textbox will be placed inside the span tags by the Javascript code. We chose to use a span because now when the box is resized, the contents below the page will move up and down with the textbox. All the files referenced here can be downloaded from the Resizable Textbox tutorial posted earlier. I'm not going to go into any details on what those few lines of Javascript code are doing - if you want to know, I would suggest checking out that tutorial.

And that's it for making your Wordpress comment box resizable. You can check out the results for yourself by leaving us a comment.

Update: November 13th, 2007

We simplified the process of adding the resizable textbox. You can now put in the following code instead of what is listed above. Hopes this makes things easier.