Curtis Henson - Articles

WordPress Custom Post Type and Meta Boxes Example

2010-04-30T00:00:00+00:00

WordPress 3.0 is coming soon and one of the biggest new features is the ability to add custom post types. Making these custom post types is pretty easy, below is a simple but complete example of creating a link type custom post.

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+

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.

Styling the Chart with CSS

Styling the chart is made easier by the definition list.

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.

Let me know if you use it or improve it!

Tender Quietly Adds Killer Little Feature

2009-06-16T00:00:00+00:00

Tender just rolled out a new javascript widget which allows you to insert a form into your site which will post straight to Tender. The widget even provides links to documentation, and the creation of a user account for the person. All this without the user having to leave your site, I'll be integrating it here soon. So right now you probably have two questions: What is Tender? and Why Do I Care?

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.

Quick Tip: Delay Page Loading with jQuery

2009-04-07T00:00:00+00:00

On a site I recently worked on I wanted to have an animation before the next page loaded. What I wanted to happen was: user clicks a link, animation plays out, page is loaded normally. It is a nice little effect, but this is probably a trick you want to use sparingly…please…use it sparingly.

This uses the easing plugin for jquery. The below example includes the animation just as an example.

Displaying the children

The meat of this example is this next part, displaying the children is in thought a very simple process, in practice it takes a bit of pounding a square peg into a round hole. We are still using the wp_list_pages function, and most of this code has one purpose, to determine the right depth to pass to wp_list_pages.

Initially we'll check if a page has any parent pages using $post->ancestors and count the ancestors. I count the ancestors to determine the depth used later. Then check if a page has any more children. We'll then separate those pages with children and those without.

All of the counting done above($n, depth, ancestors, blah blah) is all done in order to display only the first child level. This way you are not showing all the children of the top level page.

The whole function

In the final function I've added some output for the children and combined everything above.

Updated 4/20/09 - the function has changed slightly since the explanation above.

The future and spaceships

That is one way to do multiple level menus in wordpress, right now this function is only using pages, but I will be expanding it to use categories as well. There are actually quite a few ways I want to expand this in order to make it truly useful. This function is part of the larger WordPress Theme Tools project that I'm starting. If you have any suggestions for this, find a bug, or know a better way, let me know!

Note: I've updated the code on 4/20/09 but the function still works the same. As it is right now the sub pages are displayed in the default nested way that WordPress naturally does it. The benefit of the function is that it only shows one level under the parent page instead of hard coding the depth or showing all the children.

Get More Design Control Over WordPress 2.7 Comments

2009-01-14T00:00:00+00:00

So you got this awesome design all ready for WordPress 2.7, you even got how those pesky threaded comments planned out perfect! Oops, didn't you know? WordPress' comment function well, not lacking for a better term, sucks...a lot. It'll probably get better in the future, but what to do right now? Bend them to your will, no mercy. That is what Chad Coleman has done, and thank God it was him and not me.

Go read his article Comment Design For WordPress 2.7

Separating and Hiding Trackbacks with Jquery in WordPress 2.7

2009-01-12T00:00:00+00:00

If you're designing and coding themes for WordPress, please, I beg you, for love of all that is digitized and Tron like, separate your trackbacks and pingbacks from your comment threads. There is nothing more frustrating than having to navigate through a horde of unholy spam links to see the next comment in a thread. I also personally believe(ie I have no proof whatsoever) that a comment threat mucked with trackbacks correlates directly with less commenting. But trackbacks aren't all bad, some people (not me) use them to find out more about the blog post, theme, story, whatever...so I wouldn't just toss them aside like fruit cake.

If you look at most new well thought out themes, trackbacks are separated into another tab, or somehow minimized/hidden from the user that doesn't want them. WordPress 2.7 changed the commenting code quite a bit, and now separating everything is even easier. Add a little jQuery magic and you can hide and show those trackbacks on demand. Enough with this banter, lets rock out with our text-editor out.

First a little catchup

So things are a wee bit different in the ol' comment file in Wordpress 2.7. I highly suggest taking a peek at Otto's WordPress 2.7 Comments Enhancements if you haven't already. He outlines how the new comment loop works, and all the spiffy javascript for threaded comments.

Once you got a grasp on the comment changes in 2.7, checkout Matt's article on separating pings from comments. I'm not going to go into too much detail so if you find yourself not understanding a part of the code, try checking out those articles.

Separation makes the heart grow fonder of pings

I think that is the saying. Lets start with the comment loop, first the whole thing:

There is the comment loop with the trackbacks already separated. The only trick to the separation is setting the 'type' option for the wp_list_comments function. Set the 'type' to 'comment', for comments, and pings for ...well pings(trackbacks). Simple enough right? Let's take a closer look at the HTML.

This is really the meat of the code, you can see the two blocks of code, one for comments and one for pings. The only real differences are setting the 'type' for wp_list_comments and changing the id and class names for styling. There is also one addition for the pings, a link to show them(it has a class of 'show_trackbacks'). You can either put this link in the actual code, or inject it using javascript.

The jQuery

There's a few ways to do this but I'm going to go with a simple slide up and slide down. First we'll hide the trackbacks by calling slideUp() then add a function to detect the click on our show_trackbacks link which will call slideDown().

$('ol.trackback').slideUp();

$('.show_trackbacks').click(function(){

	$('ol.trackback').slideDown();

});

That's it?? Yeah, pretty simple actually, so I'll leave you with something else useful. A full comment file ready for wordpress 2.7.

The whole thing

Checkmate 2.0: A Free Premium WordPress Theme

2008-12-12T00:00:00+00:00

Checkmate has been a very popular WordPress theme with thousands of users worldwide. Now it is has been made even better. I've learned a thing or two from the users of Checkmate, listened to the feature requests and I've decided it is time to release Checkmate 2.0. Checkmate 2.0 is built on the original version of Checkmate, but could almost be considered a completely new theme.

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

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.

Download Checkmate

WordPress Posts Navigation Quick Tip

2008-12-08T00:00:00+00:00

Say you want to use the next_posts_link() and previous_posts_link() functions to display your post navigation. But you want to use some clever lookin' arrow images(or just plain boring text). You also want the images(or that plain boring text) grayed out when there are no more pages to link to.

Whoa there's the problem, the next_posts_link() and previous_posts_link() functions don't output anything when there are no more pages to link to. A little PHP to the rescue.

The Code

The code is pretty easy, just an if else statement. We are going to use the get_next_posts_link() and get_previous_posts_link() to test if there is a link or not.

To break it down a bit, there is an if else block for each link. The if statement checks get_next_posts_link() or get_previous_posts_link(), if it returns a link we call next_posts_link() or previous_posts_link() if it doesn't we echo our own code.

Something to keep in mind is that normally "next" refers to older posts and "previous" refers to newer posts, which can be confusing while looking at the code.

The Future of Blogging

2008-11-10T00:00:00+00:00

Blogging is changing, it has always been changing, and will continue to change. Blogs used to be about people's cats and weekend photos, blogs then became mini news outlets, then myspace came along and they were about cats again. Somewhere along the way blogs gained credibility and became major news sources, magazines, or just a wealth of useful information. And the next step is cutting down the ever growing number of feeds in your reader to just a few, corporation sized blogs.

Blogs make money, and in some cases, a lot of money. But these are not blogs as a layperson would know them, they are huge sites with a massive amount of information, several posts a day with several different authors. I call them "Uber Blogs", mostly because I'm a nerd. These "Uber Blogs" are more like publications, and what I see as "the future".

Before you go and lynch me in angry mob style, let me explain the landscape of this blogging future. These uber blogs will become your bread and butter, your morning newspaper. They will be very author orientated, and as such, bloggers will save their best posts/tutorials/rantings/themes/whatever for the uber blogs. And the regular blog will essentially stay the same, except they will become more personal once again, just maybe not to the extent of seeing cat pictures again.

I think this is a good thing! Keeping up with news is now a part time job, having a few key uber blogs covering the niches you are interested in will help. But blogging isn't going away, I'll still be able to read Khoi Vihn's thoughts about the news if I want.

Questions Questions and More Questions

I'm curious to know what you think now. Where is blogging headed? Where do you want it to head? Should you wear pants while blogging? How do you think advertising will work for small blogs? Will the Raiders ever be good again? Are you still reading this? Are there too many questions for one post? Is blogging dead? Is micro blogging the future?

Halloween Fright Fest Movie List

2008-10-21T00:00:00+00:00

Halloween is nearly here, and to take a break from the usual design, coding, theme banter here I’m going to give you a list(gasp!). Yes a list, one of those top whatever things that rule Digg and Delicious, the bane of the internet! But this is different(not really) it is a list of horror movies you may want to check out for a night of fright(can you tell I worked a haunted house?).

These aren’t your typical scream fests, if your looking for those skip to the bottom. But if you’re looking for something a little different, a little more eccentric, a little more dare I say artsy, then this list is for you.

Warning: This list contains some graphic images, adult language, and no poo jokes. If you're not into that sorta stuff, you should skip this one.

Ichi the Killer

We're gonna start things off a little slow, at least in the fear category. Ichi the Killer is more of a crime, action, comedy film...oh and gore. Lots of gore, like "seriously you got to be kidding me" level of gore. The film is directed by Takashi Miike, and if you're into Asian cinematography you know what that means. If you're not prepare for a very wild ride.

Suicide Club

Suicide Club is more of a horror movie than Ichi the Killer. Japan has a problem with suicides and this movie pokes at the heart of it. A detective is trying to solve the case of a string of suicides with some peculiar circumstances. This movie will leave you with a bit of a strange state of mind. Which is perfect.

Behind the Mask: The Story of Leslie Vernon

Behind the Mask: The Story of Leslie Vernon is about the most entertaining "horror" movie ever conceived. But it technically isn't a horror movie, but rather a behind the scenes look at the making of psycho killer superstar. The movie is great for fans of classic slasher movies, and has one of the greatest most unpredictable plot twists in horror film history. This is a must see!

Gozu

We dive back into the world of Asian horror, and director Takashi Miike. Except this time instead of a gore fest, you are going to go on a journey. A journey you really probably would rather not go on. Gozu defies definition by my vocabulary. It will leave you confused, disturbed, and probably with the urge to send me hate mail. It is not the traditional hack and slash naked girl running and screaming type of stupid horrow, this is a slow, brutal, disturbing, mind fuck. If you don't mind that sort of film, you'll like this, but I warn you this is not for everyone.

Severance

Did you watch Gozu? Are you contemplating the meaning behind it? Well I got the fix, and it is called Severance. Severance is about an office outing, you know team building, except things go a little...ummm wrong. Severance has its scary moments but it really shines in the dark comedy. If your looking to tone down the scare a bit(just a little itty bit) and up the laughs this is the horror film for you.

The Vengeance Trilogy

