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');
  }

}

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!

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

Here is the original Image I used. Initially I thought I could just use the basic image copy functions in GD and it would take care of the rest. Well this isn’t the case. This is the code I initially tried. Essentially creating a true color image and just using imagecopy to copy the gifs into the sprite.

 protected static function handleGif($spriteImages, $imgSize, $filePath){
    $sprite = imagecreatetruecolor($imgSize->right, $imgSize->bottom);

    foreach($spriteImages as $spriteImage){
      $tempImage = imagecreatefromgif($spriteImage->getPath());
      $position = $spriteImage->getPosition();
      imagecopy($sprite, $tempImage, $position->left, $position->top, 0, 0, $spriteImage->getWidth(), $spriteImage->getHeight());
      imagedestroy($tempImage);
    }

    ob_start();
    imagegif($sprite);
    $spriteOutput = ob_get_clean();
    imagedestroy($sprite);
    SpriteImageWriter::writeImageFile($spriteOutput, $filePath);
  }

Here is the output from the above code. You will notice that GD scrapped the transparency and opted for a black background. Back to the drawing board I guess. The next chunk of code shows the next iteration. Basically allocating the “black” color (which most gifs use as transparent) and setting the newly created image to use that as the transparent color.

protected static function handleGif($spriteImages, $imgSize, $filePath){
    $sprite = imagecreatetruecolor($imgSize->right, $imgSize->bottom);
    $trans_color = imagecolorallocatealpha($sprite, 0, 0, 0, 127);
    imagecolortransparent  ( $sprite, $transparent);

    foreach($spriteImages as $spriteImage){
      $tempImage = imagecreatefromgif($spriteImage->getPath());
      $position = $spriteImage->getPosition();
      imagecopy($sprite, $tempImage, $position->left, $position->top, 0, 0, $spriteImage->getWidth(), $spriteImage->getHeight());
      imagedestroy($tempImage);
    }

    ob_start();
    imagegif($sprite);
    $spriteOutput = ob_get_clean();
    imagedestroy($sprite);
    SpriteImageWriter::writeImageFile($spriteOutput, $filePath);
  }

And this is the output from the above code. As you can see we now have some transparency, however big chunks of the image have been made transparent. Specifically where the color in the image matched “black”, it was replaced by a transparent color. So last try now. Here is the final code, which first involves setting some flags that tell it to maintain the transparency. Then create a transparent rectangle over the whole image and next set the image color to transparent. So a little more overhead however the results are great.

protected static function handleGif($spriteImages, $imgSize, $filePath){
    $sprite = imagecreatetruecolor($imgSize->right, $imgSize->bottom);
    imagealphablending($sprite, false);
    imagesavealpha($sprite,true);
    $transparent = imagecolorallocatealpha($sprite, 255, 255, 255, 127);
    imagefilledrectangle($sprite, 0, 0, $imgSize->right, $imgSize->bottom, $transparent);
    imagecolortransparent  ( $sprite, $transparent);

    foreach($spriteImages as $spriteImage){
      $tempImage = imagecreatefromgif($spriteImage->getPath());
      $position = $spriteImage->getPosition();
      imagecopy($sprite, $tempImage, $position->left, $position->top, 0, 0, $spriteImage->getWidth(), $spriteImage->getHeight());
      imagedestroy($tempImage);
    }

    ob_start();
    imagegif($sprite);
    $spriteOutput = ob_get_clean();
    imagedestroy($sprite);
    SpriteImageWriter::writeImageFile($spriteOutput, $filePath);
  }

The above code will do the job of copying the transparent GIFs for my sprite generation. However one issue I ran into when generating my sprites is that when I had a lot of different GIFs in one sprite there was some small but noticeable dithering. I assume this is because while each individual GIF can use its own color pallete, when you combine a lot of them they can all only grab from the generated pallete.