During my WordCamp presentation, people asked me about getting their themes out there. I think the best way to discuss this is to tell you exactly how I did it, since it seemed to work for me.

I started working with WordPress about 5 years ago. I released my first free theme back in 2008. It was Magazine Basic. I tried to develop a theme that had multiple easy-to-use options so users could configure it to their liking and could each create something unique. As of today, it has been downloaded 143,114 times from the WordPress.org theme directory. Within the first week of its release, it had so many downloads that I wanted to release another theme. So I did.

Before I knew it, I had a lot of requests for extra features, so I thought, “Why not see if I could sell some premium versions with as many extra features as possible?” Of course, I didn’t want to go overboard, so I developed some theme options that I thought would please a multitude of users. That’s when I started Themes by bavotasan.com.

Making Money

There is no sure fire way to make money selling Premium WordPress Themes, but there are certain steps you can take that might help you cash in on the demand for high quality themes. Building a great theme and giving it away for free by including it in the WordPress.org directory is the first step into making a name for yourself in the community. People who use WordPress are very big on the fact that it’s free and open source. So give them something free and open source as well.

The better your theme, the more people will download it. Once your theme gets downloaded a few times, you will see that users will start to email you with questions about bugs, features they would like to see, and both positive and negative feedback on your work. These are all great things. The open discussion with your end user is invaluable. The information you gather will help point you in the right direction for how you should develop your theme on the next level: The Premium Theme level.

Premium Themes usually offer more control over every aspect of customization. They can have higher quality designs, multiple skins, different layouts and any other options you can imagine. Users expect something more from a Premium Theme and what better way to find out what that is exactly than by keeping an open communication with people that have already downloaded your free product?

Take a look at what other Premium Theme sites are offering by going to http://wordpress.org/extend/themes/commercial/. That is the WordPress.org commercial theme listing page. Once you release your themes, getting your site listed on this page is a must. But you need to follow the guidelines from part 1 to a tee in order to qualify. Once you are listed on this page, people will check you out. Whether they buy your product or not will all depend on its quality and features.

Translation Ready

I had some questions about making your theme translation ready during my presentation, so that is obviously something that people are interested in. WordPress has a codex page dedicated to making your theme or plugin ready for internationalization. Read it at http://codex.wordpress.org/I18n_for_WordPress_Developers. Once you have prepared your files using the gettext libraries, you can create a .po file using this great online resource: http://www.icanlocalize.com/tools/php_scanner. Create a languages folder in your theme and place your .po file in it. Then use the following code in your functions.php file:

// Make theme available for translation
// Translations can be filed in the /languages/ directory
load_theme_textdomain('theme_name', TEMPLATEPATH . '/languages');
 
$locale = get_locale();
$locale_file = TEMPLATEPATH . "/languages/$locale.php";
if ( is_readable( $locale_file ) )
	require_once( $locale_file );

Replace theme_name with the string you used in the gettext statements; it should be the name of your theme in lowercase with no spaces.

Working Demos

Putting together a demos site with the latest version of your themes allows users to test them out in a live environment. This is absolutely one of the best ways to promote your products. I am currently rebuilding my demo site using the WordPress 3.0 multi-site feature. Now each of my themes will be demoed on their own site, which means I can make sure that their greatest features are front and center, and I can customize my content to show where each theme stands out.

Customer Support

If you don’t support your themes, no one will want to use them because they won’t be able to rely on you for fixing bugs, upgrading as WordPress upgrades and day to day questions about how your theme works. Whether you do this through email, the WordPress.org forum or your own site, it doesn’t matter. Just as long as you do it. This help builds confidence in your users to try out other products you have developed. I spend a lot of time in my support forum responding to questions, and more often then not, things come up that I would have never thought of. Different ways to use my themes, simple features that might blow people away, or even just bugs that might only occur for 1% of my user base. I need to know this stuff. It helps to understand my customers, and in turn build better themes.

Conclusion

There are probably tons of things I might have missed along the way, but I think these tutorials will really get you moving in the right direction. If you have any questions, or feel like I didn’t go into enough detail about something, please let me know. I’ll do my best to keep things updated and will add in anything that you might think is necessary (or maybe I’ll save that for the book, wink-wink).

Part 1: Guidelines for Developing a WordPress Theme
Part 2: Basic Template Files
Part 3: Understand The WordPress Loop
Part 4: Adding Theme Options
Part 5: Making Money

Custom Menus

Before WordPress 3.0, the only way to truly customize your menu was to do it manually. The default functions either allowed you to list categories, or pages, or links, but not all three together. And ordering them required a plugin. Now, all it takes is one simple function and the new menu system will be activated on your theme so users can customize their menus ’til the cows come home.

To activate custom menus in your theme, add the following to your functions.php file:

add_theme_support( 'nav-menus' );

NOTE: Always make sure that when you add PHP to your functions.php file, it is included within the <?php ?> tags.

To really take control of the custom menus once you have activated them, you should also define some locations where they can be displayed.

