Register the Custom Post

The first thing you see here is the register_post_type function which starts everything. You can read about this on the codex page or Justin Tadlock’s post. These two pages should get you up to speed fast.

Actions and Filters

The next bit of code are all the callbacks. The first two deal with adding the meta box and saving it. The next two change the columns in the WordPress admin when viewing a list of the custom posts. The last is for using custom template names.

The Meta Box

The first two functions link_url_meta_box() and save_post_data() deal with the added meta box. I’ve kept things simple here so it should be easy to follow what’s happening.

Custom Columns

When looking through the list of your custom post you’ll probably want to display custom columns so it’s easier to find what you want. The nav_columns and custom_nav_columns control this: nav_columns sets everything up, and custom_nav_columns determines what will be listed there.

Custom Template Names

WordPress by default will use “single-link.php” for our template name since we named the custom post type “link“. But if you wanted to use a different template name for instance “foorbarlink.php” you can change it using this part of the code. If you’re happy with WordPress’ default naming you can exclude this completely.

Below is the function for a link type post, one that you might use in a tumble log. It’s a basic example of how to use the Custom Post Type feature in WordPress 3.0+

Some pop out points:

• Design at the actual scale of the final device.
• Design for the product not the keynote.

Terry Chay wrote up Faster PHP fo shizzle—HipHop for PHP which does an excellent job of breaking down who HipHop will help, and who it will not.

The basics go like this. Check out Matt’s post and also visit Mark Jaquith’s and Kremalicious‘ posts on the subject for more info.

I love vintage ads! Nothing is more inspiring to me than some 1920′s typography, and nothing is more hilarious than 1960′s car ads. So the Vintage Ad Browser is just about the greatest thing on the internet to me. Definitely take some time out to browse it and bookmark it, you will need this for inspiration one day.

Check out the Vintage Ad Browser

What do I think

Honestly I don’t have a fixed position on the issue of Sass, LessCss, or preprocessors in general yet since I haven’t used them. However I know what I want in a preprocessor. The first and biggest issue to me is syntax, I write CSS like Nathan, everything on one line. I know CSS, I have years of experience with it’s syntax, I don’t want to learn a new syntax. That counts Sass out, for now (a new syntax is being developed for Sass that is more tightly coupled to CSS).

The second is features. Ultimately this will be the deciding factor for any project. Right now Sass and LessCSS look similar, although Compass and Sass look incredibly powerful together.

Most of us have tons of experience with CSS and are reluctant to move to anything new (remember what it took to get you away from table based layouts?) regardless of CSS shortcomings. But nonetheless CSS does have a few large shortcomings that need to be addressed and it looks like preprocessors are going to be the answer for right now.

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!

What is Tender?

It’s a support web app, I know sounds boring, and it is to be honest. But some of us have to deal with supporting things. Tender makes this incredibly easy and painless. Tender has some features which set it apart for me. Numeral uno is I can manage support requests from email, I hardly ever have to actually log into the website. Second is the integration with Lighthouse, my ticket tracking app of choice. When I first released Checkmate I encouraged people to post tickets to my lighthouse, it was a massive failure. However my Tender has been a success and has made responding to support requests much less painful.

Why Do I Care?

If you don’t support any software or services you don’t care, you shouldn’t care, and you should be happy you don’t deal with it. If you do, OR you SHOULD be supporting something(*cough* your WordPress themes *cough*) then you should care. Tender is an efficient, user friendly way to offer quality support. And this new widget is just an example of their commitment to making things easy for the users, who are the most important part of your software/service.

This uses the delay, and easing plugins for jquery. The below example includes the animation just as an example.

$('#link').click(function(){
        // Get the url of the link
		var toLoad = $(this).attr('href');

			// Do some stuff
			$(this).animate({
				marginRight: '50px',
				marginLeft: '-175px'
			}, 300, 'easeOutSine').animate({
				marginRight: '-38px',
				marginLeft: '-120px'
			}, 500, 'easeOutBounce');
			// Stop doing stuff

        // Wait 700ms before loading the url
		$(this).delay(700, function(){
			window.location = toLoad;
		});

        // Don't let the link do its natural thing
		return false;
});

There are a few things that have been the realm of premium themes and some rare free themes: post thumbnails, and easy video embedding(that doesn’t suck). Press75 just released two simple yet powerful and incredibly useful plugins: Simple Post Thumbnails and Simple Video Embedder. Go check them out, and let Jason know how awesome they are.