If you want to use a flash or javascript chart, scroll to the bottom for a different function.

The Chart

After looking for a lightweight flash or javascript charting solution, I decided for an archives page just plain CSS charts would be the way to go at first. So the output we are going for is something like this:

<dl class="barGraph 2008">
	<dt style="" class="label"><a href="">Jun</a></dt>
	<dd title="Jun" style="height: 200px;" class="bar Jun">6</dd>

	<dt style="left: 55px;" class="label"><a href="">Jul</a></dt>
	<dd title="Jul" style="height: 66.6667px; left: 55px;" class="bar Jul">2</dd>

	<dt style="left: 110px;" class="label"><a href="">Aug</a></dt>
	<dd title="Aug" style="height: 100px; left: 110px;" class="bar Aug">3</dd>

	<dt style="left: 165px;" class="label"><a href="">Sep</a></dt>
	<dd title="Sep" style="height: 133.333px; left: 165px;" class="bar Sep">4</dd>

	<dt style="left: 220px;" class="label"><a href="">Oct</a></dt>
	<dd title="Oct" style="height: 166.667px; left: 220px;" class="bar Oct">5</dd>

	<dt style="left: 275px;" class="label"><a href="">Nov</a></dt>
	<dd title="Nov" style="height: 100px; left: 275px;" class="bar Nov">3</dd>

	<dt style="left: 330px;" class="label"><a href="">Dec</a></dt>
	<dd title="Dec" style="height: 66.6667px; left: 330px;" class="bar Dec">2</dd>
</dl>

The Code

The code in the function is essentially a Frankenstein of the wp_get_archives function from the WordPress core, and this tutorial on creating vertical bar graphs. It pulls the year, month and number of posts out of the database, then formats them into a list suitable for styling into a CSS chart.

<?php
function ch_archive_graph($args = ''){
	global $wpdb, $wp_locale;

	//template tag defaults
	$defaults = array(
		'graphYear' => '2007',
		'limit' => '13',
		'graphHeight' => '200',
		'xIncrement' => '55'
	);

	$maxHeight = 1;
	$scale = 1;

	$r = wp_parse_args( $args, $defaults );
	extract( $r, EXTR_SKIP );

	if ( '' != $limit ) {
		$limit = absint($limit + 1);
		$limit = ' LIMIT '.$limit;
	}

	$where = apply_filters('getarchives_where', "WHERE post_type = 'post' AND post_status = 'publish'", $r );

	$query = "SELECT YEAR(post_date) AS `year`, MONTH(post_date) AS `month`, count(ID) as posts FROM $wpdb->posts $where GROUP BY YEAR(post_date), MONTH(post_date) ORDER BY post_date DESC $limit";
	$key = md5($query);
	$cache = wp_cache_get( 'ch_archive_graph' , 'general');

	$output = '<dl class="barGraph '.$graphYear.'">';

	if ( !isset( $cache[ $key ] ) ) {
		$arcresults = $wpdb->get_results($query);
		$cache[ $key ] = $arcresults;
		wp_cache_add( 'ch_archive_graph', $cache, 'general' );
	} else {
		$arcresults = $cache[ $key ];
	}
	if ( $arcresults ) {

		//Loop through to find the highest number of posts
		foreach ( (array) $arcresults as $arcresult ) {
			//number of posts in a month
			$total = $arcresult->posts;
			if($maxHeight < $total) $maxHeight = $total;
		}

		//Reverse the months
		$arcresults = array_reverse($arcresults);
		foreach ( (array) $arcresults as $arcresult ) {
			//Limit to one year
			if($arcresult->year == $graphYear){
				//Get month name, then appreviate, delete the second line if you want full month names
				$month = sprintf(__('%1$s'), $wp_locale->get_month($arcresult->month));
				$month = sprintf(__('%1$s'), $wp_locale->get_month_abbrev($month));
				//Get archive link
				$url = get_month_link( $arcresult->year, $arcresult->month );
				//Number of posts in the month
				$num_posts = $arcresult->posts;

				//Determine the scale and the height of the bar
				$scale = $graphHeight / $maxHeight;
				$height = ($arcresult->posts * $scale);

				//Put it all together
				$output .= "<dt class='label' style='left: ".$xOffset."px;'><a href=".$url.">".$month."</a></dt>";
				$output .= "<dd class='bar ".$month."' style='height: ".$height."px; left: ".$xOffset."px;' title=".$month.">".$num_posts."</dd>";

				//Increase the offset for the next bar
				$xOffset = $xOffset + $xIncrement;
			}
		}
	}	

	$output .= "</dl>";
	echo $output;

}

