Easily Grab a Custom Field

Wordpress is not a CMS, however many developers are using the built in functionality of Wordpress to mimic some of the features of a CMS. One of the most helpful features are Custom Fields. These will allow you to associate unique data with each page or post. This function is a nice wrapper for the built in one for grabbing a custom field:

function AM_get_custom_field_value($key, $post_id = null, $echo = false) {  
  global $post;  
  $post_id = ($post_id)?($post_id):($post->ID);
  $value = get_post_meta($post_id, $key, true);  
  if($echo){
    echo $value;
  }
  return $value;
}

Note: this function will only grab a single value for your custom field. In order to grab the whole array, here is a different function:

function AM_get_custom_field_values($key, $post_id = null) {  
  global $post;  
  $post_id = ($post_id)?($post_id):($post->ID);
  return get_post_meta($post_id, $key, false); 
}

Insert a Single, Specific Post Into Your Template

Often times clients want to be able to edit certain parts of a webpage without editing the template code. With most modern CMSes this is handled using modules or something similar. Although Wordpress has Widgets, one big downside of using them is that the text widget doesn’t have the same nice WYSIWYG that a post or page does. One way around this is to create specific posts that contain editable blocks of text and display them directly in your template. Now, this isn’t exactly the “proper” use of posts, but who cares, it gets the job done. One thing to remember though, if you don’t want this text showing up in your blog lists, you must make sure NOT to publish it. The other thing is that you will need to get the Post ID for the post you want to display. This is available in the URL while editing the post:

wp-admin/post.php?action=edit&post=541&message=1

In this case the Post ID is 541.

function AM_get_single_post($postID, $echo = false){
  ob_start();  
  query_posts('p='.$postID);
  if ( have_posts() ) : while ( have_posts() ) : the_post();
    the_content();
  endwhile; 
  endif;
  //Reset Query
  wp_reset_query();
  $post_content= ob_get_clean();
  if($echo){
    echo $post_content;
  }
  return $post_content;
}

Insert a Post Inside a Post

This might seem like a useless function, but I have actually used it quite successfully. It goes along the same lines as the above function but will allow you to insert a post inside another post using shortcode. I recently used this for a client who wanted an editable block of text, but wanted to put it on only certain posts. It didn’t seem to necessitate a whole different template file for this, so I decided to write this function. In order to use it, you need to add this shortcode inside your post:

[insert_the_post id="88"]

function insert_the_post_func($atts) {
	extract(shortcode_atts(array(
		'id' => '0',
	), $atts));
  if($id){
    query_posts('p='.$id);
    //The Loop
    if ( have_posts() ) : while ( have_posts() ) : the_post();
      $content = get_the_content();
    endwhile; 
    endif;
    //Reset Query
    wp_reset_query();
  }
	return $content;
}
add_shortcode('insert_the_post', 'insert_the_post_func');

Here is what wiki says about it:

YAML syntax was designed to be easily mapped to data types common to most high-level languages: list, hash, and scalar. Its familiar indented outline and lean appearance makes it especially suited for tasks where humans are likely to view or edit data structures, such as configuration files, dumping during debugging, and document headers (e.g. the headers found on most e-mails are very close to YAML). Although well-suited for hierarchical data representation, it also has a compact syntax for a relational data as well.

Here is a sample of what YAML looks like:

connection: "local_mysql"
widget:
  type: "Table"
drawProperties:
  title: "Syslog Table"
  showRowNumber: "true"
  allowHtml: "true"
  pageSize: null
  page: "disable"
#usually the table name
entityName: logs
entity:
  table: logs
  fields:
    id:
      field: id
      type: number
    counter:
      field: counter
      type: number
initialQuery: "select id, counter from logs order by id"

One of the great things about YAML is that it is very easy to read and takes much less syntax markup than XML. This enables you to crank out tight, clean configuration files very easily. When I load the previous YAML file up into PHP, here is the resulting data structure:

array(6) {
  ["connection"]=>
  string(11) "local_mysql"
  ["widget"]=>
  array(1) {
    ["type"]=>
    string(5) "Table"
  }
  ["drawProperties"]=>
  array(4) {
    ["title"]=>
    string(12) "Syslog Table"
    ["showRowNumber"]=>
    string(4) "true"
    ["allowHtml"]=>
    string(4) "true"
    ["page"]=>
    string(7) "disable"
  }
  ["entityName"]=>
  string(4) "logs"
  ["entity"]=>
  array(2) {
    ["table"]=>
    string(4) "logs"
    ["fields"]=>
    array(2) {
      ["id"]=>
      array(2) {
        ["field"]=>
        string(2) "id"
        ["type"]=>
        string(6) "number"
      }
      ["counter"]=>
      array(2) {
        ["field"]=>
        string(7) "counter"
        ["type"]=>
        string(6) "number"
      }
    }
  }
  ["initialQuery"]=>
  string(40) "select id, counter from logs order by id"
}

The YAML file is actually parsed using a PHP YAML parser called Spyc. The syntax for Spyc is also quite simple:

$configArray = Spyc::YAMLLoad($yamlFile);

I was first introduced to YAML files when I began a Symfony project. Symfony makes heavy use of YAML files for all of its configuration. I really like the way Symfony was so configurable and have since added YAML config files to just about every project I work on. They are far easier to edit than XML, there is less overhead when parsing and apparently the YAML 1.2 specification is compatible with JSON which is amazing.
From wikipedia:

Both functionally and syntactically, JSON is effectively a subset of YAML. Specifically, as of YAML version 1.2, “every JSON file is also a valid YAML file”

Configuration files are a great way to make your life easier, and the life of anyone else who need to modify your code and YAML is a great place to start for creating these.

function is_ancestor_cat($ancestor, $descendant){
  $ancestor = (string) $ancestor;
  $desc_id = (string) $descendant;
  $child_cats = get_term_children( (string) $ancestor, 'category');
  if($ancestor == $descendant){
    return true;
  }
  else if(!count($child_cats)){
    return false;
  }
  else{
    $is_child = false;
    foreach($child_cats as $cat_id){
      if($cat_id == $desc_id){
        $is_child = true;
        break;
      }
      else{
        $is_child = $is_child || is_ancestor_cat($cat_id, $descendant);
      }
    }
    return $is_child;
  }
}

What this code does is that is grabs all the children for the ancestor category then checks them against the descendant category, it will keep recursing until it hits the leaf nodes and returns a boolean value.
Here it is in action in my template file category.php:

//Check if we are in a category
if(is_category()){
  $ancestor_cat_id = 43;
  //Lets get the current category we are in
  $cur_cat_id = get_cat_id( single_cat_title("",false) );
  $is_ancestor = false;
  //Check if we are in the ancestor category
  $is_ancestor = is_ancestor_cat($ancestor_cat_id, $cur_cat_id);

  //If it is an ancestor, use a specific template
  if($is_ancestor){
   include(TEMPLATEPATH.'/category-43.php');
  }
  //Use the default template
  else{
   include(TEMPLATEPATH.'/category-default.php');
  }

}

It has been about two weeks from when I first decided to write my plugin, to today. Luckily for the time being I don’t have much other work so I have been able to dedicate quite a bit of my time to development of this plugin. I am really happy how far its come in the past two weeks, with about 800 downloads so far and a fairly stable version now.

There really isn’t too much organization to this post, really just a hodgepodge of various tools, tips, ideas and links that have been helpful to me. This isn’t meant to be a comprehensive “My first WP plugin tutorial”, there are already plenty of those. This is meant to be what comes after that, when you are scratching your head trying to figure something out (which I did plenty of!) or when you want to make sure you haven’t forgot. Also I don’t want to claim to be any kind of expert on the subject, considering this is my one and only plugin.

One lesson I have learned though, is learn from the best. I spent a lot of time looking through the source code of really popular and well establish plugins like NextGen Gallery. Studying this code can provide a lot of insight into how problems are solved, security, internationalization and other things you need to know in order to write a good plugin.

Anyways without further ado, here is a list of some stuff to think about:

1. SVN
2. The Readme & Main File Headers
3. Helpful Constants
4. Preflight Checks
5. Hooks & Actions
6. Uninstall
7. Admin Options
8. Tread Lightly

SVN

Wordpress SVN Tutorial