register_nav_menu( 'main', 'Main Navigation Menu' );

The above registers a new menu location called “main.” When your users create a new menu, they can assign it to that location so it will be displayed on the front end. You can create as many theme locations as you wish so your users can place custom menus in multiple places.

The new custom menu system in WordPress 3.0

Once you have registered a few menu locations, you need to actually add some code to your template files to display those menus. The following will display the “main” menu in the header.php file.

wp_nav_menu( array(
	'theme_location' => 'main',
	'sort_column' => 'menu_order',
	'container_id' => 'main-navigation'
) );

This will display the “main” menu if one has been assigned to that theme location. It will sort the menu according to how it is organized in the custom menu page, and it will surround it in a div container with the id “main-navigation.” There are many more parameters that can be set for this function. Check out http://codex.wordpress.org/Function_Reference/wp_nav_menu for more info.

Background Editor

This one is extremely easy to implement if you don’t plan on doing anything fancy with it. Add the following to functions.php to activate it:

add_custom_background();

This will add a link in the Appearance panel for Background. Clicking on that link will bring up the following screen:

The new background editor in WordPress 3.0

Now your users can either select a color for their background, or add an image. If you want to design your theme with a default background, you’ll need to use the add_custom_background() function to set some callbacks to define your default background color or image.

add_custom_background( $header_callback, $admin_header_callback, $admin_image_div_callback );

You can read more about the custom background callbacks in the codex at http://codex.wordpress.org/Function_Reference/add_custom_background.

The Featured Image

This was actually a feature that was introduced in WordPress 2.9, but it’s one that I think all themes should take advantage of. Activating this option allows your users to select an image to represent their post. It doesn’t need to be inserted into their post or even in that specific post’s image gallery.

Activate it by adding this to your functions.php file:

add_theme_support( 'post-thumbnails', array( 'post', 'page' ) );

You can set whether it works with pages and posts, or just one or the other. Leaving the second parameter blank will automatically set it for all posts and pages. It will also set it for all custom post types that you might create.

Once the option is activated, a new panel will appear on the post/page edit screen with a link to set a featured image. This will just bring up the media upload screen and the option to use an image as a featured image will appear near the bottom.

There are also some cool additional functions you can use to set specific sizes for your image, in case your theme requires certain sized images for different areas.

set_post_thumbnail_size( 80, 80, true );
add_image_size( 'category-thumb', 200, 150, true ); // adding 'true' as a final parameter crops the image to those exact dimensions

The first piece of code will lock in a thumbnail size for your theme. This means it won’t be able to be modified under the Media link in the WordPress admin settings. The second line creates a new defined image size named “category-thumb.” When users upload new images, any image size you add using add_image_size() will tell WordPress that a new image thumbnail needs to be created with those dimensions.

To display the featured image in one of your theme templates requires the use of this function, and it must be placed within the loop:

<?php 
  if( function_exists( 'has_post_thumbnail' ) && has_post_thumbnail() ) { 
    the_post_thumbnail( 'category-thumb', array( 'class' => 'alignleft' ) );
  }
?>

The above code will fetch the ‘category-thumb’ image if one exists for that post, set its class to ‘alignleft’ and display it. Outside of the loop, you would have to use get_the_post_thumbnail($post->ID, $name, $attr).

Read more about it at http://codex.wordpress.org/Function_Reference/the_post_thumbnail.

The Header Image

If you take a look at TwentyTen, you can see how this option can make it extremely easy for your users to add a custom image to the header of your theme. If you don’t plan on designing your theme with a large header image, you can still use this option to allow them to add a logo to their header. This one gets a little complex so it might be best to just point you toward the codex:

http://codex.wordpress.org/Function_Reference/add_custom_image_header

Part 5: The Other Stuff

There is a lot more that you can add to your theme and tomorrow I am going to focus on the few things that people asked me about during my WordCamp presentation.

Part 1: Guidelines for Developing a WordPress Theme
Part 2: Basic Template Files
Part 3: Understand The WordPress Loop
Part 4: Adding Theme Options
Part 5: Making Money

The WordPress loop is where all the magic happens. Understanding how it works will definitely make things a lot easier, because if you can’t wrap your head around the loop, it might just throw you for one (my wife loves a good pun so I wanted to add that in for her). I actually didn’t discuss the loop in my WordCamp presentation because I thought it was a topic all in itself. So this one is kind of a bonus.

The WordPress Loop

You’ve probably gone through a tutorial and reached a point where it told you to “add it to the loop,” and you thought to yourself, “What the hell’s a loop?” In WordPress, the loop is the database call that checks for posts and displays them if they exist. Certain functions will only work within the loop because they require certain variables to be set and those variables only exist within the loop, where all the post information is stored.