OK so this is actually 3 movies, but three very good movies. Yes by this time you know I love Asian horror, but this is different...it is Korean! The Vengeance Trilogy is made up of: Sympathy for Mr. Vengeance, Old Boy(my fav), and Lady Vengeance. These aren't technically horror movies, but they are so good I couldn't resist putting them here.

The Host

Staying in Korea this time it is a classic style monster movie, and one of the best to come out in a very long time. The Host brought the monster movie back into the spotlight before Cloverfield even had a chance to think about its viral marketing. It's a story of a family and a giant tadpole...yup that's right...and it is awesome! If you haven't seen this yet, check it out, no need to wait for Halloween to see this one.

Black Sheep

What could possibly end this list of "horror" movies?? Why none other than Black Sheep, not the Chris Farley movie, the New Zealand made film. Apparently sheep are somewhat popular in New Zealand, and also freakishly smart strong and effing scary. OK so unless you have an unrationalized fear of sheep this isn't that scary, but it definitely follows in a long line of New Zealand horror movies. It is entertaining, and disturbing and that is what I love...also it has mutant sheep, how could you go wrong!?

Want some suggestions that are more horror and less screwed up?

OK so you aren’t into Tokyo Shock? Korean life lessons? Or documentaries? Want something a little more “get the girl to jump into your lap and cry” type of movie? I got some suggestions for that too.

The Texas Chainsaw Massacre

The ORIGINAL, not the crappy remake or any number of the ridiculous sequels. It is a classic that still freaks people out and will make sure no one sleeps so long as there are chainsaw noises sporadically made during the night.

The Evil Dead

The first and second Evil Dead films are genius. What could be better than Bruce Campbell battling demons? Nothing.

House of a Thousand Corpses and The Devils Rejects

Rob Zombie has turned his twisted dreadlocked head towards film and what comes out is nothing short of terrifying. Want to be scared? Watch these films.

The Exorcist

The single scariest film ever created. Nothing more to be said about that.

Dead Alive

This one is actually one of those New Zealand flicks, maybe a bit “out there” for most people though. Also check out Bad Taste.

Dawn of the Dead

Or really any zombie movie(even the movie named Zombie) with “of the Dead” in the title. I like zombies.

Fido

Another zombie flick, this one is pure comedy. If you got someone who refuses to watch a horror movie this is a good substitute.

Nightmare on Elm Street

Yeah, you know this one.

BOO!

There it is, my list of recommended horror flicks. This is by no means a complete list as I’m a horror flick nut and could go on for pages and pages. What are your favorite horror flicks and recommendations? I’m always looking for something I haven’t seen.

Complex WordPress Conditional Tags

2008-10-15T00:00:00+00:00

The WordPress conditional tags are some of the most powerful tools a theme designer can master. As WordPress themes get more complicated and more CMS like, everyone will eventually run into the need for conditionals. In my previous post I showed you how to write less code using conditional tags and the WordPress hierarchy. Quite a few things have changed since that post, and this time I'm going to show you some more advanced ways to use conditional tags.

What's New?

The WordPress dev team heard the cries of the masses and has added new conditional tags to the core. A few include:

<?
is_front_page()
is_single(array(17,'beef-stew','Irish Stew'))
is_page(array(42,'about-me','About Me And Joe'))
is_page_template() ?>

Head on over to the codex conditionals page for a full list. The most important new tags are the ones which allow you to use arrays. In the past you may have had to use complex code to achieve the same result. The ability to filter content by several pages/categories/tags is incredibly useful especially in building large websites. The Codex does a good job at explaining the new tags so I won't go into that here.

How's Your PHP?

If you theme WordPress you probably know at least some basic PHP. The most basic and useful PHP you can learn are comparison operators. The operators will return true or false and work the same way as the WordPress conditional tags.

Let's say you wanted some text to only show on the home page(ID is 42) and your about page. One way to do this is:

<?
if ( is_page( array (42,'About') ) ){
	echo "Hello World";
}

Lets say you didn't know the ID of the page or the name, maybe it is in a theme and you want the user to set where the text appears. In this example $text_pages is a list set somewhere either by the user or some other function.

<?
$text_pages = get_option('pages');

if ( is_page( array($text_pages) ) ){
	echo "Hello World";
}

More complex examples

OK so far pretty basic stuff. Lets see something more complicated. We have text we want to show on a static home page, some posts in a certain category, but not in the search pages. Using PHP comparison operators and WordPress conditionals this is easy.

<?
if ( (is_front_page() || in_category('3') && !( is_search() ) ) {
	echo "Hello World";
}

Reading this in English goes like so: If is a static home page, or(||) in category 3 and(&&) is not(!) a search page. The exclamation mark is a shortcut for does not equal(!=).

As you can see developing complex conditionals can be very powerful, and can also save you from writing a bunch of repeated code. Lets take it even further and use some variables now.

Lets say you want the user to choose if there is a feature post displayed. You also want them to be able to set the categories used for a feature post. You also want don't want the feature story repeating itself while paging. To accomplish this we're going to use a combination of variables, WordPress conditionals, and some if else statements.

<?
$feature = get_option('feature');  // Gets the option to display feature post.
	if( ($feature == 'Yes') && !(is_paged()) ) { //Excludes the feature post when paging through posts
		$feature_cats = get_option('feature_cats'); // Gets list of feature categories
		query_posts(array('category__in' => array($feature_cats)));
		//The loop and post formatting
  	}

Making Your Own Conditionals

If you really want to get dirty, you can form your own conditionals. The Codex hints at this ability with this example:

!empty($post->post_excerpt)

Pretty simple right? If the post excerpt is empty this will return false. Likewise removing the ! will then return false for anything that has an excerpt.

With a basic understanding of if else statements, and a not so basic understanding of WordPress functions you could create a conditional statement for just about anything granted you had something to compare to get a true or false statement.

Lets come up with another example. Say you want to display a special title whenever a post has approved comments.


<?php $foo = get_approved_comments($post->ID);
			if ( !empty($foo) ) { 
				echo "<h1>I Gots Comments!</h1>";
				} ?>

Quick Comparison Operators Overview

The php comparison operators article goes into more detail but I'll give you quick overview from a WordPress point of view.

When using these operators with WordPress conditional tags and if else statements keep track of your parenthesis! I've strung together quite a long string which ended in an equally long string of parenthesis, which will be a headache to decode later.

There are a few operators that are used more often. These are: equal( == ), not equal ( != ), or( || ), and( && ). Using these four you can construct some heavy conditionals.

Grouping is important! Just like math, you can group operators and conditionals to get different true or false statements. ex. (in_category(42) && !(is_search()) || is_archive())

Use !(), !empty(), empty() to achieve some more complex conditionals and create your own conditional statements.

The End

So there are some examples of complex WordPress conditionals, comparison operators, booleans, if elses, and some pie(update: I ate all the pie). This isn't a complete list of what is possible, infact I don't think it even scratches the surface. Conditionals are great, and are even more powerful than ever.

Readernaut is Reading 2.0

2008-10-03T00:00:00+00:00

It may not be obvious by my writing and general intelligence but I do in fact know how to read. I've even read some novels, and a few that didn't have big pictures. So when Jeff Croft mentioned Readernaut I got interested. I signed up for the beta and got my invitation a few weeks ago. At first I didn't know if I would actually use Readernaut, but I'm happy to say I do, and I like it.

Whaa?

So what is Readernaut? It is a social community of well read people that make me look like I'm shuffling through old copies of Highlights magazine. It's a place to catalog the books you have read, add new books, keep track of your reading, comment, and share insight on books. But most importantly it gives the dull act of reading a book a decidedly web 2.0 gradient vector icon feel.

I find myself checking the site for new notes concerning Anathem, or checking reviews of books I'm interested in. Adding recommended books to my "Plan to Read" list will be a huge savior to me in 2 years when I actually finish reading Anathem. The point being, I believe there are a few ways to use Readernaut, and not everyone will use it the same way.

The Experience

Readernaut is a sort of complex time line with various ways to filter information into what you are actually looking for. In a twitter like fashion you can start with the public time line and continue drilling down.

The site is pretty intuitive especially under the newest design. You have the timeline, your library, quick access to notes about your book, tags, contacts, and a profile. Each having their own options to organize the data. Books are organized with tags, which makes filtering your own books easy, but it also helps you find potential reading material. Which is where the real potential power of Readernaut comes in.

I haven't fully explored the community portion of Readernaut yet(mostly because none of my friends are members) but I can already see massive potential in finding what like minded people are reading. Readernaut also integrates with Amazon, which makes finding, adding, and buying books so incredibly easy Appalachian mountain people may find themselves reading(it's OK I grew up there).

It is hard to peg down the user experience because it is really up to the user how involved he(or she, women being allowed to read, who could've imagined?) will become in the site and community. It could be nothing more than bookmarking tool, or a full blown dating service depending on how you use the site.

Unfortunately you can't just go sign up for Readernaut quite yet, and there are no invitations to give out. But you can sign up for an invite which are sent out pretty steadily as Readernaut grows. But if you are a reader(naut) then I would suggest trying the site out. It has re-kindled my love for reading along with Neal Stephenson and Ruby on Rails books. And leave me a message if you're on it!

Quick Tip: List Hover Effect with jQuery

2008-10-01T00:00:00+00:00

A while ago a user asked me how the widget hover effects were done in my Checkmate theme. Well I'm going to tell you. It is a little black magic, a little jquery, and passing through the outer realms of probability. But I think anyone can handle it.

First things last

First you'll need jQuery and the color animations plugin. Add these in your footer so they load last(that's just good practice).

The basic markup

The basic HTML for this example is something like the following.

Hover Magic

Now for the code that makes the hover actually work. Don't blink you might miss it.

That's it! Ok I'll explain a bit. The first two lines are setting up some variables, this makes the code a bit cleaner but you could include the variables directly if you wanted. The first variable is the original background color set in the CSS file. The second is the background color which will fade in.

If you're familiar with jQuery you'll know the third line includes the selector(".widget ul li"). Next is the actual animation. First the line items background color is faded to the whatever the fadeColor is set to. Next the background color is faded out to the original color before the mouse leaves. This is the effect I wanted, but if you want the color to fade out after the mouse pointer leaves then add the

.animate( {backgroundColor: originalBG}, 950)

line to the second empty function like so:

The End

That is just a quicky, there are a different effects you can easily get from adding more animation, colors, and timing. But I'll let you figure all that out.

Ubiquity: Browsing Extended, A Lot

2008-09-02T00:00:00+00:00

I've just spent some time with Mozilla Labs newest creation Ubiquity. And I'm impressed, ok I'm very impressed. If you have spent time on a mac, chances are you used Quicksilver (If you haven't you need to now! I'll wait). Quicksilver is the ultimate productivity tool and goes far, far (very far) beyond just an app launcher. Now imagine taking all that wonderful power and transferring it to the your browser. I know, mind numbing isn't it.