The Wordpress SVN integration is a definite must to know when starting your projects. I use Coda for development, which has integrated SVN but I am not sure its ready for primetime as I still have some problems using it. So I ended up using SCplugin which integrates nicely into the finder and works like a charm. Once I can afford it, I am going to buy Versions which looks even better and has much more functionality. I also tend to use the command line when performing certain functions.

To start my project (after signing up with Wordpress and getting my account information) all I did was use SCplugin to checkout the base folder structure from the Wordpress repository and started working on it. It was really easy. Also the base folder strucutre includes trunk, branches and tags so should have most everything you need. Here are some of the commands I use:

svn co http://svn.wp-plugins.org/csprites-for-wordpress/ myfolder

Use this to check out the entire tree.

svn co http://svn.wp-plugins.org/csprites-for-wordpress/trunk myworkingdir

I use this to just check out the trunk when I am doing development, so I can test it directly in my WP install

svn cp trunk tags/0.495

This will create a new tagged version, which is important when using WP’s plugin repository and packaging service. The version in your readme and base plugin file need to match one of these tags.

svn merge -r 91101:HEAD  branches/benchmark/ trunk

I created a branch for benchmarking purposes and did some work on it. Eventually I used the above code to merge my changes from the benchmark branch back into the trunk

svn log

You can call this in one of your repository directories to get a log of all the changes. This can be useful when you need to find a revision when doing a merge.

The Readme & Main File Headers

Wordpress Readme Standard | Wordpress Readme Validator

The readme.txt file is arguably one of the more important file in your whole plugin. It is parsed by the WP plugins server and displays a lot of relevant information on your plugin. It is important to keep this information up to date.

=== cSprites - Speed Up Page Load Time with Dynamic Image Sprites ===
Contributors: amummey
Tags: css, sprites, cSprites, images, content
Stable tag: 0.5
Requires at least: 2.7
Tested up to: 2.7.1
Donate link: http://mummey.org/csprites/

Automatically compress you content images into a big sprite, decreasing web page load time.

The top of my readme.txt file, this should be in your root directory. You can also add screenshots of you project by putting files in your root plugin directory and naming them screenshot-1.jpg, screenshot-2.jpg…

/*
Plugin Name: cSprites for Wordpress
Plugin URI: http://wordpress.org/extend/plugins/csprites-for-wordpress/
Description: Automatically compress you content images into a big sprite, decreasing web page load time.
Version: 0.5
Author: Adrian Mummey
Author URI: http://mummey.org/
Copyright 2008-2009 Adrian Mummey

This program is free software; you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation; either version 2 of the License, or
(at your option) any later version.

This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
GNU General Public License for more details.

You should have received a copy of the GNU General Public License
along with this program; if not, write to the Free Software
Foundation, Inc., 59 Temple Place, Suite 330, Boston, MA  02111-1307  USA
*/

The header of my main wp_csprites.php. Here I have included some more formatted information about the plugin. One thing to remember is that the Version number here should match the version in your readme.txt file for the Wordpress plugin server to recognize your latest version. I have forgotten to make these the same and wondered why my plugins page wasn’t updating. I have also included the license in my header.

Another thing is that when you commit a new version, it may not be recognized right away, there is some delay so wait 15 minutes or so and come back and refresh the page on Wordpress before you start panicking. Also I have noticed there is quite some delay in the automatic update feature on the plugin page in WP admin. It can take a few hours sometimes before my Admin shows me there is a new version of my plugin.

Helpful Constants

WP_PLUGIN_DIR

This constant will give you the Absolute directory path of the plugins directory. This is helpful when you need to do some file reads or writes.

WP_PLUGIN_URL

This constant will give you the full url path to the plugin directory.

define('CSPRITE_PLUGIN_NAME', basename(dirname(__FILE__)));
define('CSPRITE_PLUGIN_DIR', WP_PLUGIN_DIR.'/'.CSPRITE_PLUGIN_NAME);
define('CSPRITE_PLUGIN_URL', WP_PLUGIN_URL.'/'.CSPRITE_PLUGIN_NAME);

This is a quick way to define some constants that point to your plugins directory.

Preflight Checks

Before you put your plugin out, you need to be sure that all the requirements for its proper execution are met. If they aren’t you should degrade gracefully and not show any errors. In my plugin I wrote some preflight checks to make sure all the requirements are met before I hooked into wordpress. In addition, if the preconditions are not met, I will display a nice message for the user to tell them why the plugin isn’t working.