If you open up the single.php file from a theme, you’ll see something like this:

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
	<div class="post" id="post-<?php the_ID(); ?>">
		<h1><?php the_title(); ?></h1>
		<div class="thedate"><?php the_time(get_option('date_format')); ?></div>
		<div class="entry">
			<?php the_content(); ?>
			<?php the_tags('<p class="tags"><small>Tags: '), ', ', '</small></p>'); ?>
			<p class="postmetadata alt">
				<small>
					<?php _e('This entry was posted on ').the_time(get_option('date_format'))._e(' at ').the_time()._e(' and is filed under ').the_category(', '); echo '. '; _e('You can follow any responses to this entry through the ').post_comments_feed_link('RSS 2.0')._e(' feed.'); ?>
				</small>
			</p>
		</div>
		<?php wp_link_pages(array('before' => '<p><strong>'.__('Pages').'</strong> ', 'after' => '</p>', 'next_or_number' => 'number')); ?>
	</div>
	<?php comments_template(); ?>
<?php endwhile; else: ?>
<p><?php _e("Sorry, no posts matched your criteria."); ?></p>
<?php endif; ?>

That is an example of a typical loop in a WordPress theme. It works by querying the database to fetch all the post’s stored information. That information becomes accessible by using WordPress functions within the loop to display certain elements wherever you want. On the single post page, only one post is queried. On category pages, multiple posts are queried and looped through.

Breaking down the loop to its basic elements would look something like this:

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
     Do something here.
<?php endwhile; else: ?>
     Sorry, no posts matched your criteria.
<?php endif; ?>

All it means is this: IF you have posts, continue. WHILE you still have posts, loop through them all, then stop. ELSE there are no posts, display a message saying there are no posts. The actual loop is within the WHILE statement, since that is actually where it will loop through all the post and fetch their data.

As you can see, the loop is pretty important, and that’s why you’ll find it in all of the following basic template files:

• archive.php (used for categories, tags and archives)
• index.php (what you want to appear on your front page)
• page.php (how your pages will be displayed)
• search.php (how your search page will be displayed)
• single.php (how your posts will be displayed)

The easiest way to develop these basic template files is to copy them over from a theme like TwentyTen, and customize them to work with your theme. This is not considered stealing, by the way, since the WordPress community is open source. That means the code is there for you to use and modify as you see fit. If you don’t modify it at all though, you better give credit where credit is due.

The Loop in WordPress 3.0

With the release of WordPress 3.0, a new file was introduced that allows you to store your loop(s) in one place. Using the new loop.php file is not a requirement, but it does make things a lot easier. If you take a look at the single.php above once again, you’ll see how it looks with the loop included in the file. Now see how we can simplify it by using the new loop.php file:

<?php get_template_part( 'loop', 'single' ); ?>

Now we can add our loop into loop.php and it would look something like this:

<?php if (!have_posts()) : ?>
	<p><?php _e("Sorry, no posts matched your criteria."); ?></p>
<?php endif; ?>
 
<?php while (have_posts()) : the_post(); ?>
	<div class="post" id="post-<?php the_ID(); ?>">
		<h1><?php the_title(); ?></h1>
		<div class="thedate"><?php the_time(get_option('date_format')); ?></div>
		<div class="entry">
			<?php the_content(); ?>
			<?php the_tags('<p class="tags"><small>Tags: '), ', ', '</small></p>'); ?>
			<p class="postmetadata alt">
				<small>
					<?php _e('This entry was posted on ').the_time(get_option('date_format'))._e(' at ').the_time()._e(' and is filed under ').the_category(', '); echo '. '; _e('You can follow any responses to this entry through the ').post_comments_feed_link('RSS 2.0')._e(' feed.'); ?>
				</small>
			</p>
		</div>
		<?php wp_link_pages(array('before' => '<p><strong>'.__('Pages').'</strong> ', 'after' => '</p>', 'next_or_number' => 'number')); ?>
	</div>
	<?php comments_template(); ?>
<?php endwhile; ?>

It might seem like you’ve just divided your code into two files, which you have, but now that loop can also be accessed by other template files. The advantage is plain to see: one loop can control your whole theme. Especially if you want to get fancy and use conditional tags to let your loop know what to display and when to display it. Adding a conditional tag to the content function would allow you to show the content only on single post pages, and the excerpt on all other pages:

<?php if(is_single()) the_content(); else the_excerpt(); ?>

Call the loop in your index.php file using:

<?php get_template_part( 'loop', 'index' ); ?>

On your index page you will get the excerpt instead of the content. You can go as far as you want with conditional tags in your main loop. This will make it easier to modify your code and control how your post elements will be displayed within your theme. Take a look at loop.php in TwentyTen to see how much you can do with just one loop.

Multiple Loops

There may come a time when you want to have multiple loops in one template file. This might be a necessity for your theme if you’re developing a grid style layout for your front page, or want to have a listing of recent posts somewhere. You should never have two regular loops running on the same page because it will cause problems. That’s why WordPress has the wp_query() function.

wp_query() allows you to have as many loops as you wish on a single page, since each of those loops will be self-contained with a custom query, using custom variables. The easiest way of explaining it is by showing it.