What is Ubiquity?

Ubiquity strives to do just that. And in my experience is on its way. Ubiquity is still a prototype, an impressive one, but still a prototype (is prototype the new beta?). Your mileage may vary with how useful you find Ubiquity right now, as it has limited capabilities in this version, from Mozilla:

Lets you map and insert maps anywhere; translate on-page; search amazon, google, wikipedia, yahoo, youtube, etc.; digg and twitter; lookup and insert yelp review; get the weather; syntax highlight any code you find; and a lot more.
Find and install new commands to extend your browser's vocabulary through a simple subscription mechanism

I don't use that stuff

Now if you're like me, that is actually quite useful already. If your not like me, maybe you should be trying harder. The second bullet is the eye catching one for me. Like Quicksilver, Ubiquity supports a what I'm going to call, a plugin architecture. This has potential to extend this prototype far beyond what it is currently capable of.

I'm using the term "plugin architecture" loosely here, and Mozilla refers to new commands as "subscriptions". You essentially go to a site that contains a script, and subscribe to the command. You can then use the command like any of the built in commands.

The lowdown

So what can it do? Honestly the best way to find out is to download and use it, but I'll give some highlights here.

Email — Seriously? I can already do that. No you can't. Yes I can. Not like this. Oh. Ubiquity allows you create emails while still on a page or import things such as maps without ever leaving gmail. Impressive? If you ever email it is.
Translate — On the page. There are countless times when I want to know what is being said on a page about one of my themes, but I'm far too lazy to copy and paste into babel. Problem now solved.
Search — You can search a plethora of sites directly in Ubiquity, no longer do you have to open google or go to youtube. And yes moving the mouse to the upper right corner wastes my time.
Define Terms — Ever been reading a Merlin Mann post on 43folders and didn't know what a word meant? Highlight and define right there in your browser.

That is a taste, a small portion, an itty bitty of what Ubiquity is capable of. Twitter, Facebook, Craigslist, yeah they are all there too.

But what about the masses?

The down side to ubiquity is that some people probably won't "get it", much like people don't use Quicksilver to it's fullest. For me it is an easy transition into using the command line interface because I use it daily already. But what about the people who don't? I'm curious to know what they think of Ubiquity. With people spending more and more time in their browser I believe this is the future. Things are changing in browsers as evident by Google's Chrome and Ubiquity, and I for one am happy about it.

The Awesome Video

Ubiquity for Firefox from Aza Raskin on Vimeo.

Update

ReadWriteWeb just released a huge list of custom Ubiquity commands. Check out the some of the power Ubiquity already has.

A Paypal Donation Form That Doesn't Suck

2008-08-03T00:00:00+00:00

Pete, a Swiss guy who lives in Thailand (how could I not include that little tidbit), posted a great tutorial on how he did his donation page. He uses jQuery, which is must (right?), and he even tells you how to put it into a WordPress theme. If you have a donation form or page on your site and are using that ugly paypal button(like me) you need to get with the times (although I still want an animated gif email box). Read the PayPal donation form with CSS and jQuery for WordPress article now, or forever have an orange button on your site.

Make Sections MSNBC Style in WordPress

2008-07-01T00:00:00+00:00

For WordPress Day I decided to pull out an old trick of mine. When I first saw the MSNBC redesign I immediately wanted to recreate the sections in a theme. It proved to be a bit more involved than I had first imagined. Look out ahead, heavy php content coming!

The Goal: People in Hell Want Ice Water

I wanted to break each category into a section. The latest article would be displayed with a short summary with a thumbnail. To the right of the latest article would be a list of the other stories in the category(section). And to the right of that display the subcategories in a list. This should be done for each category chosen by the user.

Lets Start: Elephants Learn to Fly

The code below is going to setup everything. Let me step through it.

First $index_cats gets which categories are to appear from a theme options page (Learn to setup theme options here).
I then setup the arguments I will pass along to the get_categories function in the variable $args. I store those categories in a variable named $cats and then start a foreach loop.
The next few lines are setting up some variables to use in the code.

<?php 


		$index_cats = get_option('ch_index_cats'); // What categories to show on Index page

		$args = array( 

				'orderby' => 'ID', 	

				'hierarchical' => 0, 

				'include' => $index_cats, );  //Which categories to include, set on the theme options page

				

 		$cats = get_categories($args); //sets up everything to be looped through



		foreach ($cats as $key => $category) { // loops through categories in array and creates a section for each

			

		$catID = $category->cat_ID; //sets catID to category ID number

		$catName = $category->cat_name; // sets catName to category Name

		$cat = $cats[$key]; // Sets category

?>

Output It: Monkeys Fly Out of My Buttocks

First the title of the section and a link to the rss feed. This is pretty straight forward WordPress stuff here.

<?  //Category Title ?>

<div class="column span-15 cat_sections">

	<h3>

		<a href="<?php echo get_category_link($catID); ?>"><?php echo $catName; ?></a>

		<a href="<?php bloginfo('home'); ?>/wp-rss2.php?cat=<?php echo $catID ?>" class="rss">&nbsp;</a>

	</h3>

Now to display the lead story. I used query_posts to retrieve one post from the current category ID then it is the loop as normal. The thumbnail image is pulled from a custom field. If the call fails error_form.php is called(this can be anything you want).

<?php // Latest Story and Thumbnail

 	query_posts('showposts=1&cat='.$catID); //gets the latest post

 	if (have_posts()) : while (have_posts()) : the_post(); //the loop

?>

	

	<div class="column span-7 border">

		<?php //get thumbnail (custom field)

		 		$image = get_post_meta($post->ID, 'thumbnail', true);

		 		if($image !== '') { 

		?>

		<a href="<?php the_permalink() ?>">

			<img src="<?php echo $image; ?>" alt="<?php the_title(); ?>" />

		</a>

		<?php } else { ?>

		<a href="<?php the_permalink() ?>"> 

			<img src="<?php bloginfo('template_directory'); ?>/images/default.jpg" title="<?php the_title(); ?>" />

		</a>	

		<?php } ?>

		

		<h4><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></h4>

		<?php the_excerpt(); ?>

	</div>

	

	<?php endwhile; else:?>

		<?php include(TEMPLATEPATH . '/error_form.php'); //includes error form if no posts are found ?>

	<?php endif; ?>

Now we need to display the latest headlines. I use the get_posts function to do this, but there are a few ways you could get these headlines. Notice the offset to exclude the first article and the number of posts is set to 4. Then once again its loops stuff as normal.

<? //Displays 4 latest headlines from current category ?>

	<div class="column span-5">

		<h4>Latest Headlines</h4>

		<ul>

			<?php

		 	global $post;

		 	$myposts = get_posts('offset=1&numberposts=4&category='.$catID);

		 	foreach($myposts as $post) :

		 	setup_postdata($post);

		 	?>

				<li><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></li>

		 	<?php endforeach; ?>

		</ul>

	</div>

Lets output a list of subcategories now. Use the wp_list_categories function and your done. Then finally close the entire loop.

<?php // Displays list of subcateogries ?>

	<div class="column span-3 last">

		<ul>	

			<?php 

			wp_list_categories('title_li=&hide_empty=0&child_of='.$catID); ?>

		</ul>

	</div>

	

</div>

<?php } ?>

Enjoy: Your New Awesome Sections

Thats it, you have sections! This is a pretty basic script that you could easily extend to pull in more information. Sections are a great way to organize content on sites with lots and lots of content, so get writing. Here is the entire code in its whole:

<?php  	/*Below is the code needed to get the news style look on the index page.  It uses categories set on the theme options page.  It gets the latest story from the cateogry and its thumbnail, then lists the 4 latest stories from that category, then lists the subcategories. It then loops through all the cateogries that have been set to show up in the themes options page */



		$index_cats = get_option('ch_index_cats'); // What categories to show on Index page

		$args = array( 

				'orderby' => 'ID', 	

				'hierarchical' => 0, 

				'include' => $index_cats, );  //Which categories to include, set on the theme options page

				

 		$cats = get_categories($args); //sets up everything to be looped through



		foreach ($cats as $key => $category) { // loops through categories in array and creates a section for each

			

		$catID = $category->cat_ID; //sets catID to category ID number

		$catName = $category->cat_name; // sets catName to category Name

		$cat = $cats[$key]; // Sets category

?>



<?  //Category Title ?>

<div class="column span-15 cat_sections">

	<h3>

		<a href="<?php echo get_category_link($catID); ?>"><?php echo $catName; ?></a>

		<a href="<?php bloginfo('home'); ?>/wp-rss2.php?cat=<?php echo $catID ?>" class="rss">&nbsp;</a>

	</h3>

	

	

<?php // Latest Story and Thumbnail

 	query_posts('showposts=1&cat='.$catID); //gets the latest post

 	if (have_posts()) : while (have_posts()) : the_post(); //the loop

?>

	

	<div class="column span-7 border">

		<?php //get thumbnail (custom field)

		 		$image = get_post_meta($post->ID, 'thumbnail', true);

		 		if($image !== '') { 

		?>

		<a href="<?php the_permalink() ?>">

			<img src="<?php echo $image; ?>" alt="<?php the_title(); ?>" />

		</a>

		<?php } else { ?>

		<a href="<?php the_permalink() ?>"> 

			<img src="<?php bloginfo('template_directory'); ?>/images/default.jpg" title="<?php the_title(); ?>" />

		</a>	

		<?php } ?>

		

		<h4><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></h4>

		<?php the_excerpt(); ?>

	</div>

	

	<?php endwhile; else:?>

		<?php include(TEMPLATEPATH . '/error_form.php'); //includes error form if no posts are found ?>

	<?php endif; ?>

	

<? //Displays 4 latest headlines from current category ?>

	<div class="column span-5">

		<h4>Latest Headlines</h4>

		<ul>

			<?php

		 	global $post;

		 	$myposts = get_posts('offset=1&numberposts=4&category='.$catID);

		 	foreach($myposts as $post) :

		 	setup_postdata($post);

		 	?>

				<li><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></li>

		 	<?php endforeach; ?>

		</ul>

	</div>

	

<?php // Displays list of subcateogries ?>

	<div class="column span-3 last">

		<ul>	

			<?php 

			wp_list_categories('title_li=&hide_empty=0&child_of='.$catID); ?>

		</ul>

	</div>

	

</div>

<?php } ?>

Add Update Notifications to Your WordPress Themes

2008-06-11T00:00:00+00:00

As Checkmate approaches 300 downloads I started thinking about updates. Checkmate has already received 4 bug fixes and I would like to be able to do a major update in the future. But I also thought about those people that had not subscribed to the thread or the comments. I'm not sure if these people check back often for updates but I would say most people don't.

So I thought about having themes "call home" and check for updates periodically and inform the user, much like how WordPress 2.5 informs users of updates. But for a free theme this seemed a bit invasive to me. A simpler and effective way I thought up is to pull a RSS feed into an admin page where users could check for update notices. I know you can do this manually on the dashboard, but most theme users won't do that.

