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 successfully 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') ) {.

Here I placed them together for convenience:

<?php
if ( function_exists('register_sidebar') ) {
 
register_sidebar(array(
   
'before_widget' => '<li id="%1$s" class="widget %2$s">',
   
'after_widget' => '</li>',
   
'before_title' => '<h2 class="widgettitle">',
   
'after_title' => '</h2>',
  ));
 
// Additional bar here
  //register our bottom dock regions
 
register_sidebar(array(
   
'name' => 'dockbottoms',
   
'before_widget' => '<div id="%1$s" class="widget %2$s">',
   
'after_widget' => '</div>',
   
'before_title' => '<h2 class="widgettitle">',
   
'after_title' => '</h2>',
  ));
}

/* WordPress chat */
if (!is_admin() ) { // Make sure it won't load in the admin page
 
add_action('wp_head', 'my_css'); // Inject custom mystyle.css into wp_head, so no need to manually insert it
 
add_action('init', 'my_script');
}

function

my_script() {
 
// Load myscripts.js version 1.2.6, relevant to core WP jquery
  // Change the jquery version to 1.3.2 for WP 2.8
  // Place true as the last value to load javascript in the footer (WP 2.8 above only), as long as your theme has wp_footer(), e.g.:
  // wp_enqueue_script('myscript', get_template_directory_uri().'/myscript.js', array('jquery'), '1.2.6', true);
 
wp_enqueue_script('myscript', get_template_directory_uri().'/myscript.js', array('jquery'), '1.2.6');
}

function

my_css() {
 
// Load our mystyle.css file, which is dynamically injected into wp_head via add_action
 
echo '<link rel="stylesheet" href="'.get_stylesheet_directory_uri().'/mystyle.css" type="text/css" media="screen" />'."\n";
}
?>

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.

<div id="dockbottoms">
  <div id="dockbottoms-inner">
    <?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('dockbottoms') ): ?>
  </div>
</div>

Step #3 -- Adding CSS code

You need to create mystyle.css. This is the safest way, all your custom css will not be overriden in your next upgrade if using a GPL theme out there.

Copy the CSS codes below. Adjust the width if using narrow layout.

#dockbottoms {
  background-color: #fff;
  border: 1px solid #999;
  border-bottom: 0;
  bottom: 0;
  clear: both;
  padding: 2px 0 0;
  position: fixed;
  width: 760px;
  z-index: 11000; /*Allow layering*/
}

#dockbottoms-inner {
  background-color: #ccc;
  float: left;
  height: 35px;
  padding: 0;
  position: relative;
  width: 100%;
}

/* Equal width for 3 possible region, adjust to your need*/
#dockbottoms-inner div {
  display: block;
  float: left;
  margin: 0 14px;
  width: 30%;
}

#dockbottoms-inner ul {
  padding: 0 0 0 14px;
}

/*Chat widget sample, adjust everything here*/
div#chat-wrapper {
  border: 1.5px solid #ADADAD;
  bottom: 5px;
  position: absolute;
  right: 16px;
  text-align: center;
  width: 160px;
  z-index: 11002; /*value above #dockbottoms-inner*/
}

#dockbottoms-inner div#chat {
  background-color: #E8E9ED;
  display: none; /*Do not show the chat, let jquery play*/
  float: none;
  height: 255px;
  margin: 0;
  text-align: left;
  width: 100%;
}

#dockbottoms-inner div.slider {
  background-color: #E8E9ED;
  float: none;
  height: 28px;
  margin: -5px 0 0;
  padding: 0;
  position: relative;
  width: 100%;
  z-index: 11003; /*value above #chat*/
}

/*Add image if necessary, such as close or open buttons*/
a.toggleup,
a.toggledown {
  background-color: #E8E9ED; /*Match .slider*/
  display: block;
  line-height: 22px;
  text-align: center;
}

Step #4 -- Adding custom jquery script

Create myscript.js and place the code below into it:

// Create a generic custom function to produce more slide effects easily
jQuery.fn.slideUpToggle = function(speed, easing, callback) {
  return this.animate({opacity: 'toggle', height: 'toggle'}, speed, easing, callback);
};

function init_my_script() {
  jQuery(document).ready(function() {
    my_chat();
    // add more here after creating the function, see function my_chat() for example
    // such as my_tabs, my_newsticker, my_google_friend, my_facebook_connect, etc
  });
}

function my_chat() {
  // The shortcut $ is reserved by other library, so change it to jQuery to avoid conflict
  jQuery("a.toggleup").click(function(){
    //debug
    //alert('Hello world');
    jQuery("#chat").slideUpToggle("slow");
    jQuery(this).toggleClass("toggledown");
    return false;
  });
}

init_my_script();

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.

The default text widget suffices for now:

<div id="chat-wrapper">
  <div id="chat">
    <!-- // Chat widget begins. Change the two flash widget URLs to reflect your own meebo -->
    <object type="application/x-shockwave-flash"
      data="http://widget.meebo.com/mm.swf?blablabla"
      width="160" height="250">
      <param name="movie" value="http://widget.meebo.com/mm.swf?blablabla" />
      <param name="quality" value="high"/>
      <param name="wmode" value="transparent" />
    </object>
    <!-- // Chat widget ends -->

  </div><!-- /#chat -->

  <div class="slider"><a href="#" class="toggleup">Chat with Me</a></div>
</div><!-- /#chat-wrapper -->

And blablabla is unique to your meebo chat. See a better explanation in my previous drupal chat post.

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):

#footer {
  margin:0 auto 40px; /* Add necessary margin to rise the footer*/
}

That's it what I call a cake :)

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.

Let me know what comes up into your own design.

facebook chat wordpress