<?php
$featuredPosts = new WP_Query();
$featuredPosts->query('posts_per_page=5&cat=1');
while ($featuredPosts->have_posts()) : $featuredPosts->the_post();
     // add stuff here
endwhile;
?>

That’s a self-contained custom loop that will not conflict with your main loop. If by chance, things do get a little funky, you can always reset the page’s main loop query by using:

<?php wp_reset_query(); ?>

You can find more information on the custom loop query in the codex at http://codex.wordpress.org/Function_Reference/WP_Query.

What’s New with 3.0

WordPress 3.0 introduced some new features that make it easier for theme developers to add amazing functionality to their themes without much effort. Check back tomorrow for more on that subject.

Part 1: Guidelines for Developing a WordPress Theme
Part 2: Basic Template Files
Part 3: Understand The WordPress Loop
Part 4: Adding Theme Options
Part 5: Making Money

The Basic Theme

Here is a list of the basic template files you need to get your theme working with WordPress:

• archive.php (used for categories, tags and archives)
• comments.php (controls all your comments)
• footer.php (elements you want to include in your theme’s footer)
• functions.php (all your fancy functions)
• header.php (elements required in a site’s header)
• index.php (what you want to appear on your front page)
• page.php (how your pages will be displayed)
• search.php (how your search page will be displayed)
• sidebar.php (what appears in your sidebar, must be widgetized)
• single.php (how your posts will be displayed)

In addition to these files, you also need the following:

• style.css (all your CSS and theme info)
• screenshot.png (an image representing your theme)

There are many more types of template files that you can add to your theme but the ones above are what I consider to be the bare minimum. You can read up on template files and the hierarchy used by WordPress at http://codex.wordpress.org/Template_Hierarchy.

The Stylesheet

In order to design a theme for WordPress, you need to add some styling through a CSS file. That’s a given. But you also need to add a few more things to your style.css in order to get you theme working properly.

The following code must be added to the top of the style.css file:

/*
Theme Name: Twenty Ten
Theme URI: http://wordpress.org/
Description: The 2010 default theme for WordPress.
Author: the WordPress team
Author URI: http://wordpress.org/
Version: 1.0
Tags: black, blue, white, two-columns, fixed-width, custom-header, theme-options, threaded-comments, sticky-post, translation-ready, microformats, rtl-language-support, editor-style
 
	The CSS, XHTML and design is released under GPL:
	http://www.opensource.org/licenses/gpl-license.php
 
*/

This is the description and information that is relevant to your theme. The above was taken from TwentyTen. The last section refers to the GPL license. If you don’t wish to include your license here, you will have to include a license.txt file to explain which license you are using for your theme. If you want to be compatible with WordPress (since you are building a WordPress theme) you will need to follow the same GPL license. So either include a small line in your style.css file or copy over the license.txt from TwentyTen and include it in your theme folder.

If you wish to include your theme in the WordPress.org theme directory, there are only certain tags that are allowed. A list is available at http://wordpress.org/extend/themes/about/. Including extra tags will make your theme fail the upload process on WordPress.org.

The Screenshot

People need to know what your theme looks like. That’s why a screenshot is required. Your screenshot must be a .PNG file and should be 300px by 225px. If you click on your Themes link under the Appearance panel in your wp-admin, you will see all the screenshots of the themes you have installed.

screenshot.png used in Magazine Basic

The Header

The header.php file contains everything that you want to appear at the top of your site. A lot of this at your discretion, but some is a must. If you plan on developing a theme for HTML5, this is how your header.php file should start:

<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<title><?php wp_title(); ?> <?php bloginfo('name'); ?></title>
<link rel="profile" href="http://gmpg.org/xfn/11" />
<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" />
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
<?php if ( is_singular() && get_option( 'thread_comments' ) ) wp_enqueue_script( 'comment-reply' ); ?>
<?php wp_head(); ?>
</head>

I develop my themes using the xHTML standards, since HTML5 is not fully integrated into most browsers just yet.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>>
 
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset= <?php bloginfo('charset'); ?>" />
 
<title> <?php wp_title(); ?> <?php bloginfo('name'); ?></title>
 
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
<?php if ( is_singular() && get_option( 'thread_comments' ) ) wp_enqueue_script( 'comment-reply' ); ?>
<?php wp_head(); ?>
</head>
<body>

The most important function in your header.php file is wp_head(). The little function will make many plugins and action hooks work with your theme. Without it, your theme would be somewhat useless.

The Footer

Your site’s footer is usually where you include a copyright notice. You might also want to repeat your menu or include some links. You could even widgetize your footer (I’ll talk about this later). That is entirely up to you. But you must have some things in place just like in your header. Your footer.php file must include the following:

<?php wp_footer(); ?>
</body>
</html>

The wp_footer() function is just like wp_head(). It makes your theme compatible with plugins and action hooks that rely on that specific function.

The Sidebar

You can set up as many sidebars as you like; TwentyTen has 8. To get started, let’s just focus on getting one sidebar working properly. One of WordPress’s greatest features is widgets. There are many useful default widgets that come bundled with WordPress, and there are an infinite number of plugins out there that give you even more widgets to play with.