function cSpriteCheckPhpVersion(){
  return version_compare(PHP_VERSION, '5.0.0', '>');
}

This function will make sure that PHP version is higher than 5.0.0 (a requirement of my plugin).

function cSpriteCheckWordPressVersion(){
  global $wp_version;
  $minimum_wp = '2.7';
  return version_compare($wp_version, $minimum_wp, '>=');
}

Wordpress has a global version variable that you can use to check the current running version of Wordpress.

function cSpriteCheckCacheWritable(){
  $file = CSPRITE_CACHE_DIR.'/permission.txt';
  return (@file_put_contents($file, 'sanity check') !== false);
}

This check tries to write a small file to my cache directory. It is essential for the proper execution of my plugin for the cache directory to be writable.

Hooks and Actions

There is a lot of documentation already written about most of the hooks and action, but I thought I would just cover a few here that don’t have as much written about them, but can be useful.

add_action('plugins_loaded', 'startcSprites');

I wrap all the plugin initialization code in a function called startcSprites which is handled by the plugins_loaded hook.

add_action('loop_start', 'cSpriteLoopStart');

Since I need to parse all of the content before its displayed I use this action hook to call a function to parse all the posts at the beginning of the loop.

function cSpriteLoopStart(){
  global $wp_query;

  if(in_the_loop() && !is_admin()){
    $the_posts = $wp_query->posts;
    foreach($the_posts as $post){
      $content = $post->post_content;
    	$content = apply_filters('the_content', $content);
    	$content = str_replace(']]>', ']]>', $content);
    	$content = do_shortcode($content);
      cSpriteFindImg($content);
    }
    if(SpritePreprocessorCache::preprocessorCacheNeedsCreation()){
        SpritePreprocessorCache::registerImageSources();
        Sprite::process();
    }
    add_filter('the_content', 'cSpriteImgReplace',50);
  }

}

And then here is the code to process the posts one at a time inside the loop_start hook.

Uninstall

When writing a plugin, you should make sure you clean up what you left behind after the plugin is removed. Luckily Wordpress gives us a handy hook when dealing with this. I have a file called uninstall.php:

if ( function_exists('register_uninstall_hook') )
	register_uninstall_hook(__FILE__, 'cSpriteUninstall');

This registers my uninstall function, which is located in the same file. The only changes I make to Wordpress are to add some options, so I just removed all the options I previously set.

function cSpriteUninstall() {
  delete_option('cSpriteJpgQuality');
  delete_option('cSpritePngCompression');
  delete_option('cSpriteCacheTime');
  delete_option('cSpriteForceNoPadding');
  delete_option('cSpriteClearCacheNow');
  delete_option('cSpriteProcessPng');
  delete_option('cSpriteProcessJpg');
  delete_option('cSpriteProcessGif');
}

Admin Options Page

Wordpress has a really nice way to handle your plugin options, it provides some special hooks and takes care of all the database stuff for you which is really nice. There are a couple ways to hook into it, the route I used is to first check if the user is acutally in an admin page, I have this function, which is a modified one from here:

if (!function_exists('is_admin_page')) {
	function is_admin_page() {
		if (function_exists('is_admin')) {
			return is_admin();
		}
		if (function_exists('check_admin_referer')) {
			return true;
		}
		else {
			return false;
		}
	}
}

I do this check before adding the hooks. In addition I do a security check to make sure the current user has access to modify options.

if (current_user_can('manage_options')) {
        add_action('admin_menu', 'cSpriteAdminMenu');
        add_action('update_option_cSpriteClearCacheNow', 'cSpriteClearCache');
 }

Only after these two checks will I add the hooks. The first hook is to create the options page link on the left nav bar. And the function it calls will actually provide another callback to display the options form.

function cSpriteAdminMenu() {
  add_options_page(__('cSprites Options', CSPRITE_PLUGIN_NAME), __('cSprites', CSPRITE_PLUGIN_NAME), 8, __FILE__, 'cSpriteOptionsPage');
}