Styling the Chart with CSS

Styling the chart is made easier by the definition list.

.barGraph {
	height: 200px;
	margin: 0;
	padding: 0;
	position: relative;
	}

.barGraph dt {
	bottom: 0;
	list-style:none;
	margin: 0;
	padding: 0;
	position: absolute;
	text-align: center;
	width: 54px;
	}

.barGraph dd {
	border: 1px solid #005559;
	bottom: 0;
	list-style:none;
	margin: 0 0 1.5em 0;
	padding: 0;
	position: absolute;
	text-align: center;
	width: 50px;
	background-color: #00868B;
	border-right: 5px solid #005559;
	color: #fff;
	font-weight: bold;
	}

	.barGraph dd:hover {
		border: 1px solid #FA8000;
		background-color: #F5BA52;
		border-right: 5px solid #FA8000;
		color: #000;
		}

How to use the Graph

The function works just like any other template tag. Add the above function to your functions.php file and the CSS to style.css. Then call the chart in your template like so: <?php ch_archive_graph(); ?>

The template tag also includes a few options to make customizing it easier:

• ‘graphYear‘ this is the year of the archive you want to display
• ‘xIncrement‘ this is the width of the bars in the chart
• ‘graphHeight‘ this is the height in pixels of the chart
• ‘limit‘ this is number of posts you want to display

Example:
<?php ch_archive_graph('graphYear=2007&xIncrement=40&graphHeight=400&limit=6'); ?>

Bonus: For Javascript Charts

If you need the output for a javascript based chart, you only need to alter things a bit to get a javascript array or months and number of posts, then plug them into whatever charting you want to use.

function ch_count_months_js_output($args = ''){
	global $wpdb, $wp_locale;

	$defaults = array(
		'limit' => '',
		'before' => ''
	);

	$r = wp_parse_args( $args, $defaults );
	extract( $r, EXTR_SKIP );


	$where = apply_filters('getarchives_where', "WHERE post_type = 'post' AND post_status = 'publish'", $r );
	$join = apply_filters('getarchives_join', "", $r);

	$query = "SELECT YEAR(post_date) AS `year`, MONTH(post_date) AS `month`, count(ID) as posts FROM $wpdb->posts $join $where GROUP BY YEAR(post_date), MONTH(post_date) ORDER BY post_date DESC $limit";
	$key = md5($query);
	$cache = wp_cache_get( 'ch_count_months_js_output' , 'general');

	if ( !isset( $cache[ $key ] ) ) {
		$arcresults = $wpdb->get_results($query);
		$cache[ $key ] = $arcresults;
		wp_cache_add( 'ch_count_months_js_output', $cache, 'general' );
	} else {
		$arcresults = $cache[ $key ];
	}
	if ( $arcresults ) {
		$arcresults = array_reverse($arcresults);
		$posts = array();
		$months = array();
		foreach ( (array) $arcresults as $arcresult ) {
			$month = sprintf(__('%1$s'), $wp_locale->get_month($arcresult->month));
			array_push($months, $month);
			array_push($posts, $arcresult->posts);
		}
	}	
	print_r($months);
	print_r($posts); 

	echo '<p type="text/javascript">'; 
	echo 'var months = ["', join($months,'","'), '"];'; 
	echo 'var posts = [', join($posts,','), ']';
	echo '</p>';
}

Let me know if you use it or improve it!

The interface has gotten a huge and much needed update. The layout is still simple and clean but now is more polished and modern. Customizing the CSS and the look of theme is even better, the entire site was coded with the end user customizing the site in mind.

Download Checkmate 2.0

• View the Demo Site
• Checkmate 2.0 (3718)

Theme Options

There has been a total redesign of the theme options page, and also new theme options to make customizing Checkmate even easier. Checkmate 2.0 has the ability to automatically detect uploads for CSS, logos, and backgrounds, which can easily be changed via the theme options page.

Layout Options

I mentioned the layout has been updated, well now it is also more flexible. Several users wanted a true 3 column layout(columns on each side of the content), now this is possible along with a single right column, a split right column, or a combo right column. All this is controlled using theme options and widget areas, no code editing!

Ad Management