The wp-admin Widgets Screen

Without a widgetized sidebar, though, widgets have nowhere to go. Luckily, creating a widgetized area in WordPress is extremely simple. This is what your basic sidebar.php file should look like:

<div id="sidebar">
	<?php dynamic_sidebar('Sidebar One') ?>
</div>

In order for it to work, you need to add a bit of code to your functions.php file.

<?php
register_sidebar( array(
	'name' => 'Sidebar One',
	'id' => 'front_lower_sidebar',
	'description' => 'This is your first widgetized sidebar',
	'before_widget' => '<div id="%1$s" class="side-widget %2$s">',
	'after_widget' => '</div>',
	'before_title' => '<h3>',
	'after_title' => '</h3>',
) );
?>

I think most of the parameters are self-explanatory. You don’t have to use them all unless you are like me and need as much control as possible. The only ones that are a must are name and id.

You can actually add widgetized areas anywhere throughout your theme. You just need to use register_sidebar() to create a widgetized area and then dynamic_sidebar() to display it. You can even set up default widgets or text that will only appear if no widgets have been added. That would look like this:

<div id="sidebar">
	<?php if ( !dynamic_sidebar("Sidebar One") ) : ?>
		Place default stuff here
	<?php endif; ?>
</div>

Part 3: What’s a loop?

Since the WordPress loop is something that requires a lot of attention, I think it would be best to have a whole post dedicated to it. Look out for that coming up.

Part 1: Guidelines for Developing a WordPress Theme
Part 2: Basic Template Files
Part 3: Understand The WordPress Loop
Part 4: Adding Theme Options
Part 5: Making Money

WordPress 3.0 Changes Everything

With the release of WP 3.0, the “official” theme reviewer(s) on WordPress.org thought it would be a good idea to improve the current requirements and come up with a strict guideline to let theme developers know exactly what is expected of their themes. This would make the job of reviewing themes for WordPress.org much easier, but it would also set a standard for all the themes within the WP Themes Directory, and hopefully, all WP themes in general.

As a developer, the more documentation you can get about the software you are developing for, the easier your job is. And now WordPress has three pages in the codex dedicated to theme development that all developers need to read and understand.

The Theme Unit Test

The theme unit test is an xml file that a developer should use in their testing environment. If you do not have a test install of WordPress to test your themes, that is the first step you should take. Once you have you test install up and running, download the theme unit test xml file and upload it into your WP install by going to the Tools panel in your wp-admin and clicking on the Import link. Import the xml file and all of the images associated with it. Now you have a test blog full of content that will help you make sure that your theme works with the many different features of WordPress.

The codex page lists all the different types of content that is uploaded by the xml file, and how is should be displayed by your theme. If things don’t look right on your theme, then you need to make sure to follow the guidelines and include the proper functions and/or CSS to get it looking the way it should.

Codex page: http://codex.wordpress.org/Theme_Unit_Test

Theme Development Guidelines

The title of this codex page pretty much says it all. These are the guidelines for developing a WordPress theme. There are many things that need to be in place in order for your theme to work with WP. If your theme does not conform to these requirements, it will not work with WordPress. That’s why this part of the codex is the most important piece of documentation for any theme developer.

Reading through the guidelines will put you on the right track in regards to how your theme should be structured, what functions are a must, and what files need to be included in order for it to work properly. The page is quite long, but once you get trough it and start to piece together your theme, you’ll realize that it isn’t as hard as it seems. And remember, all well-built WordPress themes follow these guidelines, so just take a look behind the scenes of one of your favorite themes to see how the code has been implemented if you feel you’re stuck.

Codex page: http://codex.wordpress.org/Theme_Development

Theme Review Process

This page describes exactly how your theme will be scrutinized if you submit it to the WordPress.org Theme Directory. Knowing exactly what the theme reviewers look at and using that information to personally judge your own theme will help guarantee that you have developed a theme that is up to snuff. It also lets you know some of the dos and don’ts that you should be aware of that were not discussed on the other two codex pages.

Codex page: http://codex.wordpress.org/Theme_Review

Part 2: What goes where?

Next I will discuss what basic templates files are necessary for your theme and what code is required in order to get everything working properly.

Part 1: Guidelines for Developing a WordPress Theme
Part 2: Basic Template Files
Part 3: Understand The WordPress Loop
Part 4: Adding Theme Options
Part 5: Making Money

Many things factor in to how your site performs, including the speed of your server, the amount of traffic on your site, how your site is coded, if your site is static or dynamic, and the list goes on. If your site has not been optimized then you are really doing yourself a disservice, especially now that your page rank might rely on it.

If you have a WordPress site, there are some great plugins to help you out. I like to use WP Super Cache to get things started. It is pretty easy to set up and works exceptionally well. Plus, the customer support is top notch, so if you have any issues you can just contact the author.

If you don’t use WordPress, you can still follow some of the steps below to get your site performing at its best.

