The problem with using the ID class to identify an individual page is that a page ID can quite easily change when working with a development version or even migrating your blog from one install to another.

One solution to this problem is to append the post type and slug as a class name to the body, e.g. ‘page-about‘ or ‘post-hello-world‘.

Simply add the following to your functions.php file to automatically append the classes:

function add_body_class( $classes )
{
    global $post;
    if ( isset( $post ) ) {
        $classes[] = $post->post_type . '-' . $post->post_name;
    }
    return $classes;
}
add_filter( 'body_class', 'add_body_class' );

Note: This method will also apply to individual post pages and custom post types.

If you need to add additional class names to the defaults without having to manually add them every time you insert a new image, you can make use of either the get_image_tag_class or get_image_tag filters.

The first of the two filters is get_image_tag_class, which allows you to add a value or change the class attribute completely:

function add_image_class($class){
	$class .= ' additional-class';
	return $class;
}
add_filter('get_image_tag_class','add_image_class');

The second function is a little more flexible and provides the ability to alter the image tag completely, thus providing functionality to add the image dimensions to the class names as shown in this example:

function add_image_class_dimensions($html, $id, $alt, $title)
{
	if (preg_match('/width="(d+)" height="(d+)"/', $html, $dimensions)) {
		list(,$width, $height) = $dimensions;
		$html = str_replace(
			'class="',
			'class="wp-image-width-'.$width.' wp-image-height-'.$height.' ',
			$html
		);
	}
	return $html;
}
add_filter('get_image_tag', 'add_image_class_dimensions', 10, 4);

In brief, this function matches the dimensions found within the image tag (width and height) and appends them to the front of the class attribute.

Applying both of these filters will output something similar the following code in the TinyMCE editor:

<img class="wp-image-width-200 wp-image-height-100 alignnone size-full wp-image-123" title="Image Title Here" src="/wp-content/uploads/2010/12/my-image.jpg" alt="" width="200" height="100" />

To make use of this functionality you will first need to add the filter and function to your theme’s function.php file. Once this is done, add a new image to your post or page and you will see the custom class names are appended to the image tag. They will not be applied to any existing images within your content, you will have to insert them again from the media library for the changes to be applied.

These are only two examples of what results can be achieved, further adjustments and alterations can be easily added using the two get_image_tag filters.

The main page should act as overview of everything that is going on, therefore I wanted to avoid overcrowding it with lots of large graphs and instead simply show the basic trends.

A few months back I came across an implementation of Sparklines – data-intense, design-simple, word-sized graphics – which are often used to demonstrate stock market activity in a simple visual graphic.

I was just going to use a pre-made script from the many already available, but instead decided to knock one up myself and created a small PHP Class to generate and output a sparkline image using the GD Library.

To create a sparkline I can now simply include the class and then initiate it in a variation of the following:

$sparkline = new Sparkline();
$sparkline->data = Array(3,38,2,8, ... ,38,13,4,23);
$sparkline->output(); // Display image

This PNG image is generated and output to the browser:

A number of other setup options are available to customise the output further:

$sparkline->bg = '#000000'; // Background colour
$sparkline->width = 150;
$sparkline->height = 50;
$sparkline->line = '#336699'; // Line colour
$sparkline->points = '#333333'; // Start & end points
$sparkline->thickness = 2; // Line thickness
$sparkline->scale = 5; // Anti-aliasing scale size
$sparkline->output('saved/test.png', true); // Save to location and display

All colours must be provided in hexadecimal format and if you are attempting to save the image the destination location must be writeable by Apache.

The Sparkline PHP Class source code is available for anyone to use as they may like, although I must confess it hasn’t been fully tested as yet!