This will call a function named cSpriteOptionsPage that will output all the HTML needed for the function. The second hook from above update_option_cSpriteClearCacheNow is used because when the cSpriteClearCacheNow option is modified I need to do some specialized work that the default WP options handlers do not take care of. This is the function it calls, essentially deleting all the files in my cache:

function cSpriteClearCache(){
  remove_action('update_option_cSpriteClearCacheNow', 'cSpriteClearCache');
  if(isset($_REQUEST['cSpriteClearCacheNow'])){
    Sprite::clearCache();
  }
  update_option('cSpriteClearCacheNow', 0);
  return 0;
}

The function needs to return the new value of the option being modified. Since this isn’t a toggle switch I will always return zero to reset that option. You will notice that I first had to remove the action, this is because if I dont't then the following call to update_option will keep propagating and get stuck in an endless loop.

Adding CSS and JS to You Admin Options Page

I wanted to spruce up my options page with some custom CSS and nice jQuery UI elements. Wordpress once again provides some more hooks to do this.

//Only load scripts and styles if we are on the csprites option page
      if(strstr($_REQUEST['page'], CSPRITE_PLUGIN_NAME)!== false){
        if (function_exists('wp_enqueue_style')) {
          wp_enqueue_style('cSpritesAdminStyles', trailingslashit(CSPRITE_CSS_URL_DIR).'csprites.min.css', array(), '', 'screen');
        }
        if (function_exists('wp_enqueue_script')) {
          wp_enqueue_script('cSpritesCheckbox', trailingslashit(CSPRITE_JS_URL_DIR).'jquery.checkbox.js', array('jquery'), '1.0');
          wp_enqueue_script('jquery-slider', trailingslashit(CSPRITE_JS_URL_DIR).'ui.slider.js', array('jquery', 'jquery-ui-core'), '1.0');
          wp_enqueue_script('cSpriteInit', trailingslashit(CSPRITE_JS_URL_DIR).'csprites.js', array('jquery-slider'), '1.0');        }

        add_action('admin_head', 'wp_print_styles', '100');
      }

Before loading the scripts and CSS I do a check to make sure that the admin is currently on the cSprites option page. The next function call is to wp_enqueue_script. This will put my custom CSS file in the style queue and will be outputted when the wp_print_styles function is called. Next I add my scripts to the queue with wp_enqueue_script. The cool part of this function is that you can specify dependencies for your scripts. In my case I wanted to use the jQuery Slider, so my script dependecies are jquery and jquery-ui-core. Wordpress will automatically put the code for these scripts before your custom JS files are added. The list of bundled scripts are located here in the Wordpress Codex.

Lastly I added an action which will call the wp_print_styles function when the header is called.

Tread Lightly

One thing to be aware of is that most of these hooks that wordpress provides will always be called at some point, in administrator and the frontend. It may be unnecessary for you to include CSS and JS in the header if your plugin isn’t being used on the page being viewed. It is important to make sure that your plugin is only being run when you want it to. This will avoid potential conflicts and wasted bandwith.

In addition, when using custom javascript, don't re-include libraries like jquery and prototype, because WP already has them and it does a pretty good job of handling them. So when appropriate you should always use wp_enqueue_script with the proper dependencies.

This will be an ongoing article once I get around to adding more stuff

if ( function_exists('register_sidebar') )
    register_sidebar(array(
        'before_widget' => '<div class="sidebar-box">',
    'after_widget' => '</div></div>',
 'before_title' => '<h2><span>',
        'after_title' => '</span></h2><div class="sidebar-box-inside">',
    ));

This isn’t exacly what I wanted as it will apply this to all of my widgets. So after a little more snooping around the web I noticed a WP filter that does what I want. The fitler is called dynamic_sidebar_params and it is called like this:

add_filter('dynamic_sidebar_params', 'my_function_callback');

Where my_function_callback is the name of your function. In my case I called it like this, in functions.php:

add_filter('dynamic_sidebar_params', 'sidebar_styling');

Next I had to figure out a way to style each element uniquely. I decided that the widget name would be a good identifier. Luckily this filter will pass you a field called widget_id, which has a sanitized version of the name which can be used for your CSS identifier. Here is what the params variable looks like:

Array
(
    [name] => Sidebar 1
    [id] => sidebar-1
    [before_widget] => <div class="sidebar-box">

    [after_widget] => </div></div>
    [before_title] => <h2><span>
    [after_title] => </span></h2><div class="sidebar-box-inside">
    [widget_id] => recent-posts
    [widget_name] => Recent Posts
)

Now that we have that ID, it is a simple function to write:

function sidebar_styling($params){
  $params[0]['before_title'] = '<h2 id="sidebar-'.@$params[0]['widget_id'].'"><span>';
  return $params;
}

Now WP will output the unique id for each heading and we can just style it appropriately. I used a big sprite to save resources:

Dynamic Sidebar

#sidebar-recent-posts span{display: none;}
#sidebar-recent-posts{
  background: transparent url(images/sidebar-titles/dynamic-sidebar.png) 0 0 no-repeat !important;
}
#sidebar-twitter-tools span{display: none;}
#sidebar-twitter-tools{
  background: transparent url(images/sidebar-titles/dynamic-sidebar.png) 0 -41px no-repeat !important;
}
#sidebar-categories span{display: none;}
#sidebar-categories{
  background: transparent url(images/sidebar-titles/dynamic-sidebar.png) 0 -82px no-repeat !important;
}
#sidebar-archives span{display: none;}
#sidebar-archives{
  background: transparent url(images/sidebar-titles/dynamic-sidebar.png) 0 -123px no-repeat !important;
}
#sidebar-links span{display: none;}
#sidebar-links{

  background: transparent url(images/sidebar-titles/dynamic-sidebar.png) 0 -164px no-repeat !important;
}

That is all there is, you can see the results on the page you are reading.
I found these articles/sites helpful:

• Dynamic Widget Classes for use in CSS

After some initial research I discovered that this markdown code is called “shortcode” in WP terminology. They have a whole Shortcode API. Now it was just a matter of finding the correct functions to get the shortcode to render.

I wanted to create a special template for the category, essentially a photo blog, so that it would look different from the other categories. This is pretty straightforward, just create a new file called category-id.php, where id is the id number of your category. In my case it was category-40.php. The next step was to copy all the code from category.php and paste it into category-40.php.

When displaying the post’s excerpt, Wordpress uses a function called the_excerpt(). Here it is in the default sandbox template:

the_excerpt(''.__('Read More <span class="meta-nav">&raquo;</span>', 'sandbox').'') ;

The problem with the_excerpt is that is echoes the excerpt directly to the screen. In order to return the excerpt value as a string we need to use get_the_excerpt(). Next after checking the shortcode API, I discovered a function that will run all the shortcodes on a given string and return the output as a string, do_shortcode().

So all we need to do now is combine these two functions, and move it into the template:

echo do_shortcode(get_the_excerpt());

And there it is!

But before starting any programming or design process, it is important to have a good set of tools and resources at your disposal. So the main purpose of this post is to detail most of the tools I used that may help you along with designing your own Wordpress theme.

Code Base

• 

  Wordpress Sandbox

  
  Wordpress Sandbox – The starting point for my theme. This is a great template that you can just add some formatting and customization and has almost all the functions you need to make a great template.

Development Tools

• 

  Coda by Panic

  
  Coda – I have tried quite a few IDEs and I have found anything that I enjoy working with more than Coda. Everything just seems to flow really well and some some great features like integrated SVN, a great FTP utility, SSH terminal and a lot more. I feel that it is a steal at only 99$.
• 

  Firebug

  
  Firebug – Firebug is a must have for any web developer. It gives you a very detailed look at webpages including the DOM, CSS, JS, HTML and also has a handy inspector for helping to solve formatting issues. I often use it to just quickly play around with different color and formatting values to find ones that work.

Javascript and CSS

• 

  Blueprint CSS

  
  Blueprint CSS Framework – I would say that most of the projects I do a lot of custom design work, I try to incorporate Blueprint. It is a great start for anyone wanting to make clean, multicolumn layouts. It also takes care of a lot of spacing and typography for you and works with IE6 too.
• 

  jQuery JS Library

  
  jQuery – There isn't much to say about jQuery that hasn’t already been said. It is the best JS framework out there and with the new release a lot of new features have been added.
