Some pop out points:

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

No related posts.

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.

No related posts.

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.

Related posts:

1. Press75 Releases Two New Plugins here are a few things that have been the realm...
2. CSS Preprocessors I’ve recently had my eyes opened to CSS preprocessors and...
3. Creating a Chart on Your WordPress Archives Page One part of WordPress that I've never been overly impressed...

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

No related posts.

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.

No related posts.

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!

Related posts:

1. DRY WordPress Theme Coding Don't Repeat Yourself is the rule, the name of the...

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.

No related posts.

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

No related posts.

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 Encoder. Go check them out, and let Jason know how awesome they are.

Related posts:

1. WordPress 2.9 Thumbnails So I finally got around to using the new built...
2. DRY WordPress Theme Coding Don't Repeat Yourself is the rule, the name of the...

WordPress themes seem prone to this sort of repeating your code. I believe this mostly has to do with WordPress theme developers not being “developers” in a traditional sense, more designers who can code. This habit of repeating code also comes from introductory tutorials and the like which have you creating templates which are mostly the same thing over and over.

Themes are getting more and more advanced, WordPress itself is getting more flexible. As these themes get more complex they need to be simpler. I learned this with my Checkmate theme. It was quickly getting out of hand with the numerous files, lack of organization, and changing code took entirely too long.

K.I.S.S.

I want to rock and roll all night, and party every day too, but I’m busy changing one line of code…in ten different template files. That shouldn’t happen, my new goal is now to create the lightest template files I can, and be heavy on other tools. I also like to cut down on the number of templates I have. The simpler the file structure and code the easier to change or update.

HTML and CSS strive to separate style from content, so you should also try to separate logic from your views. Essentially separate your php from your html as much as possible. This is much more apparent on really complex themes requiring more than your basic template tags.

The Tools

So what tools are there to help in the endeavor to not repeat ourselves? There are quite a few stupidly useful ones.

Template Hierarchy

The first step is understanding what files WordPress looks for at any given time. This can help you strategically use files and save yourself a lot of copying and pasting. The best place to learn about hierarchy is the WordPress Codex Template Hierarchy page.

A quick example of how I use the hierarchy is by using archive.php to display category, tag and author pages. Often these pages are the exact same with minimal changes. Using conditional statements you can serve parts of the page depending on what is requested. Checkmate’s archive file uses this type of system to dynamically display information for tags, categories, or author information.

Conditional Statements

After you know the template hierarchy, you’ll need to understand the use of conditional statements to make the most of your template files. I’ve written twice about conditional statements: Write Less Code, and Complex WordPress Conditional Tags. The WordPress codex page on Conditional Tags will explain everything in great detail.

Conditional tags are just ways to create powerful PHP if else statements very easily. You can use them to dynamically display select parts of a template only in certain specific circumstances.

The Functions File

The functions file is your friend, a powerful friend, a good friend, a wing man of sorts. I use the functions file to call all my other goodies, allowing me to keep a nice clean structured theme folder. Pearsonified has a great article on how to use the functions file. Toxane also has a good article with some examples for WordPress’ function file. The function file can be used

PHP Itself

Some basic PHP can go a long way coupled with some of WordPress’ functions. Learning to read the API and knowing the lingo can go a long way in accomplishing whatever you want.

Helper Functions

In the near future I’ll be releasing my WordPress Tools Project, which is a bunch of functions all ready to be included into themes to help do some mundane things. But you don’t have to wait for me, make up your own, go back into old themes and abstract out some of the advanced things you do. Always using the same HTML code around a template tag? Put it into a function and make your own template tag.

I’ve started posting some of these functions to serve as examples: WordPress Navigation Helper, and Dynamic Multi-Level Page Menus.

Some Tips

Try to keep things organized, for instance put all your javascript in one folder, all your php functions in another, css in another.

Develop a solid framework. I find myself working off Checkmate a lot, I know it very well and know what can be stripped out immediately. Developing a solid theme and releasing is a great way to find errors in your code, essentially it is like having thousands of testers in all sorts of different scenarios.

Learn from other themes. There are a few themes that do this extremely well. Thematic is one of my favorites.

Related posts:

1. Creating a Chart on Your WordPress Archives Page One part of WordPress that I've never been overly impressed...
2. Press75 Releases Two New Plugins here are a few things that have been the realm...