First, let’s take a look at some free tools that are available online that can analyze your site and let you know exactly where the problems lie:

Pingdom Tools

Pingdom Tools will give you a breakdown of all the files that your site needs to load to render a page, and whether or not any of them is problematic. It can also save your tests so you can compare your site’s statistics against one another on different occasions.
http://tools.pingdom.com/

Web Page Test

Web Page Test provides a similar service to Pingdom Tools, but the results are a lot more elaborate. The test takes a bit longer but it’s well worth the wait. Your site will be graded on 6 different aspects of its performance: KeepAlive Enabled, Compress Text, Compress Images, Cache Static Content, Combine CSS/JS Files and Use of CDN. Once you are graded, you will also see why your site might have failed each test.
http://www.webpagetest.org/

Firebug & YSlow

If you have a Web site and you’re not aware of Firebug, you need to become aware of it immediately. It’s an amazing developer tool for Firefox that can make your life a hell of a lot easier. It offers tools such as an element inspector, CSS editor, and process console. To get your site optimized, install YSlow from Yahoo and you will have all the tools you need to test your site and find its weaknesses.
http://getfirebug.com/
http://developer.yahoo.com/yslow/

Once you’ve tested your site and you know what the problems are, you can start to make a few changes to help increase your site’s performance, which will in turn give your visitors a better experience and show search engines that you mean business.

You probably already know these tips, but just in case you don’t, pay attention because they are the basis of how you can optimize your site:

Optimize Images for the Web

If you plan on uploading an image to your site, make sure you’re not uploading the original 5 x 7 that has a resolution of 300dpi. Why? Because it’s such a large file that it will definitely slow down your site, if not crash it. That’s why all images must be optimized for the Web. If you have Photoshop, or any image editing software, you’ll have the option to export your image for the Web.

What does that mean? Well, first of all, you should probably aim for 72dpi, which is pretty much the Web standard. That will help bring your file size down. You should also save your photos as JPGs with a quality of around 50-60%, and your graphics as GIFs with a color range dependent on the graphic itself. If your image has a transparent background which doesn’t look too good as a transparent GIF, then you might want to make it a transparent PNG. That does increase the size of the file, so keep that in mind.

If you want to really get fancy, you can put together a CSS sprite so that all of your graphics and images are merged together into one file. This brings down the number of elements that your site has to load, but it does require a bit more effort in regards to the CSS used. Here is a CSS sprite I use on bavotasan.com:

If you don’t have any desktop software to optimize your images, you can always take advantage of Yahoo’s Smush.it, which allows you to upload an image file and have it optimized and returned to you. If you have YSlow installed, then you also have Smush.it included on the tools tab.

Put CSS at the Top & JavaScript at the Bottom

Placing your CSS at the top of your site makes sense, because you want to have your elements styled before they start to render. Placing JavaScript at the bottom also makes a lot of sense because you need your elements to render before they can be manipulated by your JavaScript. This has become a standard and should always be the way these files are included in your site.

Reduce the Number of HTTP Requests

An HTTP request occurs every time your site fetches a file that is required to render the page. So every image, every JS file and pretty much every element on your Web page requires an HTTP request. That’s why CSS sprites are a great idea. They reduce the number of times your site needs to fetch an image. Another great idea is combining your CSS files and your JavaScript files into one. So grab all of your site’s CSS (you can view it using Firebug), create one file and include it in your header. Same goes for your JavaScript files, but make sure you place the JS elements in the proper order or else they won’t work, eg. jQuery needs to load before you use any actual jQuery. And be sure to stick your JS file in your footer.

If you don’t plan on making any changes to your CSS or JS, you can even minify the files to make them as small as possible. There are many online resources to do this, but you also have everything you need if you already installed Firebug and YSlow. If you take a look at http://jquery.com/, you can see the difference between the minified version (24kb) and the development version (155kb). That’s a big difference.

The Hard Stuff

This is where things start to get a little more complicated. The following tips require a bit of knowledge of coding, or at least a willingness to attempt to do some things that you might not really understand.

Configure your ETags

According to Wikipedia, an ETag, or entity tag, “is one of several mechanisms that HTTP provides for cache validation, and which allows a client to make conditional requests.” If you don’t plan on using them, which most likely you won’t, then you need to remove them completely by adding the following to your .htaccess file.

FileETag none

If you don’t have an .htaccess file in your site’s root directory, then create one and upload it because you’re going to have to make a few modifications to it to get your site optimized.

Add Expires Headers

Expires headers will let everyone know that certain elements can be cached by the browser so they won’t need to be reloaded every time a visitor hits your site. Static elements should have a far future expiration date and dynamic elements need to be configured according to how you plan on using them. The following will add an expiration date of one month to all your image, CSS and JS files.

# Expire images header
ExpiresActive On
ExpiresDefault A0
ExpiresByType image/gif A2592000
ExpiresByType image/png A2592000
ExpiresByType image/jpg A2592000
ExpiresByType image/jpeg A2592000
ExpiresByType image/ico A2592000
ExpiresByType text/css A2592000
ExpiresByType text/javascript A2592000