• 

  Google Ajax Libraries

  
  Google Ajax Libraries – This service offered by Google allows you to let them host your javascript/ajax libraries rather than you having to host them. From the site “We take the pain out of hosting the libraries, correctly setting cache headers, staying up to date with the most recent bug fixes, etc. “
• 

  Superfish

  
  Superfish – This is a very cool dropdown menu that uses my favorite javascript framework jQuery. It is very similar to the previous iteration, S.ckerfish, but has some more options and it was very easy to implement into my wordpress template. I also like the support for IE6!

Other Tools

• 

  Fireftp

  
  Fireftp – This is a lightweight, easy to use firefox plugin that has a bunch of great features found in stand alone FTP programs. I like it mainly because it just sits as a tab in my browser and I don’t need to mess around with some other FTP program. You can also store and name all of your connections for easy retrieval.
• 

  Skitch

  
  Skitch – A fantastic screen capture program. Skitch is one of the most well designed programs I have ever used. It has a great user interface and is very useful for taking screen captures. There are also some great tools to add some graphics and text on top of your screen caps. I tend to use this program a lot during my development, especially when I need to send prototype images to my clients.

1. Aggregate your data and output it in some kind of structured format, usually XML
2. Request this information and generate some visualizations of it
3. Serve these visualizations through a web server

Pretty basic stuff. All of the tools that I have seen essentially make one or all of these processes easier. Unfortunately no matter what tools you choose, the rule of engineering stands: Fast, cheap, good – choose two

In this context it is more like: Less proprietary code, free software, easy to use/maintain – choose two. The good news is that all of the solutions described essentially have the same result: a web dashboard. The choice that needs to be made, is where you want to go with it? In the spirit of Enterprise software the clear winner is the solution with NO proprietary code, easy to use interfaces, and maybe some support.The biggest obstacle in this model is step 1, data aggregation and standardization.

Step 1 may involve lots of substeps that require some substantial development work including:

1. Connecting to various datasources
2. Writing queries to retrieve the data
3. Parsing the data into XML (or some other standardized format)
4. If interaction is needed, the data aggregator will also need to accept inputs and query dynamically

The issue is that all of these steps may differ among various datasources like oracle, csv, excel, etc. And yes, there are plenty of tools to help with this step. The main point though is that no matter what solution you choose, there will a substantial portion of development time needed for Step 1; even with a GUI you still need to write queries. It is really up to you if you want to follow this model and incur development time, however for an “executive” dashboard I feel it essential to follow this model.

The solutions I found can be divided into 2 categories: Web Reporting and Business Intelligence (BI). Web Reporting covers the basic aspects of the above model and nothing more; whereas the above model is just a subset of what  Business Intelligence can do. One thing to remember also is that its always “pay to play” with the support for the free solutions. They’ll give you the software, but you need to pay for their help. Also I tried to chose solutions whose free software should have all the features we need.

Web Reporting Solutions

• 

  Open Flash Charts Pie Chart

  
  1. Open Flash Chart – The simplest, (cheapest?) and fastest way to get some dashboards is to just write some code. If we are only connecting to one database, no problem using some free tools like Open Flash Chart. It is the simplest because we don’t really need to abstract any data, so step 1 processes are minimized. However it isn’t Enterprise level and makes big assumptions on the sources and format of the data. Any changes to the model will require code edits and support calls which doesn’t make for good sustainability.
• 

  Open Flash Charts - Area Chart

  
  2. WSO2 Web Application Server + Open Flash Chart – This combination is a little more enterprise. The tools are still free, which is great. The Web Application Server can handle step 1 pretty well and has a nice GUI interface to make all the data connections and output some XML as a web service, definitely enterprise level. However we still need a small middleware layer to accept the XML and generate the flash charts which require less (but still some) proprietary code as the first option. The only code changes that would be needed would be if you wanted say different charts, or a different layout, but could probably be done by someone with some basic HTML and scripting knowledge.
• 

  SAP Xcelsius Dashboard

  
  3. WSO2 Web Application Server + SAP Excelsius Engage – This combination is fully enterprise level. It could probably bet set up with no proprietary coding at all. Excelsius is stand alone program that allows one to graphically design the dashboards and connect them up with various datasources. The only problem is that it costs a minimum of $1000, and for the server edition (which I feel is unnecessary) could be as much as $5000. So that may be out of budget. But it does produce beautiful results.

