more art than science

Adding facebook-like chat panel the wordpress way

Jun232009

Disclaimer: This humble dumble tutorial simply concerns about themeing or designing a panel container for a chat client. This is not a one stop solution for all you need nor anything complicated like multi-user, javascript or ajaxified chat client, or whatever you expected to be a real billion-dollar-worth facebook chat. The goal is to simply add a working meebo chat box inside a facebook-like chat panel. Please discontinue reading if you are expecting more than just themeing! I mean it.

Other posts in this site have already introduced how to add some fun into your own site, like collapsible login block or facebook-like chat panel. Most are dealing with drupal. Today I am going to show you what a cake it is to create the similar facebook-like chat panel right into your own WordPress.

The test is against WP 2.7 and Kubrick, the default theme. You can always try it with your own theme. It also passes WP 2.8 on a fresh install.

There are several wordpress chat plugins you may be interested in, or when you have some bandwith to spare for, apart from meebo which this post is working with:

They need a little more work which is beyond this tutorial for now. Simply put, we are going with meebo. So go get your meebo code now to see how this works. When it works, do it with your own plugin.

WordPress shifts with a few javascript libraries, scriptaculous, prototype, jquery and several other scripts, see the full list, which are located in wp-includes/js folder. So Wordpress has built-in supports for jquery. I choose jquery as it is the framework I am familiar with.

Unless you have a better reason, such as catching up the latest library which your codes really depend on, you don't have to download the library any more, just call it from your theme. Make sure the version is correctly set as per your installation.

To edit any of theme files, you may either fire up a code editor or simply go to wp-admin/theme-editor.php to do it right from your browser.

There are several files we are going to produce and/or deal with: functions.php, footer.php, mystyle.css and myscript.js, and meebo widget code. You have to register at meebo to get your own code.

You can try two different approaches to produce similar effects, a static way or a dynamic way.

With a static way, you have to put directly your codes on your template files, hard to maintain and inflexible. While with a dynamic way, you can always change what is to place through your widget administration, wp-admin/widgets.php.

This tutorial assumes we walk through the more flexible way, a widgetized version.

You may need to stop here a while if new to how sidebar and jquery work in WordPress:

Don't be fooled by the function name "sidebar". That is the way WordPress deals with additional regions apart from the post container no matter whether they are placed in the bottom, footer or header region.

I think WordPress was not designed for complex layout in the first place, save for a common two column blog layout which later succesfully differentiated it from portal type layout. With more complex needs, WordPress is now extended to behave like true CMS, only that sidebar function left unchanged up to now :)

Preparing chat panel container

Step #1 -- Adding some functions

Edit, or create functions.php if your theme has none. Most themes have one.

You can call the files directly in your header.php. But we'll use WordPress core function wp_enqueue_script() to load jquery safely and dynamically.

Place the additional bar codes named dockbottoms, or whatever, below at the end of your first register_sidebar function. Check the default theme Kubrick to locate if ( function_exists('register_sidebar') ) {.

Never place this code at the end of your closing conditional PHP tag, otherwise you'll get header information errors. You may have to change the jquery version to 1.3.2 for WP 2.8.

The wp_enqueue_script ensures that jquery and myscript.js will not initiate until the page loads completely. The second paramater refers to our custom script location.

If you have WP 2.8 installed, you'd prefer to place all javascripts in the footer area. Simply insert true value at the end of wp_enqueue_script. Yet this will only work if your theme has wp_footer(). If not, simply place <?php wp_footer(); ?> exactly before the closing body tag.

Step #2 -- Placing the chat panel

Edit your footer.php. Place the code below somewhere after the closing footer tag or before the content/page closing div or wp_footer() tags. You may want it to be placed exactly before the content/page closing div to keep your layout intact without additional css codes.

All your custom jquery codes should go to this place, even mootools or other libraries. Just make sure they do not conflict or your script will not work.

Loading the chat code or widget

I picked meebo, but you can always try any of the above mentioned plugins.

Since you are doing it dynamic, copy the code below and place it into your text widget at wp-admin/widgets.php. This widget supports only Text and/or HTML. If you want PHP code, you may need PHP code widget instead.

Adjusting everything

Every theme has its own design and color scheme, so adjust everything to suit your theme needs. Add some images if necessary, etc. If using Kubrick, you may also want to raise the footer area (line #312):

You may be more creative by placing great things in this panel bar, says Google Friend, Facebook Connect, login block, shoutbox, your awesome about intro, etc. Make sure to add more functions and css to get it done right.