A2592000 (60*60*24*30) is a timestamp that equals one month. Remember, if you plan on modifying any files that have been cached with a future expiration date, you need to rename them or else visitors will not see the changes until they clear their browser cache or the old files expire.

Compress Components

Compressing things always ends up making them smaller and load faster, so implementing some form of compression on your components is a must. This optimization step might not work for you if your server does not have either mod_deflate or mod_gzip installed as part of Apache. You should contact your service provider and inquire about this to find out which of the following codes you should use.

mod_deflate:

<FilesMatch "\\.(js|css|html|htm|php|xml)$">
SetOutputFilter DEFLATE
</FilesMatch>

mod_gzip

<IfModule mod_gzip.c>
mod_gzip_on Yes
mod_gzip_dechunk Yes
mod_gzip_item_include file \.(html?|txt|css|js|php|pl)$
mod_gzip_item_include handler ^cgi-script$
mod_gzip_item_include mime ^text/.*
mod_gzip_item_include mime ^application/x-javascript.*
mod_gzip_item_exclude mime ^image/.*
mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
</IfModule>

Content Delivery Network

It’s a little hard to believe, but the closer your visitor is to your server’s location, the faster they will receive your site elements. That’s where a CDN can come in handy. They provide multiple server locations for your site elements that will be accessed accordingly depending on where you visitors are located. This has been known to improve your site’s response time by up to 20%. The only problem, is it might cost you an arm and a leg to get it up and running. There are many CDNs popping up that are not as expensive as others, but to tell you the truth, this might not be a viable option unless your site is really bringing in the money, which in turn would make it worth having a CDN on your side.

Conclusion

When it comes down to it, running a successful Web site requires a lot of attention to certain things that you might never have considered. Being aware of optimization tools and techniques will definitely help you improve your site’s performance. Most importantly, it will get your site ready to be indexed by Google, Yahoo and many other search engines that rely on speed as a ranking factor.

Before we even start, you would need to registered with http://bit.ly and then check out this page http://bit.ly/a/your_api_key to get your API key and your login.

Now, let’s add a function to automatically create a http://bit.ly short URL when you publish a post. We will hook into the publish_post action and then use the http://bit.ly API to fetch a shortened URL. Place the following into your theme’s function.php file.

add_action('publish_post', 'create_bitly');
 
function create_bitly($postID) {
	global $wpdb;
	$login = 'YOUR LOGIN'; // change this to your login
	$apikey = 'YOUR API KEY'; // change this to your API key
 
	$longURL = get_permalink($postID); // here we get the permalink to your post
 
	// This is the API call to fetch the shortened URL
	$apiurl = 'http://api.bit.ly/v3/shorten?longUrl='.urlencode($longURL).'&login='.$login.'&apiKey='.$apikey;
 
	// We are using cURL
	$curl = curl_init();
	curl_setopt($curl, CURLOPT_CONNECTTIMEOUT, 5);
	curl_setopt($curl, CURLOPT_RETURNTRANSFER, 1);
	curl_setopt($curl, CURLOPT_URL, $apiurl);
	$results = json_decode(curl_exec($curl));
	curl_close($curl);
 
	$shortURL =  $results->data->url; // the short URL
 
	update_post_meta($postID, 'bitlyURL', $shortURL); // adding the short URL to a custom field called bitlyURL
}

You can read more about the http://bit.ly API here: http://code.google.com/p/bitly-api/wiki/ApiDocumentation

In order to add your new short URL to your header, you first need to remove the default shortlink tag and then create a function that will place the proper code between your <head> tags.

remove_action( 'wp_head', 'wp_shortlink_wp_head', 10, 0 ); // removing the default shortlink
add_action( 'wp_head', 'bilty_shortlink_head'); // adding the new bit.ly shortlink
 
function bilty_shortlink_head() {
	global $post;
	$shortURL = get_post_meta($post->ID, 'bitlyURL', true);
	if(!empty($shortURL)) {
		echo '<link rel="shortlink" href="'.$shortURL.'" />'."\n";
	} else {
		echo '<link rel="shortlink" href="'.get_bloginfo('url').'?p='.$post->ID.'" />'."\n";
	}
}

If you want to display your new short URLs, you can do so by using the `wp_get_shortlink()` function. But first you need to make sure that WordPress knows to replace the default short URL with the new http://bit.ly short URL.

add_filter('pre_get_shortlink', 'get_bitly_shortlink'); // filtering the WP function
 
function get_bitly_shortlink() {
	global $post;
	$shortURL = get_post_meta($post->ID, 'bitlyURL', true);
	if(!empty($shortURL)) {
		 return $shortURL;
	} else {
		return get_bloginfo('url').'?p='.$post->ID;
	}
}

You can place the following code anywhere within the loop of your single.php theme file to display your short URL.

Short URL: <a href="<?php echo wp_get_shortlink($post->ID); ?>" title="<?php the_title(); ?>"><?php echo wp_get_shortlink($post->ID); ?></a>