Ad management remains in Checkmate 2.0 unchanged. It is the same simple and flexible widget and theme options combination which gives you a quick and easy way to get ads on your theme.

Support

Support for Checkmate has always been a strong point and something I’ve strove to provide the best support a free theme offers. Alas WordPress comments and email aren’t the best solution, so all support will now be handled via Tender. Where you can ask questions, read documentation, and contribute to discussions.

Features

Checkmate already had a big feature list, now it is even bigger:

• Optional background header images controlled by theme options and uploads are automatically detected
• User defined style sheets, easily changed and uploads are automatically detected
• Auto detected logo controlled through theme options
• Optional featured categories
• Feedburner integration
• Drop down Page menu, with theme options to control which Pages show in the menu
• Optional footer widget areas
• Option to use Checkmate’s previous rounded corner look
• Ability to insert code or content into the header, after a post, or footer, without editing theme files
• Ad management
• Checkmate comes with 4 color themes for you to build on: grey, brown, cake, and dark.
• Custom widgets built for Checkmate.
• Tabbed Content Box – widget enabled
• Two, Three, or Split Column Design
• Feedburner Integration
• Optional Widget enabled footer
• Custom Icons
• Gravatar support for authors and comments(WordPress 2.5)
• Custom author, archive, tag, category, and search pages.
• Widget Enabled Sidebars

Updates

• Version 2.0.1
• Updated for WordPress 2.7
• Threaded Comments Enabled
• Utilizes post_class()
• Automatically Checks for Updates
• Version 2.0.2
• Trackbacks/pingbacks style change, automatically hidden
• Comments navigation for 2.7 fixed
• Upgraded theme to use jQuery 1.3
• disabled auto check for update for now due to server load
• Version 2.0.3
• Added Localization
• Changed title structure for single post pages
• Version 2.0.4
• Converted widgets to 2.8 API
• Fixed bugs in widgets

License

Checkmate is released under the Creative Commons Attribution-Share Alike 3.0 license. All I ask is that you link back to my website somewhere in your site.

• Checkmate 2.0 (3718)

Really Like It?

If you really like this theme and would like updates, more features, and new styles, why not grease the wheel and make a donation?
PayPal takes $0.35 commission for a $1 donation. Please enter at least $1.35 , thank you! Please enter the amount you wish to donate and try again. Transferring to PayPal, please wait...

Every mad scientist needs his Frankenstein. Mine just happens to be a website. Grunt Labs is my ongoing experiment, a place to play, test, and generally ignore browsers lagging behind. Grunt Labs is also a sign of things to come for the blog and Grunt, but more on that later.

So what is it really?

Grunt Labs is a repository for all my downloads(at least the good ones), projects, ideas, and general nuttiness I can come up with. Ever since I launched Checkmate I wanted a separate site where people could go get downloads and support. Grunt Labs will be integrated with Lighthouse in the future enabling issue tracking and all the goodness Lighthouse has to offer.

Playtime!

Grunt Labs is also a playground for me to stretch out my code and try out new things. It uses CSS3 and jQuery extensively and it is important to note this is an ongoing project. As I learn new things, better ways to code, and browsers evolve, the site will change and evolve into what I hope is ridiculously impressive.

The Design

The design is very basic and sparse. This is partly because of the crazy javascript going on and partly because the site is meant to change for each project. At this point the project pages don’t change much besides the background. That will change and vary from project to project.

The Code

The code consists of mostly basic html and CSS and the skeleton of the site was built on top of the Blueprint CSS Framework. Things get interesting when I mix in some CSS3 elements. To see the site in it’s full glory you’ll need Firefox 3 or a Webkit based browser like Safari.

Then comes in jQuery. My favorite javascript framework by far. This was my first push into the world of full page animation, and already I can see different ways of doing it. The page obviously uses some Coda style popups, full page animation, but it also uses some more subtle things. Some elements are dynamically added and removed via javascript. I’ve got plans for much more javascript in the near future, but that has to wait on something being released ;)

I think I’ll save explaining more about the javascript in detail for another post.

via FFFFOUND!

I decided to build an identity around a logo I had done, which is pretty much ass backwards from the way most people would do it. The gorilla was originally for a side project but now fronts the GRUNT name which I truly believe is an appropriate name and identity for me(being the megalomaniac I am). Domain inspiration came from my friend Will, which also included several other “colorful” suggestions.