How to do it

First we want to open up the functions.php from your theme directory(or create it) and create a function called mytheme_updates. This function is going to hold the code that pulls in an external RSS feed and displays it.

<?php
function mytheme_updates() { ?>

	<div class="wrap">

		<table>

		<h2>Update Alerts</h2>

		<tr>

			<td>

				<?php

				//get MagpieRSS

				 require_once(ABSPATH . WPINC . '/rss.php');



				//Feed where updates are located

				 $rss = fetch_rss('http://feeds.feedburner.com/curtishenson');



				if ($rss) {



					// Split the array to show first 3

					 $items = array_slice($rss->items, 0, 3);



					//loop through the latest rss items

				 	foreach( $items as $item ) {



				  		$pubdate=substr($item['pubdate'], 0, 16);

				  		echo '<p>

				   			<a href="'.$item['link'].'" title="'.$item['title'].'"><h3>'.$item['title'].'</h3></a>

				   			<em>'.$pubdate.'</em><br />'

				   			.$item['summary'].' summary

				   			<a href="'.$item['link'].'">more...</a>

							</p>'

						;

				  	}

				}

				else {

				 	echo '<p>No updates yet</p>';

				}

				?>

			</td>

		</table>

	</div>

<?php 

}

?>

Now a lot just happened so let me explain whats going on. We start out with some basic html to make everything look nice in the admin area. We then call MagpieRSS and enter the feeds location. Magpie is an RSS parser and is used by WordPress so you don't need to install anything separately.

<?php

				//get MagpieRSS

				 require_once(ABSPATH . WPINC . '/rss.php');



				//Feed where updates are located

				 $rss = fetch_rss('http://feeds.feedburner.com/curtishenson');

We then check if there are any feeds, limit the number of responses to three, and loop through them. I printed out the title with a link to the post, the date and the summary.

<?php

				if ($rss) {



					// Split the array to show first 3

					 $items = array_slice($rss->items, 0, 3);



					//loop through the latest rss items

				 	foreach( $items as $item ) {

						

				  		$pubdate=substr($item['pubdate'], 0, 16);

				  		echo '<p>

				   			<a href="'.$item['link'].'" title="'.$item['title'].'"><h3>'.$item['title'].'</h3></a>

				   			<em>'.$pubdate.'</em><br />'

				   			.$item['summary'].' summary

				   			<a href="'.$item['link'].'">more...</a>

							</p>'

						;

				  	}

				}

The else statement is called when there is nothing in the RSS feed.

We need to make another function now which I'll call mytheme_add_updates. This function will contain what we need to add the page into the admin section of WordPress. This function calls a WordPress function named add_management_page which will put my updates page under Manage in the admin section.(I could put it elsewhere also)

<?php
function mytheme_add_updates() {

    add_management_page("Theme Updates", "Update Alerts", 8, basename(__FILE__), 'mytheme_updates');

}
?>

We're almost done! We just need to use add_action to invoke the mytheme_add_updates function.

<?php
add_action('admin_menu', 'mytheme_add_updates');

?>

Now we will have a tab under Manage which says Update Alerts that contains the three latest posts from whatever RSS feed you specify. Theres plenty of ways you could use this: point the feed to a post's comments, a feed from a discussion thread, a hidden category on your site, etc.

The Whole Thing

<?php

//////////

function mytheme_add_updates() {



    add_management_page("Theme Updates", "Update Alerts", 8, basename(__FILE__), 'mytheme_updates');



}



function mytheme_updates() { ?>

	<div class="wrap">

		<table>

		<h2>Update Alerts</h2>

		<tr>

			<td>

				<?php

				//get MagpieRSS

				 require_once(ABSPATH . WPINC . '/rss.php');



				//Feed where updates are located

				 $rss = fetch_rss('http://feeds.feedburner.com/curtishenson');



				if ($rss) {



					// Split the array to show first 3

					 $items = array_slice($rss->items, 0, 3);



					//loop through the latest rss items

				 	foreach( $items as $item ) {

						

				  		$pubdate=substr($item['pubdate'], 0, 16);

				  		echo '<p>

				   			<a href="'.$item['link'].'" title="'.$item['title'].'"><h3>'.$item['title'].'</h3></a>

				   			<em>'.$pubdate.'</em><br />'

				   			.$item['summary'].' summary

				   			<a href="'.$item['link'].'">more...</a>

							</p>'

						;

				  	}

				}

				else {

				 	echo '<p>No updates yet</p>';

				}

				?>

			</td>

		</table>

	</div>

<?php 

}



//////

add_action('admin_menu', 'mytheme_add_updates');



?>

Taking it further

There are many ways to improve this and expand this, and I plan on doing so. I still would like to have some sort of notification of when there are updates to the feed. If you have any improvements let me know!

Site Specific Browsers: Webapps for the Desktop

2008-06-10T00:00:00+00:00

Site specific browsers(SSBs) are my new favorite thing. If you haven't heard of SSBs yet, this will change the way you use the web, and your life will change for the better forever and ever. SSBs are just what they sound like: a browser specifically for one website. Sounds ridiculous and useless doesn't it? Why would I want a bunch of browsers when I can have tabs in Firefox? Well I'm going to show you.

Here comes Fluid

Fluid is a program(Mac only, see below for windows recommendations) for creating these SSBs. From the Fluid website:

Fluid includes Tabbed Browsing, built-in Userscripting (aka Greasemonkey), URL pattern matching for browsing whitelists and blacklists, bookmarks, auto-software updates via the Sparkle Update framework, custom SSB icons, a JavaScript API for showing Dock badges, Growl notifications, and Dock menu items, and more.

That may sound dry and uninteresting to you at first, but once you see it in action you will start to see the light. Watch the screencast as Todd Ditchendorf walks you through creating twitter and digg SSBs.

Desktop Clients via Fluid from Todd Ditchendorf on Vimeo.

Convinced yet? No? Well you could check out thumbnail browsing or the tabbed browsing demo. This was enough for me to start experimenting and seeing what Fluid could actually do.

My First Impressions

I fired up Fluid and decided to try out Pandora. Creating a SSB is incredibly easy. Enter the address you want, name it, choose an icon. You can use the favicon or check out the flickr group for icons. After the initial setup you have options to customize and make the SSB behave how you like. You can even create a menuextra.

Now I can have Pandora behave more like a program, I can launch it with 2 keystrokes and it doesn't crash when Firefox will. I used this little app, but it really wasn't all that amazing to me. My revelation came when I found Grooveshark. This was the perfect site for a SSB. I can launch Grooveshark in a SSB and have an unlimited music library in a very slick iPod like interface.

This is when I realized how useful SSBs are. I quickly jumped online and got Google Reader in its own SSB. Twit live now has its own SSB. And for productivity I added the PayMo service into two SSBs. One SSB is for the web based dashboard and adding things like clients, projects, and tasks. The other is a menuextra I use to start and stop the time tracker. Paymo already has a widget but I don't like using OS X's dashboard for anything other than checking weather, so this works out perfect for me.

My Lasting Impression

With so many web apps available the uses for Fluid and SSBs is almost unlimited. I think people like the way "programs" work, and how they interact with a program. Freeing these web applications from the browser separates "internet browsing" from the application which is important to me.

Windows?

Well I know not everyone is part of the Apple cult...yet. So I searched around and found BubblesHQ. Unfortunately this looks much more limited when compared to Fluid so your mileage may vary. If anyone knows a good substitute for windows leave the link in the comments, until then google for "Site Specific Browsers" and you will get plenty of sites to check out.

Whats Next?

If you want to know more about Fluid, I reccomend checking out the website, blog, and feature list. There is also a community around Fluid developing some really nifty scripts. Fluid also supports many advanced features, scripting, and more which I plan on going over in another post.

Google Now Hosts Javascript Libraries

2008-06-07T00:00:00+00:00

News of Google Ajax Libraries API is spreading fast, and I for one welcome it. Anything I can do to speed up websites and offload files is something I'll likely take advantage of.

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

Democracy Sucks At Web Design

2008-06-05T00:00:00+00:00

Anyone that has ever had to use a U.S. Government website knows that they are horrible. And by horrible I mean awful. And by awful I mean terrible. And by terrible I mean they are abominations of all that is good in the universe and beyond. I have given up hope of these sites joining us in the new millennium but all is not lost.

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.

Get the Category ID in WordPress

2008-05-19T00:00:00+00:00

Today I have a quick tip for all the WordPress theme developers. I'm actually working on a theme right now and thought I would share a tip that will make your themes much more user friendly.

Often when developing themes for one reason or another you want the end user to give you the ID for a category. This could be so you could call certain categories, or exclude them, or create custom menus etc. In previous WordPress versions the category ID's were listed along side the categories so it wasn't as hard for people to find the ID's. This isn't true anymore, and for less savvy template users, finding a category ID may not be so easy. At first I simply decided to give users a chart in the theme options page(you can see this in action in my CheckMate theme), and that works OK. But it isn't ideal.

No Worries, We Got A Function

That function is get_cat_id() and can make end users life easier. You can use this function to take the category name get it's ID number to use in functions like query_posts. Now all your users have to do is enter the category name in the theme options panel(or name a category something specific like "video").

Examples

This is a very basic example of how to use the function.

Barely Teens are Better Coders Than You

2008-05-13T00:00:00+00:00

And Me. I've recently noticed a disturbing trend, kids barely in their teens as web designers and developers. And they are better at it than 20 somethings. I started when I was 15 and quickly grasped HTML(that was HUGE back in the day). I thought I was a pro and would laugh at my older counterparts fumbling around with their BBS boards. Now I'm the fool fumbling around with the web while barely teens are already better skilled than I.

When I was twelve I was too busy playing police quest, giving a presentation on anything was out of the question. Not for Dimitri though! He has a far better grasp on javascript and jQuery at the age of twelve than I will when I'm fifty. Check out the jQuery presentation he did for Google....yes Google.