Business Intelligence Solutions

I had never heard of Business Intelligence until I started doing research for this project. The best way I can describe it is that is a huge web based platform that seems to do everything. First off it has something called Data Integration. This is a very cool program that will not only aggregate different data sources, but allow you to transform among the datasources and output to pretty much anything. For example I could query an Oracle table and an Excel Sheet, aggregate those two into one dataset perform some transformation like sorting or pivoting and then output the result to a MySQL table. Its actually quite amazing. All of these data integrations can be set up as jobs that can be run in batch or run from command or run from some web service. From there it also includes a Web BI Platform, which is kinda like a portal that can show reports, dashboards, tables, basically anything and also has some admin for user control and permissions. It also includes tools to design and build reports and dashboards. It can also do complex analysis and data mining and will probably take out your trash and wash your car too.

Anyways, the benefits are intense, but may be a bit overkill if you just want a dashboard. Things this complicated can quickly turn from dream to nightmare however with these BI solutions almost all aspects can be managed through GUI tools. The real problem is that it will take a serious commitment to make it work because of its complexity. I am not sure they are the right solution for you, but maybe you will think of something else that it may be useful for.

• 

  Pentaho Dashboard

  
  1. Pentaho – A free, open source collection of BI tools. Again with the “pay to play” support. Pentaho offers all of the functions specified above and has GUI tools for managing all of them. I was able to actually install Pentaho and was able to generate some reports, however it was quite difficult to configure the server and generating my own dashboard required some very complex configuration. But the data integration tool was stellar, I think on its own it is a very powerful tool that could be used outside the scope of the BI platform.
• 

  IBM Websphere Dashboard

  
  2. IBM Websphere – I read all the papers for this but wasn’t actually able to try it out. But it is a huge system that probably does everything and I won’t even talk about it more because it probably costs many thousands. But it is a good basis to see what can be done.

Unless you see other potential value in implementing a BI system, I would say that option 3 under the web reporting is the best bet if you can spring for the software and development costs.

The idea of combining images into a larger one and displaying this using CSS tricks has been around for awhile. There are a couple big benefits to doing this: First it reduces the number of HTTP requests that the browser has to make, by combining say 5 images into 1 big image, the number of image requests has been reduced by 4. This can increase the effeciency of page loading and you can see gains in the speed at which your page is loaded. Second, when working with elements like rollover images, you can “preload” all of the states of the rollover and prevent flicker when users interact with these elements.

If used properly combining image elements in sprites can be very beneficial for web developers. However it is not without its problems. One of the most obvious issues is that the sprite needs to be generated before its component images can be used, you need to know which images will be used beforehand. This is fine for things like icons and buttons that won’t change very often, but is useless for any other images that will be displayed dynamically. Although it is good for very static elements like buttons and icons, if you need to make a change to any of these image elements, the entire sprite needs to be rebuilt, the sprite AND CSS needs to be rebuilt to reflect any change to its component images. Although there exist some scripts and websites that can handle this, it can still be a tedious process.

cSprites – A New Way of Doing Things

What cSprites aims to do is to solve these problems by generating CSS sprites on the fly. The general process of doing this consists of three steps:

1. Tell cSprites which images you want to use
2. Process the sprites
3. Use cSprites functions to display the images and relevant CSS code

Here is a sample of code that shows how these three steps are implemented:

<?php
//We need to include the main Sprite File which will setup the autoloading and config
require_once('Sprite.php');
Sprite::ppRegister('/images/image1.jpg');
Sprite::ppRegister('/images/image2.jpg');
Sprite::process(); //We MUST call the process function BEFORE we actually show any images
?>
<html>
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8">
        <?php echo Sprite::getAllCssInclude(); /*This will output the complete css of all of the sprites*/ ?>
</head>
<body>
<?php echo Sprite::image_tag('/images/image1.jpg'); /*outputs a pseudo img tag using css styles*/ ?>
<?php echo Sprite::image_tag('/images/image2.jpg'); /*outputs a pseudo img tag using css styles*/ ?>
</body>
</html>

Get cSprites with SVN

svn co https://csprites.svn.sourceforge.net/svnroot/csprites csprites