One of the most important things I have come to realize is that you must keep an eye on your MySQL tables, because a problematic database can slow down your server dramatically. Databases that see a lot of queries often become fragmented and these are the databases that can start to cause you some problems. Luckily, there is a shell command that can go in and do all your de-fragmenting and optimizing for you.

I always make sure to back things up before I run this, just in case.

This command must be run from the shell and you need to be logged in as a root user:

mysqlcheck -u root -p --auto-repair --check --optimize --all-databases

Once the command has been entered, you will need to input your password. Then you will see it list through your database tables one by one as it works it magic.

You can read up on the mysqlcheck command to understand exactly what it does.

Another worthwhile tool is MySQLTuner. It can help you with recommendations on how to configure your MySQL to increase performance and stability. I use it every month too see if anything has been acting up and that is a good routine to get into to keep your sites running their best.

It really amazes me that CSS3 has the power to create something like this. I tested it out in Firefox, Safari and Chrome. They all look good. Of course, in IE it looks like this…

It’s like IE is living in 1986.

Here is the HTML:

<div class="smileyface">
    <p class="eyes lefteye"></p>
    <p class="eyes righteye"></p>
    <div class="smile">
        <div class="corner"></div>
        <div class="corner right"></div>
    </div>
</div>

Here is the CSS:

div.smileyface {
	width: 300px;
	height: 300px;
	position: relative;
	border-radius: 150px;
	-webkit-border-radius: 150px;
	-moz-border-radius: 150px;
	display: block;
	background: #ffe632;
	background: -webkit-gradient(linear, left top, left bottom, from(#fffe8d), to(#f6d23e));
	background: -moz-linear-gradient(top,  #fffe8d,  #f6d23e);	
	box-shadow: inset 0px -14px 14px rgba(0, 0, 0, .3), 0px 2px 20px rgba(0, 0, 0, .6);
	-webkit-box-shadow: inset 0px -14px 14px rgba(0, 0, 0, .3), 0px 2px 20px rgba(0, 0, 0, .6);
	-moz-box-shadow: inset 0px -14px 14px rgba(0, 0, 0, .3), 0px 2px 20px rgba(0, 0, 0, .6);
	}
 
p.eyes {
	width: 50px;
	height: 80px;
	background: #222;
	border-radius: 100px/160px;
	-webkit-border-radius: 100px 160px;
	-moz-border-radius: 100px/160px;
	position: absolute;
	top: 40px;
	box-shadow: 0 2px 0 rgba(255,255,255, 0.8);
	-webkit-box-shadow: 0 2px 0 rgba(255,255,255, 0.8);
	-moz-box-shadow: 0 2px 0 rgba(255,255,255, 0.8);
	}	
 
	p.eyes.lefteye {
		left: 75px;
		}
 
	p.eyes.righteye {
		right: 75px;
		}
 
div.smile {
	width: 200px;
	height: 70px;
	border: 10px solid #222;
	border-top: 0;
	background: rgba(0,0,0,0);
	-moz-border-radius: 0 0 120px 120px / 0 0 90px 90px;
	-webkit-border-radius: 0 0 120px 120px 0 0 90px 90px;
	border-radius: 0 0 120px 120px / 0 0 90px 90px;
	position: absolute;
	bottom: 50px;
	left: 38px;
	box-shadow: 0 2px 0 rgba(255,255,255, 0.8);
	-webkit-box-shadow: 0 2px 0 rgba(255,255,255, 0.8);
	-moz-box-shadow: 0 2px 0 rgba(255,255,255, 0.8);
	}
 
div.corner {
	width: 10px;
	height: 30px;
	background: #222;
	border-radius: 100px/160px;
	-webkit-border-radius: 100px 160px;
	-moz-border-radius: 100px/160px;
	position: absolute;
	top: -12px;
	-webkit-transform: rotate(65deg);
	-moz-transform: rotate(65deg);
	left: -12px;
	}
 
	div.corner.right {
		left: 202px;
		-webkit-transform: rotate(-65deg);
		-moz-transform: rotate(-65deg);		
		}

Inspiration:

• http://desandro.com/articles/opera-logo-css/
• http://cordobo.com/wp-content/uploads/ie-pure-css-logo/

If you don’t already have jQuery loaded into your page, include this before your closing <head>.

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

That will load up jQuery from Google.

Now you just need to include this in your site’s footer, before the closing <body>. (Why in the footer? Because including your JavaScript after all of your code is the efficient way to do it.)

<script type="text/javascript">
(function($) {
  var thePage = $("body");
  thePage.html(thePage.html().replace(/jQuery/ig, '<a href="http://jquery.com">jQuery</a>')); 
})(jQuery)
</script>

Since jQuery doesn’t have a core function for replacing text, we will use the JavaScript replace() function. The i after the slash makes the search and replace case-insensitive, and the g makes it global.

I have the script working on this page to replace every instance of the word jQuery with a link to the jQuery Web site.