When I was 13 hacking to me meant taking over someones AOL AIM account and messaging their friends with "I'm a stupid head". I didn't know what SQL was(if it was around then), and I surely didn't know how to hack(the happy hacker website wasn't around yet). Hayes Potter doesn't have that problem. At 13 he can hack your website, then tell you how to fix it, and pay his tuition to M.I.T. before he can drive. Read his tutorial on SQL Injections at his blog, WordPress theme developers should pay close attention to this. He also has a surfer and Converse All Stars in his header which makes him extra cool with me.

With kids(what do you call them when they are smarter than you?) like these around, the future of the net is very secure and will be an exciting place. Sometimes older web designers get jaded on technology, these kids remind me that the net is ever changing and moving forward and I for one have no problem learning from them. So keep up guys, you don't want to be that grumpy old bearded guy working in a dirty office with 10 year old monitors and a huge rats nest of cat5 cables in the corner do you? Actually that dude is pretty cool, he probably is really good at Word of Warcraft too.

Checkmate: A Free Wordpress Theme

2008-04-25T00:00:00+00:00

Note: A new version of Checkmate has been released. Get the new version now!

I told you earlier I was going to release it, and here it is! The Checkmate WordPress theme. It is a classic blog style template with a minimalist design packed with features and customizing options. This is one to definitely download and try out and includes a quick start guide to show you how to use some of the features.

Checkmate Demo - The demo is a bit messy looking because I tried to show off as much of the theme as I could.

Theme Options

Checkmate has a lot of options so you can get the most out of your theme without knowing any code.

Optional Header Image
Optional Featured Categories
Feedburner Integration
Menu Customization
Optional Footer Widget Areas

Features

Checkmate comes with 7 color themes. Grey, Red, Blue, Green, Purple, Brown, and Grey/Red.
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
Includes the TimThumb script for resizing post thumbnails located under the post meta information.
Tested in Firefox 2, Safari(Mac), IE7, IE6. (IE6 has a problem with post thumbnails, if this concerns you bug me to fix it).

Ad Management

Checkmate has two forms of built in ad management. One form built right into theme options panel and another more advanced customizable form. Both forms of management are controlled by widgets for easy placement and you retain the ability to turn them on or off via theme options panel.

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.

Updates

Version 1.01

Added wp_footer hook for plugins

Version 1.02

Fixed Header Image Bug
Added browser detectable RSS Feeds (RSS2, RSS1.0/RDF, RSS0.92, RSS2 Comments, ATOM)

Version 1.03

Added page template with comments enabled

Version 1.04

Fixed sidebar error when requiring users to be registered and logged in to comment
Misc. code cleanup

Version 1.05

Removed query_posts from index.php for pagination support

Version 1.06

Changed "1 Comments" to "1 Comment"
Fixed the multiple categories as "featured" categories error

Write Your Own Related Posts Plugin

2008-04-11T00:00:00+00:00

My previous post on writing a simple related posts plugin was a popular one, and one reader wanted to take it further for a website he was working on. Well it was painfully obvious that my example was inadequate for doing any sort of fun stuff so I started adding bits and pieces to create a more robust widget. If you haven't already, you might want to read the first post to get caught up.

This isn't a true "plugin" in the sense you can activate it in Wordpress, but more of a widget you can plug into your theme. This widget is going to grab posts based on tags and return specific info from the matching posts. This will be a good chance to see some of the guts of Wordpress being used and how you might use them for your own projects.

Start Your Hacking Engines

We'll first set up our widget.

<?php
//Start the related posts widget
function widget_related_posts() {
	//code goes here
} //End widget and register the widget for use in Wordpress
       if ( function_exists('register_sidebar_widget') )
       register_sidebar_widget(__('Related Posts'), 'widget_related_posts');
?>

Ok, nothing major, got our widget ready, I'll be leaving this out of the code for the time being but everything I talk about below is contained where is says "code goes here".

PHP Is Your Friend

Not really. Ok first things first, we need to get the tags for the current post. This is easy, we'll use the function wp_get_post_tags(). Also set $post to global(we'll use $wpdb later so I'll set that to global too). In order to get the current post's tags use $post->ID, if you want to make sure you are getting the tags use print_r(). The example below should make this all clear.

<?php
               global $wpdb, $post;
               $tags = wp_get_post_tags($post->ID);
               //print_r ($tags);

Now we have a variable named $tags, which has...tags, genius I know. Now we need to do something with them.

<?php
global $wpdb, $post;
               $tags = wp_get_post_tags($post->ID);
               //print_r ($tags);

               $taglist = "'" . str_replace("'",'',str_replace('"','',urldecode($tags[0]->term_id))) ."'";

               $tagcount = count($tags);
                       if ($tagcount > 1) {
                       for ($i = 1; $i <= $tagcount; $i++) {
                               $taglist = $taglist . ", '" . str_replace("'",'',str_replace('"','',urldecode($tags[$i]->term_id))) . "'";
                       }
                       }

What happens here is we get some info from the tags for use in a query(more on that in a sec). The first $taglist is used if only one tag is present on the post. The second $taglist checks if there is more than one tag, then loops through each one, preparing them for whats next.

<?php
global $wpdb, $post;
               $tags = wp_get_post_tags($post->ID);
               //print_r ($tags);

               $taglist = "'" . str_replace("'",'',str_replace('"','',urldecode($tags[0]->term_id))) ."'";

               $tagcount = count($tags);
                       if ($tagcount > 1) {
                       for ($i = 1; $i <= $tagcount; $i++) {
                               $taglist = $taglist . ", '" . str_replace("'",'',str_replace('"','',urldecode($tags[$i]->term_id))) . "'";
                       }
                       }


               $limit = "LIMIT 10";
               $now = current_time('mysql',1);
               $q = "SELECT DISTINCT pm.meta_id, pm.meta_key, pm.meta_value, 
					p.ID, p.post_title, p.post_date, p.comment_count, count(t_r.object_id) as cnt FROM $wpdb->term_taxonomy t_t,
					$wpdb->term_relationships t_r, $wpdb->posts p, $wpdb->postmeta pm
					WHERE t_t.taxonomy='post_tag' AND t_t.term_taxonomy_id = t_r.term_taxonomy_id 
					AND t_r.object_id  = p.ID 
					AND (t_t.term_id IN ($taglist)) AND p.ID != $post->ID AND p.post_status = 'publish' 
					AND p.post_date_gmt < '$now' GROUP BY t_r.object_id 
					ORDER BY cnt DESC, p.post_date_gmt DESC $limit";
   				
				$related_posts = $wpdb->get_results($q);
               // print_r ($related_posts);

There is a lot going on here. What I've added is a database query($q). This query is going to fetch the posts we want, and what we want from those posts. I'll explain in short what is going on, but the Wordpress codex would be a good place to learn more about this.

<?php
$q = "SELECT DISTINCT pm.meta_id, pm.meta_key, pm.meta_value, 
					p.ID, p.post_title, p.post_date, p.comment_count, count(t_r.object_id) as cnt FROM $wpdb->term_taxonomy t_t,
					$wpdb->term_relationships t_r, $wpdb->posts p, $wpdb->postmeta pm

This line selects distinct posts and what we want from those posts. The pm.* are getting the custom field information. The p.* are getting post info(ID, Title, Date, Comment Count). The "FROM" part is telling the query which databases to look for the information in.

<?php
WHERE t_t.taxonomy='post_tag' AND t_t.term_taxonomy_id = t_r.term_taxonomy_id 
					AND t_r.object_id  = p.ID 
					AND (t_t.term_id IN ($taglist)) AND p.ID != $post->ID AND p.post_status = 'publish' 
					AND p.post_date_gmt < '$now'

The WHERE section is telling the database you only want posts that match "where this criteria is met". In this case we only want posts that match the tags associated with the current post. You could read this statement like so: Get posts that have tags matching those in $taglist but don't get the current post, make sure the post is published before the very second(ie don't get posts to be published in the future).

<?php
GROUP BY t_r.object_id 
					ORDER BY cnt DESC, p.post_date_gmt DESC $limit";
   				
				$related_posts = $wpdb->get_results($q);

We then group the posts by their ID in a descending order by date, but we limit the amount of posts to $limit(which is equal to 10 in this case). Then we run the query through the Wordpress database, and set it to a variable called $related_posts.

Thats it, almost. Now we have an array with posts and their info and we are ready to print it out. But first a quick recap. We have gotten the tags for the current post, set them up for a database query, ran them through the database and got all the posts we want(and their specific info), then stuck them in an array. And it all looks like this.

<?php
global $wpdb, $post;
               $tags = wp_get_post_tags($post->ID);
               //print_r ($tags);

               $taglist = "'" . str_replace("'",'',str_replace('"','',urldecode($tags[0]->term_id))) ."'";

               $tagcount = count($tags);
                       if ($tagcount > 1) {
                       for ($i = 1; $i <= $tagcount; $i++) {
                               $taglist = $taglist . ", '" . str_replace("'",'',str_replace('"','',urldecode($tags[$i]->term_id))) . "'";
                       }
                       }


               $limit = "LIMIT 10";
               $now = current_time('mysql',1);
               $q = "SELECT DISTINCT pm.meta_id, pm.meta_key, pm.meta_value, 
					p.ID, p.post_title, p.post_date, p.comment_count, count(t_r.object_id) as cnt FROM $wpdb->term_taxonomy t_t,
					$wpdb->term_relationships t_r, $wpdb->posts p, $wpdb->postmeta pm
					WHERE t_t.taxonomy='post_tag' AND t_t.term_taxonomy_id = t_r.term_taxonomy_id 
					AND t_r.object_id  = p.ID 
					AND (t_t.term_id IN ($taglist)) AND p.ID != $post->ID AND p.post_status = 'publish' 
					AND p.post_date_gmt < '$now' GROUP BY t_r.object_id 
					ORDER BY cnt DESC, p.post_date_gmt DESC $limit";
   				
				$related_posts = $wpdb->get_results($q);
               // print_r ($related_posts);

Almost Done, Outputting

Ok now we have our posts sitting in an array and we need to output all the info. I'm going to hard code in all the html for this example, but this is not always the best thing to do(Check out the widgets API for other ways). I'll start at the top:

<?php
//Start the related posts widget
function widget_related_posts() { ?>
	<div class="widget related_posts">
	       <h3>Related Posts</h3>
<?php
	
	global $wpdb, $post; ...

All I did there was add in a div (you could also use a unordered list here) and some class names to hook CSS into, also I added the title tag.

<?php
$related_posts = $wpdb->get_results($q);
	                //print_r ($related_posts); ?>
	
		<ul>
			<?php
			foreach ($related_posts as $related_post):
			//print_r ($related_post); ?>

This is the next step, after running our query take the array and do a "foreach" loop on it. Now we can output all the data we want.

<?php
<li><a href="<?php echo get_permalink($related_post->ID); ?>">
					<?php echo $related_post->post_title ?></a></li>

				    	<?php //get thumbnail (custom field)
				        $image = get_post_meta($related_post->ID, 'image', true); 
						if ( $image != '') {?>
				         	<a href="<?php echo get_permalink($related_post->ID); ?>" rel="bookmark" 
								title="Permanent Link to <?php echo $related_post->post_title ?>">
				      		<img src="<?php echo $image; ?>" alt="<?php echo $related_post->post_title ?>" /></a>

				    	<?php } endforeach; ?>

		</ul>
	</div>

This is all the really important stuff here. I didn't use regular wordpress template tags here, I pulled the info straight out of the array. This example gives you a list with the title of the post and an image assigned to the custom field key "image". It also checks to see if anything is assigned to "image" so you don't get unexpected results.

The Whole Thing

Obviously you wouldn't want to use this for just related posts as there are plenty of plug-ins that can do that, but if you want specific results, the plug-ins are usually too general. The reader was going to use it to display related dvd's on posts, which is a perfect example of why you would want to build your own widget.

Here is the final code:

<?php
//Start the related posts widget
function widget_related_posts() { ?>
	<div class="widget related_posts">
	       <h3>Related Posts</h3>
<?php
	
	global $wpdb, $post;
	               $tags = wp_get_post_tags($post->ID);
	               //print_r ($tags);

	               $taglist = "'" . str_replace("'",'',str_replace('"','',urldecode($tags[0]->term_id))) ."'";

	               $tagcount = count($tags);
	                       if ($tagcount > 1) {
	                       for ($i = 1; $i <= $tagcount; $i++) {
	                               $taglist = $taglist . ", '" . str_replace("'",'',str_replace('"','',urldecode($tags[$i]->term_id))) . "'";
	                       }
	                       }

	               $limit = "LIMIT 10";
	               $now = current_time('mysql',1);
	               $q = "SELECT DISTINCT pm.meta_id, pm.meta_key, pm.meta_value,
						p.ID, p.post_title, p.post_date, p.comment_count, count(t_r.object_id) as cnt FROM $wpdb->term_taxonomy t_t,
						$wpdb->term_relationships t_r, $wpdb->posts p, $wpdb->postmeta pm
						WHERE t_t.taxonomy='post_tag' AND t_t.term_taxonomy_id = t_r.term_taxonomy_id
						AND t_r.object_id  = p.ID
						AND (t_t.term_id IN ($taglist)) AND p.ID != $post->ID AND p.post_status = 'publish'
						AND p.post_date_gmt < '$now' GROUP BY t_r.object_id
						ORDER BY cnt DESC, p.post_date_gmt DESC $limit";
					//echo $q;
					$related_posts = $wpdb->get_results($q);
	                //print_r ($related_posts); ?>
	
		<ul>
			<?php
			foreach ($related_posts as $related_post):
			//print_r ($related_post); ?>
				
				<li><a href="<?php echo get_permalink($related_post->ID); ?>">
					<?php echo $related_post->post_title ?></a></li>

				    	<?php //get thumbnail (custom field)
				        $image = get_post_meta($related_post->ID, 'image', true); 
						if ( $image != '') {?>
				         	<a href="<?php echo get_permalink($related_post->ID); ?>" rel="bookmark" 
								title="Permanent Link to <?php echo $related_post->post_title ?>">
				      		<img src="<?php echo $image; ?>" alt="<?php echo $related_post->post_title ?>" /></a>

				    	<?php } endforeach; ?>

		</ul>
	</div>
<?php
} //End widget and register the widget for use in Wordpress
       if ( function_exists('register_sidebar_widget') )
       register_sidebar_widget(__('Related Posts'), 'widget_related_posts');

A lot of this code is hacked up and stripped down from current plug-ins which I highly recommend looking into the code of if you are curious about WordPress and it's inner workings. Seeing how other more advanced people code will open you up to new ideas.

Update

One of my readers Martin read the first article about a related posts widget and wanted to take it further, the result of that conversation was this article. Once again Martin decided to take things even further and here are the results.

This example makes sure the widget title will not be shown if there are no related posts and instead replaces it with a google ad. This is a great use of real estate on a website.

<?php function widget_related_dvds() {
        global $wpdb, $post;
        $title = get_the_title($post->ID);

        $taglist = "'" .

        str_replace("'",'',str_replace('"','',urldecode($tags[0]->term_id)))
        ."'";

        $tagcount = count($tags);
        if ($tagcount > 1) {
                for ($i = 1; $i <= $tagcount; $i++) {
                        $taglist = $taglist . ", '" .
                        str_replace("'",'',str_replace('"','',urldecode($tags[$i]->term_id)))
                        . "'";
                }
        }

        $limit = "LIMIT 10";
        $now = current_time('mysql',1);
        $q = "SELECT DISTINCT pm.meta_id, pm.meta_key, pm.meta_value, p.ID, p.post_title, p.post_date, p.comment_count, count(t_r.object_id) as cnt FROM $wpdb->term_taxonomy t_t, $wpdb->term_relationships t_r, $wpdb->posts p, $wpdb->postmeta pm WHERE t_t.taxonomy='post_tag' AND t_t.term_taxonomy_id = t_r.term_taxonomy_id AND t_r.object_id  = p.ID AND (t_t.term_id IN ($taglist)) AND p.ID != $post->ID AND p.post_status = 'publish' AND p.post_date_gmt < '$now' GROUP BY t_r.object_id ORDER BY cnt DESC, p.post_date_gmt DESC $limit";

        $related_posts = $wpdb->get_results($q);

        if (count($related_posts) > 0) {
                print <h2 id="availability">DVD</h2>';
        }
        else {
                print '<div class="adver">';
                include(TEMPLATEPATH . '/google-ad-120x240.php');
                print '</div><!-- end adhor -->';
        }
?>

This example matches posts based on the Title and a certain category (in this case the DVD category). Note this is just the query portion of the script.

<?php
global $wpdb, $post;
        $title = get_the_title($post->ID);
        $limit = "LIMIT 10";
        $now = current_time('mysql',1);
        $q = "SELECT DISTINCT
                p.ID,
                p.post_title,
                p.post_category,
                p.post_date,
                p.comment_count,
                count(t_r.object_id) as cnt
                FROM
                $wpdb->term_relationships t_r,
                $wpdb->posts p,
                $wpdb->postmeta pm
                WHERE p.post_title = '$title'
                AND p.post_category = 'DVD'
                AND t_r.object_id  = p.ID
                AND p.ID != $post->ID
                AND p.post_status = 'publish'
                AND p.post_date_gmt < '$now'
                GROUP BY t_r.object_id
                ORDER BY cnt DESC, p.post_date_gmt DESC $limit";

        $related_posts = $wpdb->get_results($q);

Still not enough? It wasn't for Martin. Add this to the script and match posts based on tags and title!

<?php
$title = get_the_title($post->ID);
$related_posts = query_posts("category_name=DVD&tag=$title+$title");

There you go, three examples of this simple example made into something truly useful. If you have used this script or have a better way to do things, leave a comment!

Speed Up Your Website: Part Deuce

2008-03-31T00:00:00+00:00

Last week I wrote a post about what I was doing to speed up my website. While that post is an informative, well-written piece of literary genius, it didn’t go into a whole lot of detail. That detail is in this post, because two posts are better than one. I’ve tweaked, found problems, fixed a few problems, and learned a thing or two. I also learned there is a lot to learn.
I’ll mostly talk about wordpress in this post, but many of these tools and resources are not wordpress specific.

Taming HTTP Requests

If you’re like me, you have plugins, more than a few plugins. While on their own plugins are not the problem, the files they load however are a problem. Seeing these plugins load javascript and css files on every page even though they were not being used quickly became a pet peeve (like a pet bird that poops on the furniture). What to do? Chuck ‘em in the trash. Find a plugin that behaves itself. Cforms was a plugin loading on every page, I knew for sure this was a quality plugin so I took a look at the options page and sure enough I was able to limit the loading to my About page only.

Also consider using CSS sprites rather than loading a lot of images.

The point is, look around for a way to limit the HTTP requests, if something is loading that shouldn’t be get rid of it. This is one of the easiest ways to speed up your website, so limit your requests.

Database Queries

As someone who designs themes for public use, I usually don’t hard code links, titles, and whatnot even on my personal sites. This creates excess SQL queries, which take time, and time, keeps on ticking. Don’t use a wordpress tag or database query when simple beautiful fast HTML will do.

This goes for any CMS, and while this may be more relevant for large sites it can’t hurt to think big when your a little guy.

WP Super Cache

This one is wordpress specific, but there are lots of ways to cache your website. WP Super Cache converts your page into a static, pure HTML file for users that have not logged in or left a comment. There are two big advantages to this:
1. You don’t make any unnecessary database queries(see above point). This keeps your database server from crashing.
2. Most of your visitors will get a compressed static HTML file. This is the fastest way to get the page loaded and up on the screen. Once the user leaves a comment or logs in, they see a wp-cache page which is more dynamic, yet still fast.

If you plan on receiving a lot of traffic, WP Super Cache is a must, and at the very least you should use WP-Cache. I use wp super cache on and love it, it has not failed me yet.

phpSpeedy

I ~~use~~ used phpSpeedy to take care of compression. Getting this to work can be tricky depending on your website, but it is generally easy to set up. The author of phpspeedy is very supportive so I suggest at least trying this out. It is still very new but the speed at which it has been developed has made me a believer.

There are two versions of this script, a wordpress plugin and a php script to be used however you want. I don’t use phpSpeedy anymore as I do all the things it does via the server now, in my case I found this simpler.

Expires Header

An expires header essentially tells the browser to cache things and for how long. At first this may be confusing as there is some Apache mumbo jumbo talk to get around, but it is really easy. If you are at all familiar with .htacces files you will have no problem setting far futures expires headers.

Here is an example of the code you would add to your .htaccess. This bit of code is going to add a expires header to your media files.

<FilesMatch "\.(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf)$">
Header set Expires "Thu, 15 Apr 2010 20:00:00 GMT"
</FilesMatch>

NOTE: Far future expire headers are going to be for files that do not change regularly. The browser is going to cache the file and not look back until the year 2010! The name of the file must be changed if you change the file(using version numbers is a good way to do this, which can also be automated).

That being said, you can set the files to expire in any amount of time you want, I currently have most images set to expire after a few weeks. Like so:

ExpiresActive On
ExpiresDefault A0
 
<FilesMatch "\.(gif|jpg|jpeg|png|swf)$">
ExpiresDefault A3600
Header append Cache-Control "public"
</FilesMatch>

Compressing Files

If you have files that need compressed and wordpress, your CMS, or some other software isn’t already compressing them, you can do it all via the server(which is also faster). Askapache.com has a tutorial on adding compression. Even the smallest files can be reduced and this can have a major impact on loading times.

Minify Javascript and Move It Down

You should minify/compress your javascript and put it in the footer. This ensures your content(the most important thing) is loading before all your interface slickness. Another thing to not here is watch your analytic software, a lot of times this can greatly slow down a page if left at the top.

Just the Beginning

There are plenty of reasons why a website can be slow, and a way to fix each and every one of them. I have only gone into what I believe are the easiest and best ways to speed up a website. If you want more, tell me, or check out the sites below.

Yahoo – An exhausting read with a ton of information you need to know.
Roscript – The somewhat shorter version of yahoo’s list.
Die.net – Are you a geek? Do you like charts? If so, then you should read this, some awesome information, benchmarking and testing in this article
Apache .htaccess tutorial – A tutorial from the source, if you want to know the power of .htaccess you should read this.
Ask Apache – more .htaccess tutorials.

Speed Up Your Website: Part One

2008-03-18T00:00:00+00:00

Update:

Part two of this article is now up with a lot more tips and tricks on how to speed up your website!

When I first designed curtishenson.com I took into no consideration the speed that it loaded. OK, that isn't entirely true. I compressed my images...a little, some of my javascript was compressed, and my CSS is compressed(but only because I was trying out the new Blueprint CSS compressor). So when my site actually got content on it, everything started grinding to a halt. I tried speeding it up with WP_Cache, then Super_Cache, then phpSpeedy. But I still had problems. I was planning on starting to advertise more, release a new premium theme and my site really needed to be faster(I hope it is faster, otherwise you're probably still waiting for this article to load).

Benchmark

First thing to do is set a benchmark. I used Firebug and Yslow to benchmark my site. I benchmarked with phpspeedy and super cache installed and functioning and also without. What I found surprised me, the page with no cache or phpspeedy was faster, by a whole second. Obviously YSlow gave me a glorious F. The blog loaded in ~5 seconds, and the homepage loaded in ~6 seconds...unacceptable! My fastest load times were still above 3 seconds, thats an eternity on the web!

Shrinkage, Cut Those Files Down To Size

So I started from the beginning, my images, my extra large high-res awesome images that, unless you were a Swede with fiber, took forever to load. The biggest(no pun intended) culprit was the background image for the whole site, weighing in at just under 300k(ouch!). To be fair it was made to expand on huge monitors, sorry guys, you get no love now. I cut down the size and compressed it down to 132kb(might have to compress it more, time will tell).

I also shrunk down all my other ridiculous images, a half transparent background image at 4k? Its now 100 bytes. Some of the file numbers looked like this: 80k down to 20k, 224k to 103k, 50k to 10k, 30k to 7k. You might not have the crazy file sizes but you can probably shrink your images down at least some.

I also compressed the rest of the javascript at this time. I only had to compress two files, both for sifr, but there were files from wordpress plugins that were not compressed.

I don't think it made much of a difference but I consolidated my files using conditional tags, this was something that had bugged me.

Tested the homepage now and the page loads in ~1.5s, that is a huge improvement. The blog page loads up in ~2s. That is all from minimizing images. The page size has dropped over 200K now. I still fail Yslow though, so lets see if we can make it even faster.

phpSpeedy

I installed phpspeedy next, now as wordpress plugin this is super easy to install. Un-cached the home page loads in about 1 second, cached it loads in an average of 700ms. The blog loads in 2.3 seconds with an empty cache, and slightly faster with a primed cache. YSlow scores the page a D, but the important bits all score an A.

Warp Speed Scotty!

Whats next? I still need to do a few things. I've enabled WP Super Cache and will see what effect it has as pages are cached. ~~Also a few plugins are causing unnecessary files to be loaded so I'll be getting rid of those~~. I'm also going to be tweaking the settings over the next few days to see what works the best. It seems the server still hits a speed bump every once in awhile, but I'll see what I can do about that.

Tune in for the next part when I'll talk about my experiences and a roundup of the tools you can use to speed up your website. Yes I'm leaving you hanging...now go outside.

Wordpress Conditional Tags: Write Less Code

2008-03-14T00:00:00+00:00

Update: For an update to this post, and more examples of complex conditional statements, read the new article Complex WordPress Conditional Tags

While re-aligning my website I realized I was writing a lot of redundant code. Some page templates were nearly exactly the same like the category and tags pages, the only difference was one word! Copying and pasting that one template seemed like a big waste of time, and it was. I read somewhere that good programmers are lazy programmers. Not in the sense that they don't fix their own code when they find a better way to do it...but that they don't repeat code, over and over and over again. Not only does it take longer to repeat code, but it is a royal pain when you need to update(like when a CSS framework gets updated and drops a class name...).

Learn it right the first time

When learning to build themes the idea of template hierarchy got pounded into my head. I had template names floating around my head and had the idea that I needed to use them. All of them. Category, Tag, Author, Page, Archive, Home, Date, Search and all the rest of them. You don't need to have a template for each, unless there are going to be major differences between them! That was a major point I missed when learning Wordpress.

Conditional tags to the rescue

You've probably heard about conditional tags, used them, or seen them in other themes. I used them all along for things like dynamic titles, but somehow it escaped me to use them to make my life simpler. A conditional tag looks like this:

<?php
if (is_home()) { echo bloginfo('name'); }

That means if you are on the home page print the blogs name. You can use conditional tags for everything from adding content just for the owner of the site(edit post links) to finding out what category a post is in. Go here for a full list of tags.

A bit about the hierarchy

Pretty powerful little tool no doubt, but so far it looks like adding more code not less. Combine conditional tags with the template hierarchy and you will see what I am talking about. Wordpress calls certain files by default. For instance, if you visit a single post Wordpress will try to call single.php, if Wordpress can't find single.php it will call index.php. You can use this to your advantage!

Say you wanted to develop a theme for Wordpress(good for you!). You design your theme and decide that your category, tag, monthly, and authors page are all going to look exactly the same except for the header. Instead of making a category.php, tag.php, date.php and author.php you are going to create archive.php. Why? Glad you asked, If Wordpress doesn't find any of those files it will automatically call archive.php. We'll use conditional tags to call specific content based on what type of page it is. Lets look at some code!


<div class="content">
      <h1>You are viewing the Archives

      <?php if(have_posts()): while(have_posts()) : the_post(); ?>
      <h2>
      <p class="meta"> by 
      <?php the_excerpt(); ?>

      <?php endwhile; endif; ?>
</div>

Theres a really basic archives template in all its glorious glory. But what if you are viewing an authors page? You don't want to see "Viewing the Archives", thats confusing to people(and you never want to confuse people, unless its a puzzle site). Lets stick a conditional tag in there to show the authors name at the top.


<div class="content">
<?php if (is_author()) { ?>
     <h1>Posts Written By <?php the_author(); ?>
<?php } else (is_archive()) { ?>
      <h1>You are viewing the Archives
<?php } ?>

      <?php if(have_posts()): while(have_posts()) : the_post(); ?>
      <h2>
      <p class="meta"> by 
      <?php the_excerpt(); ?>

      <?php endwhile; endif; ?>
</div>

Now when viewing an author page you will see "All Posts By The Dude" instead of "You are viewing the Archives". This is just a basic if else php block which can be used to do all sorts of things(I suggest playing around with ideas). But what about all the other pages? We can use an if elseif else block:


<div class="content">
<?php if (is_author()) { ?>
     <h1>Posts Written By <?php the_author(); ?>
<?php } elseif (is_category()) { ?>
     <h1>You are viewing the <?php single_cat_title(); ?> category
<?php } else (is_archive()) { ?>
      <h1>You are viewing the Archives
<?php } ?>

      <?php if(have_posts()): while(have_posts()) : the_post(); ?>
      <h2>
      <p class="meta"> by 
      <?php the_excerpt(); ?>

      <?php endwhile; endif; ?>
</div>

You can insert as many elseif statements as you need. For this example I would insert one for is_tag() and another for is_date(). Now you have five different headings and they clearly tell the user what they are looking at, and you only had to create one page!

You got homework

Sure now you don't have to write as much code but don't stop there. You can use this technique to dynamically show content depending on the type of page the user is looking at whether its a post, an about page, or the home page. Make custom layouts for pages or certain categories. Combine this technique with some basic php and make it even more powerful.

Note: These code examples wouldn't actually work as the_author() has to be inside the loop. It can work, but thats another whole tutorial.Now go outside.

Creating A Retro Sticker

2008-03-11T00:00:00+00:00

Looking around the site you may notice graphics that look like stickers or old worn paper and cloth. These are getting more and more popular as grunge starts taking over the shiny web2.0 look, and they are really easy to make. Now turn on some good music and lets get started.

Setting up the text in Illustrator

The first step is to design your sticker in Illustrator. I'm going to setup the text first, convert the text to outlines then group( ctrl/apple + G ) your text together.

Now copy(ctrl/command + C) and paste in front(ctrl/command + F). Select the text in the back, I usually lock the top group when I'm editing the bottom group. Give the text a thick stroke(I used a dark grey and a 13pt stroke). Don't worry if you get some funky results, that can all be fixed. Grab the point editor(white arrow) and edit the background text so there aren't any crazy points sticking out. I clean up the border a bit more right now so everything looks nice and neat, this is the result.

Now all stickers are required to have flair, so lets add a bit. I'm using some ultra slick vectors from BenBlogged for that extra level of cool.

Ok we need to give those an outline too, group and stroke it all just like we did the text. You should now have everything with a good thick stroke on it, now would be a good time to change anything you aren't happy with because next we go into Photoshop.

Now that we got our basic sticker we need to export it as a Photoshop document. But first make sure you have everything on different layers, use your own judgement here. I put the colored text on one layer, the stroked background text on another, and the lines and circles on another layer so I could edit them all separately. Note: You could do the same thing with one layer and multiple groups.

The above is what my layers palette looks like right before export. Once in Photoshop the first thing I do is copy all my layers so I have a backup of the original layers. It is a good idea to create layer backups during this whole process as you will most likely want to experiment with different settings...a lot.

For this sticker I'm going to add some layer styles to the text. The color is sorta boring so I add a gradient overlay to make it more interesting. And since we are going to add some grunge later on, I add a black stroke to the text(just a real thin stroke, 2px here). This black stroke is important as it will keep the text readable even with the heaviest of weathering. So far it isn't looking too bad.

To add a little realism you should play around with adding a gradient to the background text and anything else in your design. This will add a lighting effect, but it doesn't always look right, so use your own judgment. I went ahead and added a light gradient to everything else as well.

It just isn't a sticker unless someone has tried to peel it off, so lets bend a corner. Grab your pen tool and out line a corner. Be sure that the pen tool is set to shape layers.

Alt/Option click on the shapes mask to select then invert the selection, now go to the layer(or layers) that are going to folded and hit the quick mask button. Go back to your shape layer and now we are going to fold it over. Command/Ctrl + T to transform the shape layer, now grab a corner and drag it over to flip it.

Now change the color to light gray or white. Select the shape again and create a new layer, brush in a shadow along the edge. Now merge the shape and shadow layer and open up your styles, and give it a little drop shadow.

So now you have something that looks OK but it needs some texture.

Now I'm going to let you in on a little secret. Ever wonder how all those cool old looking shirts are made? Or how the pros get that cool worn look to their art? Well one of the ways, and by far the easiest and quickest, is to use Mister Retro's Machine Wash Photoshop filters. These image filters make it almost too easy to make things look worn. If you don't have mister retro you'll want to break out the eraser and brush. There are as many grunge brushes on the net as exploited young girls so look around. You can also get some textures and overlay them the sticker, this works sometimes, but other times looks fake and ugly so be careful.

After a little mister retro magic(or your own magic) you should have a nice grungy sticker, but were not done. Lets age it some more! Make a curves adjustment layer and tweak the curves a bit, mine looks like this. Note: You may need to switch your image mode to RGB for this.

I also add a brightness/contrast adjustment layer to give a faded look along the top. Now is the time to play around with adjustment layers and figure out what is going to look the best.

A little polishing never hurt anyone, our sticker looks pretty nice as it is but you can always take things a bit further. Flatten all your layers so you have just one layer of the almost final image. Copy the layer and give it a color overlay layer style, make it all white. Put that layer under the color copy and bump the white layer over and down a bit. This will give it an offset look, like it was printed on a retro printer by some supermart employee who could care less(which after all is the "in" look...right?). Giving the top color layer a little inner shadow can also help to polish the look a bit more.

You should end up with something similar to above. If you use this tutorial I'd love to see what you come up with!

Simple Related Posts Widget for Wordpress

2008-02-25T00:00:00+00:00

When I started building wordpress themes PHP and most of the advanced wordpress functions went over my head. I've learned quite a bit since then, but one step taught me a lot about wordpress and PHP. While I was coding my premium wordpress theme I decided to make a very simple related posts widget. There are plenty of plugins that do this but I wanted to learn about writing widgets and further my PHP and I had a pretty good idea on how to do it, so I did it.

Functions.php

I suspect most people creating themes never even create a functions file, much less know what it does. Used correctly it can be a very powerful tool. This is how advanced theme authors create theme options, custom wordpress theme tags, widgets and more. I won't go into too much detail on the functions.php file for now as that can be a tutorial in itself. There are a few resources for learning what can be done with the file, and I'll be writing much more about it on this blog in the future.

Making a widget

First you need to create a functions.php file in your theme directory. The file must start with <?php and end with ?> with no empty lines before or after. Now we are going to create a new function which will become our related posts widget.

<?php
//Super Simple Related Posts Widget
//Gets posts from the first category of the current post
function widget_ch_related_posts() {
}
if ( function_exists('register_sidebar_widget') )
register_sidebar_widget(__('CH Related Posts'), 'widget_ch_related_posts');
?>

This is the beginning of our widget. I like to put comments at the top to identify what the widget is and does but this isn't necessary. First we declare a function called widget_ch_related_posts(); try to create a unique name, you don't want it clashing with any other widgets or function names.

The if statement simply registers the sidebar widget with wordpress and gives it a more pleasant name. The 'CH Related Posts' is what you will see in the widgets section of wordpress, so give it a name you will recognize.

To learn more about exactly what that code is doin, here is the documentation from Automattic. Essentially we are widgetizing a plugin, we just haven't created the plugin, yet.

Next up, a plugin!

Now we have a widget, but it doesn't do anything. We need to stuff some cornbread in our widget (I like cornbread). In most of my themes I alter the sidebars to use divs for the containers and h3 for the headers, but by default widgets use list items for containers and h2 for the headings. I tell you this because you need to know what scheme your theme is using for your code to work right. You can learn more about this at another Automattic page. I'll use the default way for this example, below is the example of our plugin.

 	
<li class="ch_related_posts">
<h2>Related Posts</h2>
<?php
//get post categories and set $cat to first category
$cat = get_the_category(); $cat = $cat[0];
//set arguments for the get_posts function more options found at wordpress codex
$args = array(
'numberposts' => '5',
'offset' => '1',
'category' => $cat->cat_ID //calls category ID number
);  ?>
<ul>
<?php
global $post;
$myposts = get_posts($args); //gets arguments from array above
foreach($myposts as $post) : //loops through posts
setup_postdata($post); //sets up posts
?>
<li><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li>
<?php endforeach; ?>
</ul>
</li>

I'll break this down MC Hammer style for you. The list item is contained in our themes sidebar(which should be a unordered list, hence no <ul> tag). You can dump the class="ch_related_posts" if you don't need to style it individually. The h2 header is the title of your widget, so far pretty basic html.

The php is where we get to start having fun. First thing I do is create a variable called $cat, I then use get_the_category to get all the categories the current post belongs to. Now $cat is holding an array, I set $cat to the first category using $cat = $cat[0] (arrays in php start with zero not 1). But hold one a sec! This is a good place to experiment with the plugin, I made it very simple but you could get posts from all the categories, certain categories, get tags instead of categories. You have plenty of options, and I encourage everyone to play around and see what happens.

For the next trick I'll create $args tada, args stands for arguments. Arguments for what? For get_posts but more on that later. I create an array and input the arguments that I want to pass along to get_posts further down in the code. This is just an easy clean way that I like to pass the arguments, it makes for easy changes and readable code.

<?php 'category' => $cat->cat_ID //calls category ID number

This little line of code sets the category argument to the ID of the current posts first category...I think that makes sense. See $cat is holding a lot of information about the category and all we want is the ID.

Output something already!

OK! Now we need to list all the posts, pretty normal wordpress stuff now.

<ul>
 <?php
   global $post;
   $myposts = get_posts($args); //gets arguments from array above
   foreach($myposts as $post) : //loops through posts
   setup_postdata($post); //sets up posts
  ?>
     	<li><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li>
  	<?php endforeach; ?>
</ul>

I set up the posts using global $post then set $myposts using get_posts and the arguments we just specified. We loop through the posts and output them into nice little happy list items. We end the loop and close the list out and we are done! Sorta.

That was easy.

Ok so now you got your widget, you got your plugin, now you need to put them together. This is really easy, copy your plugin code and paste it right smack in the middle of the widget code like so:

<?php
//Super Simple Related Posts Widget
//Gets posts from the first category of the current post
function widget_ch_related_posts() {
	<li class="ch_related_posts">
		<h2>Related Posts</h2>
		<?php
		//get post categories and set $cat to first category
		$cat = get_the_category(); $cat = $cat[0];
		//set arguments for the get_posts function more options found at wordpress codex
		$args = array(
				'numberposts' => '5',
				'offset' => '1',
				'category' => $cat->cat_ID //calls category ID number
				);  ?>
		<ul>
	 	<?php
	 		global $post;
	 		$myposts = get_posts($args); //gets arguments from array above
	 		foreach($myposts as $post) : //loops through posts
	 		setup_postdata($post); //sets up posts
	 	?>
	    		<li><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li>
	 		<?php endforeach; ?>
	 	</ul>
	</li>
}
if ( function_exists('register_sidebar_widget') )
	register_sidebar_widget(__('CH Related Posts'), 'widget_ch_related_posts');
?>

And there it is, save your functions.php and check to see if everything works. If it doesn't it is probably my fault, but you should try to fix it, cause that will help you learn, at least that is my excuse. This is just a itty bitty taste of what you can do with functions.php file.

To read more about how to create widgets and plugins visit Automattic's page for the complete API.

Looking Outside The Box For Inspiration

2008-02-19T00:00:00+00:00

Getting inspiration for design can sometimes be challenging. It is easy to go to your favorite CSS gallery or design site and get some ideas, but more often than not this leads to boring designs. Sometimes getting a fresh creative idea takes some digging in some unusual dirt.

Art

This one is obvious for illustrators, but web designers usually skip it. Art can inspire many things: colors, textures, rhythm, layout, or just get you in a creative mood. Art gets me in a drawing mood, which leads to lots of doodles and fresher designs...plus its fun.

Concept Art Forum - The king daddy of concept art sites, conceptart.org has a huge amount of art on tap, and it is always fresh. Don't skip the forum as it is the meat and potatoes of the site.
Old Books - I'm not sure this falls under art but might need a section all of it's own. The link leads to a copy of The Usborne Book of the Future which should not only be entertaining but give you some good ideas...this particular book also contains several examples of what not to do so be careful what it inspires you to do.
Colour Lovers - Colour Lovers can be a great source of inspiration, and that is what they are there for. So thats that...go get some colors.
Boonika - I'm not really sure how to describe boonika. It is a blog, with art and stuff that is art like. I suggest you check it out for yourself.
Artists - There are more artists than I could ever mention with sites full of inspiring works, so I'll list a couple random ones. MyDeadPony, Hugh Ferriss, Valp'Nietylko, James Paick, Signal Noise

Photography

Photography is great to look at, but its also great to get out and actually take pictures to inspire yourself. I'm always amazed at how things look through the viewfinder.

Strobist - While not really a site for inspiration so much as improving your technical skills, it is more than worth a mention here. If you want to improve your photography for any reason, this is one of the best resources you could ever ask for.
Flickr - Duh.
Chase Jarvis - Great photographer and you will probably recognize his work. Not only are his photos great for inspiration but his videos rock.
DIY Photography - Again a more technical site(see a theme, go outside!).

Interior Designs

This isn't HGTV this is computers, this is digital, and I'm not to keen on parades! Nay I say(cause it rhymes) interior design can definitley be used as inpiration. The colors, shapes, patterns, practically everything from interior design can be moved over to the digital world...even furniture.

Flickr - Again? Yes Flickr again, this time a pool of only interior designs.
Harmonie Interieure - Some pretty slick vinyl wall decorations, and the site design is right up my alley. I also think they did a pretty good job of integrating both French and English into the site, not an easy thing to do.
Industrial Decay - Totally edgy and grunge type interior designs, these take years sometimes decades to create! Ok, so I don't really know that many good interior design sites, but nonetheless it is an awesome blog.

Illustrations

Drawn! - The blog about illustration. More inspiration than you can shake a stick at!
I Want Your Skull - Not for everyone, actually it is pretty specific...If you want to see cool skull stuff, check this site out. If you don't want to see cool skull stuff, don't go to this site(why wouldn't you?).
Layer Tennis - You can check out the archives right now, some great stuff in a very short amount of time.
Go Mediazine - The blog from the folks that bring you the coolest vectors. Tutorials tips and all sorts of stuff to give you wicked ideas.
Animation Backgrounds - Remember all those corny Disney movies? Well if you can look past the lame plots the backgrounds are really beautiful.
Cereal Killers - What's cooler than cereal? Cereal that can kill you! But ceriously this blog has some wicked cereal box art.

The I'm Too Lazy To Look Through All That Stuff

I realize some people think that list looks more like work, so for you I have one link.

FFFFound! - Thats four f's. FFFFound is a horde of cool stuff people bookmark. A quick glance at the front page will probably give you ideas for a week.

So ditch your CSS gallery and check out some other inspiration sources, you never know what you might come up with.

Sunrise Wallpaper

2008-02-15T00:00:00+00:00

Heres a wallpaper for you from me! I call it Sunrise and its a cut down version of a poster I did. There are three versions of the wallpaper which are pretty much different levels of color. I call them "Early Morning", "Sunrise", and "Mid Morning"; you can call them "dark", "original", and "colorful" if you wish.

The wallpapers are 1280x1024 only right now, but if you want a different size leave a comment and I'll post up the size you need.

Download All