The website is built on what else but WordPress, backed up by jQuery and the usual suspects. The portfolio is still going to get attention(i.e. — I need to find all that stuff), pagination and some separation. But if I didn’t launch it, I would tinker with it for another few years. So expect a few more features and eye candy in the future.

So what about curtishenson.com?

Ch-Ch-Ch-Changes. Well just a few. I always thought this current design was a bit busy and crowded, so I’ll be opening things up and creating white space(dark space?). I’m also going to get rid of everything that doesn’t have to do with a blog or me. A reorganization of content is coming which will also probably mean some more regular posting and more RSS feeds so you can tune how high the crap pushed to your RSS reader gets.

There is also going to be a new sub-site which is going to contain all the downloads and side projects I do and maybe even a support forum as the comments are getting a little crowded for Checkmate.

New Projects

Just a quick heads up on some projects. I promise I am going to get started on Checkmate ver. 2.0, which will be light years ahead of the current version, as soon as I get some time. I’ve also started programming a lifestream/tumblelog app in ruby on rails, so look for that in the future.

I think Checkmate is a great theme and I want to build on its frame and use what I’ve learned to improve it. I want to update the look of Checkmate and add some more functionality to the theme. This is where all you users come in.

I want to know what the people that are interested in Checkmate want out of the theme’s next version. What do you want to be able to customize? More custom widgets? More theme options? Let me know what features you would like to see Checkmate have!

They’ve recently added jQuery, and I’ve started using it with this new design. So far it is working great, but will it last? Anyone who uses Google Analytics knows that at times it can slow your page down. Although Google says this is a faster alternative to using your own server, I think the chance for slow response time is still there.

The Real Benefit

However, offloading the file to the Gibsons over at Google is not the main reason this is faster. Caching is what makes this so much faster, after the initial download, the library is cached and no longer re-downloaded at every website. For example if a user visits jQuery’s site, then visits mine, they will no longer have to wait for the jQuery library to load as it will already be cached on their computer. Obviously this only works if people start using the service. I imagine plenty of web 2.0 companies will start using the service, which will benefit everyone, and you should use it too.

Security Risks

All is not rosy though, there is some security risk when using the service. If someone was able to hack into the service(unlikely) or someone with access was to turn evil(more likely, think postal workers) they would be able to inject javscript into your site. This would be a flawless victory and fatality(<-- mortal kombat reference) for the hacker. I think there is a VERY small chance of this actually happening, so the reward well exceeds that risk.

Another point to consider is Google will have access to data about your website it may not normally have access to. This doesn’t bother me in the least as I worship at the Google temple, but for some the invasion may be more of a serious issue.

How do I use it?

Thats easy, you can either call the new script in a simple <script> tag like I am currently doing. Or use the google.load function.

Below is the script tag I use which calls the minified jQuery library. The url structure is pretty straightforward: name of the library, version, and file name. I believe using 1 as the version number gets the latest version, but I’m not 100% sure. The structure below uses a version wild card to get the latest 1.*.* version. I would recommend using the full version number for better results(see Mark Lucovsky comment).

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"></script>

The next example uses the google.load function and is straight from the Google page.

<script src="http://www.google.com/jsapi"></script>
<script>
  // Load jQuery
  google.load("jquery", "1");

  // on page load complete, fire off a jQuery json-p query
  // against Google web search
  google.setOnLoadCallback(function() {
    $.getJSON("http://ajax.googleapis.com/ajax/services/search/web?q=google&;v=1.0&;callback=?",

      // on search completion, process the results
      function (data) {
        if (data.responseDate.results &&
            data.responseDate.results.length>0) {
          renderResults(data.responseDate.results);
        }
      });
    });
</script>

For more information about the API see Google’s AJAX libraries page

The Design

I liked some things about the previous design like the color scheme(for now). But I didn’t like the background much, and it left me limited in what I could do. This time around I wanted a “cleaner” look, but not too clean. This proved to be harder than I thought, but eventually I combined two other designs into what you see now. I set out to freshen everything up and give it a good scrubbing and I’m happy with results(for now). I did sacrifice whitespace, almost all of it. I think I may need to address that in the future because I think the site looks somewhat “busy”(What do you think?).

The Layout

This new design uses almost the same grid as the previous designs, but now it actually sticks to it throughout the site. I’ve got some plans for the future and I wanted(needed) a strong grid and to actually stick to it this time. The homepage is now something I’m happy with, it meets all my goals, and I will be able to update the top with my latest projects. The site in whole is much more structured and hopefully easier to navigate now.

The Portfolio

This site used to be my portfolio, but when I started blogging a trashed it. Since then it felt like this site had a bit of an identity crisis. It wasn’t a really just a blog, but wasn’t a portfolio either. I feel I’ve integrated by business and the blog much nicer now. I wanted a flashy portfolio, but simple and effective at the same time. I decided to use some AJAX for it, mainly because I wanted to experiment. The result is a cool portfolio…that barely works at the moment. I’m still working on the kinks and usability issues(like bookmarking) so if you spot any errors(or better ways of doing it) please let me know. It is also pretty sparse over there as I haven’t really uploaded much to it yet.

Cleanup

I still haven’t done my ritual of going through the code and cleaning it all up and making it pretty so the backend is not optimized at this time. In fact the code for this website looks like a monkey grabbed my keyboard. But it works, which is the most important part, unless you are a one of those people that reads the code to see how un-semantic sites are. If you are one of those people(I read web-pages in pure HTML), you might have a heart attack looking at the code right now(give me a week, for your health’s sake). The javascript also will need some attention at some point, but that will likely happen when jQuery 1.5 is released.

RSS/XML to the Rescue

There are a few sites that take government data and organize it into usable presentable information a non Tom Cruise type being can interpret. But getting this data means manually scraping it, which …well… sucks. I’m not going to spend my time doing it, and I doubt you would either.

Well the smarty pants guys(I’m just jealous) over at Princeton have written a paper suggesting stop the nonsense redesigning of government websites, and deliver the raw data via a structured format like RSS and XML. This would allow much more talented people to grab the data and run with it. I can only imagine the beautifully usable sites that would come from easily obtainable data.

Throw in an API

It would be pushing it, really pushing it, but creating an API for certain government websites could open all sorts of avenues. Imagine a well done interface for the DMV, complete with AJAX, smooth gradients, and calming pastel colors. I don’t know if we’ll ever see this type of integration but it is nice to imagine.

Plan It Out

Bimmerfest, ah how I love thee. Tons of nice BMWs and even more traffic, a lot more traffic. Bimmerfest has been going on a few years now, and there is always a traffic jam. I can excuse the traffic outside the event but it is inside the event that gets my panties in a bunch. Whats this got to do with web design? Not a whole lot but I’ll try to relate it.

With some planning the traffic inside the event could be kept mostly flowing. There is a lot of bottlenecks when people are trying to leave and enter at the same time. This can also happen in design. There can be bottlenecks or choke points in navigation, places were clicking stops being intuitive and grinds to a halt, this can lead to visitors getting frustrated and leaving.

Planning out navigation(or directing traffic) will not only prevent choke points but also help you better plan out your website. Visitors will be happy, you’ll be happy, and I’ll get a good parking place at the car show.

Make It Obvious

The next stop on my trip was the Red Bull Air Race, which I highly recommend seeing in person…once. My first problem was when I bought tickets I assumed they were seats, they weren’t, so I had to push through the 54,000 people to get to where I could see. Oh well for me, but if you mislead visitors on your website(especially in sales) they will not be so understanding.

My second problem was finding the place. No directions on the website(which with all the map API’s is inexcusable) and no signs pointing the way in downtown San Diego. I ended up walking 15 minutes to the island because even people from San Diego couldn’t figure out where to go.

So make things painfully obvious! Don’t assume because you know where South Embarcadero Island is that everyone else does. In design this would be akin to mystery meat navigation or links with no visual cues. People would rather have their hand held and treated like a 3 year old than to not be able to find the information at all. So put out your hand, spit shine their cheek, smile, and take them to where they can give you money.

Leave a Backdoor

One thing about Bimmerfest is if you know Santa Barbara and the entrances, you can get in without waiting very long. Like experienced or returning visitors, I know my way around, and can go through the backdoor.

Depending on your type of site, you may also be able to leave navigation aimed at returning users. This way more mature users can bypass the hand holding and get straight to what they want. Keyboard shortcuts are a great way to do this, experienced users will know they are there, but it won’t get in the way of new users.

Sum it up

Plan out traffic whether it be foot, car, boat, or packets on the inter tubes. Make sure you have a plan to handle all the people.

Tell people where to go. Like a sheep herding dog, bark until everyone goes in the right direction. This can be a map, signs, ropes, web addresses, whatever just make sure it is plastered EVERYWHERE.