For those who do decide to yield and for those who do not integrate SEO functionality into their theme, this is the guide to follow on how to make sure your theme works with all the major SEO plugins and more in particular, my WordPress SEO plugin.

1. Basics
2. Head elements
   1. Titles
   2. Meta's
   3. Link items
3. Body elements
   1. Breadcrumbs
   2. Other body elements
4. Is your WordPress SEO plugin active?

Basics

Whether or not your theme is in the WordPress.org repository, you should strive to meet their Theme Review guidelines. With the theme check plugin you can simply check whether that's the case for most of the technical aspects. This makes sure you have all the necessary hooks for plugins to do their work. If any of those fail, fix them before even looking at the stuff below.

Head elements

Titles

The most common issue with SEO plugins and WordPress themes is with titles: theme authors have a tendency to hardcode (sections of) titles into their themes, which results in hard to fix behavior, which I recently discussed here and hasn't been fixed in WordPress core yet. In short, your title should be not even a tiny bit longer than this:

<title><?php wp_title(''); ?></title>

If you decide to embed SEO functionality in your theme, you should then put a filter function on to that wp_title functionality just like a plugin would. This allows you to "unhook" that filter when an SEO plugin is active.

Meta's

Meta tags come in a vast amount of shapes and sizes, but there are only a few that "matter". There are the meta description, the meta keywords (on which I have a strong opinion too) and the meta robots tag. In my opinion, your theme should never embed any of these meta tags, but, if you decide to embed SEO functionality into your theme, write functions for these things and hook them on to the wp_head action.

Be very, very sure to allow for site owners to fully disable any meta functionality you write. I regularly, read: daily, advise people to change themes when their theme has a lot of SEO stuff embedded that is just plain wrong or collides with other plugins. Make no mistake: a portion of your users, probably a large portion of your users, cares about their SEO. Getting it wrong is worse then not doing anything, so if I were a theme author I'd most definitely opt for the latter.

Link items

There are a lot of <link> items that matter for SEO these days. There are rel=canonical, rel=next and rel=prev and a few more. WordPress does rel=canonical on single posts and pages but nowhere else yet, though a patch for core is ready to make WordPress add rel=canonical in more cases, but your theme should not do any of these. You're, to be honest, bound to get them wrong.

If you do decide to add them, do it in the same fashion as meta elements: hook them on to wp_head and make sure site owners can disable the functionality.

Body elements

Breadcrumbs

While the above points make integration for any SEO plugin easier, this point is more specific for my own WordPress SEO plugin. Integration of my breadcrumbs is quite easy, use something like the following code:

if ( function_exists('yoast_breadcrumb') ) {
   yoast_breadcrumb('<div id="breadcrumbs">','</div>');
}

This code will not display anything unless the breadcrumbs feature of my SEO plugin is enabled.

Breadcrumbs Variables

This breadcrumb path takes the following 3 variables:

$prefix
The code that your breadcrumb should be prefixed with. Default to an empty string.

$suffix
The code that should be added on the back of your breadcrumb. Default to an empty string.

$display
If set to false, will return the breadcrumb path instead of echo-ing it. Defaults to true.

Other body elements

You should take note of my guides on HTML heading structure and HTML Sitemaps. While my SEO plugin doesn't "interfere" with those, it's good practice to make them optimal. You should also read my WordPress SEO Theme Guidelines to make sure you're doing all the other necessary things.

Is your WordPress SEO plugin active?

You should check whether a constant named WPSEO_VERSION is defined, preferably like this:

if ( defined('WPSEO_VERSION') ) {
// Disable your SEO stuff
}

WordPress SEO Plugin Theme Integration Guide is a post by Joost de Valk on Yoast - Tweaking Websites.A good WordPress blog needs good hosting, you don't want your blog to be slow, or, even worse, down, do you? Check out my thoughts on WordPress hosting!

Update August 23rd, 2011: Google has made a simpler version available to those of you who are not able to follow the instructions below. It is still recommended that you do in fact follow the instructions below if you have the appropriate access to the blog you're trying to do this on, if not, please follow the instructions I added at the bottom of this post. I also updated screenshots and added two video's with explanations. Let me know if you have more questions in the comments, I've updated the date of this post so it will pop up again in your reader.

I did see some more examples pop up, for example, when I searched for [highlighting authors], both this post from Matt Cutts (on highlighting authors in the comments) and this post from Gina Trapani got an author highlight.

1. Is the link to the Google Profile from the author page required?
2. How to add rel="author" to a link in your menu
3. How to allow authors to add rel="me" to links in their bio's
4. How to allow authors to set their Google Profile URL
5. How to change the author URL
6. Update: the simpler version
7. Last (but important!) step
8. rel="author" + rel="me" actually works!

Is the link to the Google Profile from the author page required?

Apparently, yes, it is. It's quite logical for Google to want a link from your Google profile to your author page, it makes 100% sure that you are indeed the author of that piece of content when you link to your Google Profile and back from your Google Profile to your author page. Of course the link to your Google Profile wouldn't be 100% needed for this, I don't know whether Google will keep this requirement.

The flow should thus be as follows: article links to author page on the same domain. The author page on the same domain links to the Google Profile. The Google profile, in turn, links back to the author page.

So you are not, as some people suggested, meant to link to your Google Profile straight from the article, instead, you should link to your author page on the domain you published the article at and that page in turn should link to your Google Profile and be linked from your Google Profile.

How to add rel="author" to a link in your menu

One of the issues that came up with is that some people don't want to show the author on each and every post when the author on that blog is always one single person. Those people will usually have an "about" page linked in their site's main navigation, for instance, Robert Scoble, on his blog Scobleizer:

That "about" link could very easily be used to identify him as the author of each and every post, to Google, if it had rel="author" sticked to it. Turns out that this is actually very easy to do if you use the WordPress menu editor.

Go to the Menus page and in the top right, click on screen options:

Once you click that link, it'll fold out, and the display options will show, including "Link Relationship (XFN)", be sure to check that box:

Once that box is checked, you can edit your menu item to include the link relationshop "author" which will cause it to get rel="author" added to it:

Be sure to just add "author" (without the quotes) this is enough to make sure the link will have rel="author" added to it.

How to allow authors to add rel="me" to links in their bio's

If you update your bio on a WordPress blog you write on to contain a link to your Google Profile and want to add rel="me", you'll come to the conclusion that WordPress strips out all the rel elements from links. Why it does that is beyond me, I've already opened a Trac ticket and created a patch to allow it. Until that is in core though (if it makes it in), you'll need to allow it yourself. To do that, simply add this to your site's functions.php file or functionality plugin:

function yoast_allow_rel() {
	global $allowedtags;
	$allowedtags['a']['rel'] = array ();
}
add_action( 'wp_loaded', 'yoast_allow_rel' );

This will allow all rel values to be used, nofollow as well. You could tighten this more but I doubt you'll need it.

How to allow authors to set their Google Profile URL

If you don't want authors to add the link to their bio but would rather give them an input field to enter their Google Profile URL, you'll need to hook into the contact methods functions of WordPress. First, tell WordPress you want to add the Google Profile contact method:

function yoast_add_google_profile( $contactmethods ) {
	// Add Google Profiles
	$contactmethods['google_profile'] = 'Google Profile URL';
	return $contactmethods;
}
add_filter( 'user_contactmethods', 'yoast_add_google_profile', 10, 1);

This will add an input field on their edit profile page below the default AIM, Yahoo and Google Talk / Jabber contact methods:

Second, in your theme's author.php file, the author template, you need to add a bit of code to output this new URL:

$google_profile = get_the_author_meta( 'google_profile' );
if ( $google_profile ) {
	echo '<a href="' . esc_url($google_profile) . '" rel="me">Google Profile</a>';
}

Of course you can style this in any way you want, show it in a list, etc. Here on yoast.com, for instance, I replaced the default contactmethods with Facebook, Twitter and the Google Profile.

How to change the author URL

If for one or more authors on your blog you want to change their default author URL, you could do something like this:

function yoast_change_author_link( $link, $author_id, $author ) {
  if ( 'admin' == $author )
    return 'http://example.com/about-me/';
  return $link;
}
add_filter( 'author_link', 'yoast_change_author_link', 10, 3 );

This would change the author URL for the author with username "admin" to http://example.com/about-me/, you should of course change this to what you need in your specific case. This should work with most themes, if it doesn't with your theme, let me know what theme you're using and I'll try to come up with a solution.

How can I test whether my rel="author" implementation works

Once you've added one of this bits above, you probably want to test whether it's working. To do that, use Google's Rich Snippets testing tool. You can find an example report showing that my implementation is correct here. See the screenshot:

Now don't forget to take the last step, keep on reading below the simple version!!

An explanation video from Google

After this post Google's Matt Cutts and Othar Hansson did a video on the topic, feel free to watch it here:

Update: the simpler version

Because not everyone either has the technical knowledge and/or the actual access to their sites to be able to accomplish the above, Google has made a simpler alternative. I don't know whether this alternative will work forever, it does work now though. It's quite simple, just follow these steps:

1. Find your Google Profile URL, copy paste it.
2. Create a link with that profile URL, and add this ?rel=author to the end of the URL.
3. As an anchor text, use your full name with a +, in my case the anchor text would be: +Joost de Valk
4. Go to the last step, below the video embedded below.

The full HTML of my profile link would look like this (line break just to make it easier to read, you shouldn't have that):

<a href="https://plus.google.com/115369062315673853712
/about?rel=author">+Joost de Valk</a>

Of course, there's a video explaining this version too:

Last (but important!) step

Whichever version of the code you used, be sure to submit your details through this form. You probably won't get an email back but at some point it (might) suddenly start working!

rel="author" + rel="me" actually works!

To show that the markup above works (I use the complete version, not the simple version):

rel=”author” and rel=”me” in WP and other platforms is a post by Joost de Valk on Yoast - Tweaking Websites.A good WordPress blog needs good hosting, you don't want your blog to be slow, or, even worse, down, do you? Check out my thoughts on WordPress hosting!

For instance, if I search for Danny Sullivan's blog "daggle", the results now look like this:

This potentially has some nice side effects and I'm very curious how this will pan out. If they're going to show this in normal search results next to blog posts, which they say in their post that they will, more credible authors will get more clicks, independent of whether they rank better. This in turn allows Google to create a sort of "author trust rank". You see, when they show a picture of you next to your blog and you get more clicks than they'd expect because of that, you obviously have a higher credibility.

If it all works out like that, this might just be the last step some of those web journalists out there need to finally be able to demand the rockstar salaries they deserve!

I want those author highlights too!

To do this, you need to apply the authorship markup Google announced a couple weeks back. This basically means adding rel="author" to a link to the authors page on the same domain. My author link for this post, for instance, looks like this:

<a rel="author" href="http://yoast.com/author/admin/"
  title="Posts by Joost de Valk">Joost de Valk</a>

This code is generated by the WordPress core function the_author_posts_link(). When Google announced the authorship markup, I immediately created a trac ticket and patch for WordPress core to add rel="author" to both that function, and to all the places in both TwentyTen and TwentyEleven where it should appear and where those themes didn't use that core function.

This patch has already been committed and will make its debut in WordPress 3.2. If you're not running WordPress 3.2 beta yet but really do want this functionality, you can use the following snippet, just copy paste it into your (child-)theme's functions.php file:

function yoast_rel_author_filter( $link ) {
	if ( false === strpos( $link, 'rel="author"' ) )
		$link = str_replace ( '<a ', '<a rel="author" ', $link );
	return $link;
}
add_filter('the_author_posts_link','yoast_rel_author_filter',10,1);

This won't break your theme when you upgrade to 3.2, although by that time it's safe to remove it.

Note for theme Theme authors

This upgrade makes it even more important then before to have a link to the author's posts page / profile page underneath each post. Hence, with that, the importance of an authors page rises as well. You should allow authors to write a short bio, show off a picture (their gravatar?), and link to some other places like their Twitter, Facebook and Google Profile.

Luckily, this was made easy back with the release of WordPress 2.9, when user contact fields became filterable.

But that's not all!

As the help center article states, your posts and articles need to link to your profile page on that same site. Your Google Profile, in turn, needs to link back to that author page. So go and add the link of your author page to your Google+ Profile.

Highlighting WordPress authors in search is a post by Joost de Valk on Yoast - Tweaking Websites.A good WordPress blog needs good hosting, you don't want your blog to be slow, or, even worse, down, do you? Check out my thoughts on WordPress hosting!

Click for large version

Add columns to the overview page for a Custom Post Type

So you'll want to add some columns to your post type's overview page, or remove some. Don't forget to replace <CPT> with your own custom post type in all these examples:

// Change the columns for the edit CPT screen
function change_columns( $cols ) {
  $cols = array(
    'cb'       => '<input type="checkbox" />',
    'url'      => __( 'URL',      'trans' ),
    'referrer' => __( 'Referrer', 'trans' ),
    'host'     => __( 'Host', 'trans' ),
  );
  return $cols;
}
add_filter( "manage_<CPT>_posts_columns", "change_columns" );

Be sure to always leave the cb column in there or your mass edit / delete functionality will not work.

Give these new columns some content

Now let's fill these new columns with some content from the custom post type:

function custom_columns( $column, $post_id ) {
  switch ( $column ) {
    case "url":
      $url = get_post_meta( $post_id, 'url', true);
      echo '<a href="' . $url . '">' . $url. '</a>';
      break;
    case "referrer":
      $refer = get_post_meta( $post_id, 'referrer', true);
      echo '<a href="' . $refer . '">' . $refer. '</a>';
      break;
    case "host":
      echo get_post_meta( $post_id, 'host', true);
      break;
  }
}

add_action( "manage_posts_custom_column", "custom_columns", 10, 2 );

Make these new columns sortable

Now this extra info is cool, I bet you want to sort by it, that's as simple as this:

// Make these columns sortable
function sortable_columns() {
  return array(
    'url'      => 'url',
    'referrer' => 'referrer',
    'host'     => 'host'
  );
}

add_filter( "manage_edit-<CPT>_sortable_columns", "sortable_columns" );

Filter Custom Posts by Custom Taxonomy

Ok so far this is all fairly simple. Now let's go a bit more advanced. Let's say you have a custom taxonomy attached to that custom post type and you want to show a filter for that custom taxonomy on the custom post types overview page, just like you have a categories drop down on the posts overview page. This code was taken (though slightly modified) from this thread.

Let's first add that dropdown / select box to the interface:

// Filter the request to just give posts for the given taxonomy, if applicable.
function taxonomy_filter_restrict_manage_posts() {
    global $typenow;

    // If you only want this to work for your specific post type,
    // check for that $type here and then return.
    // This function, if unmodified, will add the dropdown for each
    // post type / taxonomy combination.

    $post_types = get_post_types( array( '_builtin' => false ) );

    if ( in_array( $typenow, $post_types ) ) {
    	$filters = get_object_taxonomies( $typenow );

        foreach ( $filters as $tax_slug ) {
            $tax_obj = get_taxonomy( $tax_slug );
            wp_dropdown_categories( array(
                'show_option_all' => __('Show All '.$tax_obj->label ),
                'taxonomy' 	  => $tax_slug,
                'name' 		  => $tax_obj->name,
                'orderby' 	  => 'name',
                'selected' 	  => $_GET[$tax_slug],
                'hierarchical' 	  => $tax_obj->hierarchical,
                'show_count' 	  => false,
                'hide_empty' 	  => true
            ) );
        }
    }
}

add_action( 'restrict_manage_posts', 'taxonomy_filter_restrict_manage_posts' );

And then, we add a filter to the query so the dropdown will actually work:

function taxonomy_filter_post_type_request( $query ) {
  global $pagenow, $typenow;

  if ( 'edit.php' == $pagenow ) {
    $filters = get_object_taxonomies( $typenow );
    foreach ( $filters as $tax_slug ) {
      $var = &$query->query_vars[$tax_slug];
      if ( isset( $var ) ) {
        $term = get_term_by( 'id', $var, $tax_slug );
        $var = $term->slug;
      }
    }
  }
}

add_filter( 'parse_query', 'taxonomy_filter_post_type_request' );

Note that for these last two snippets to work, query_var must have been set to true when registering the custom taxonomy, otherwise this'll never work.

Bonus: Add Custom Post Type to feed

This one came courtesy of Remkus de Vries a while back and was helpful today, adding a custom post type to your site's main feed, don't forget to replace <CPT> with your own custom post type:

// Add a Custom Post Type to a feed
function add_cpt_to_feed( $qv ) {
  if ( isset($qv['feed']) && !isset($qv['post_type']) )
    $qv['post_type'] = array('post', '<CPT>');
  return $qv;
}

add_filter( 'request', 'add_cpt_to_feed' );

Custom Post Type Snippets to make you smile is a post by Joost de Valk on Yoast - Tweaking Websites.A good WordPress blog needs good hosting, you don't want your blog to be slow, or, even worse, down, do you? Check out my thoughts on WordPress hosting!

My whole loop for taxonomy archives, other archive pages and search results now just looks like this:

while ( have_posts() ) : the_post();
  get_template_part( '/partials/excerpt' , $post->post_type );
endwhile;

As you can see, I get the post type for the current post and then use that to load the template part that will display that post type. For each different post type I have created a snippet that displays that post type in it's own specific way, a plugin review would have a rating attached to it, a speaking event would be marked up as an hCalendar event and so forth.

Let's say the post type is speaking_event. The above code would try to load, from my theme's directory, the file /partials/excerpt-speaking_event.php. If that file doesn't exist, it would load /partials/excert.php. So if I create a new custom post type, it will fall back to the "default" display of a post, which is in excerpt.php, and if I decide to give it another look, it will get it's own "short" WordPress template part.

Of course, as this loop itself is referenced about 15 times on all the different forms of archive templates I have, it in itself is a template simply called 'loop'. The best thing about this is that now, when you search for something that results in showing several post types, or you have a taxonomy attached to several post types, they're all displayed in their own specific way. See an example of that below:

More WordPress template part ideas?

Now I'd love to know whether you are using a WordPress template part in your theme and if so, how and where, please share in the comments so we can build a "gallery" of WordPress template part ideas!

WordPress template part: a powerful tool is a post by Joost de Valk on Yoast - Tweaking Websites.A good WordPress blog needs good hosting, you don't want your blog to be slow, or, even worse, down, do you? Check out my thoughts on WordPress hosting!

Check out what my WordPress hosting article looks like in my visual editor now that I have an editor stylesheet active, for instance:

WordPress hosting article with WordPress editor style

This makes it easier for editors to write content in such a way that it fits neatly on the page.

Creating a WordPress editor style CSS file

Creating a WordPress editor style CSS file is a pretty easy process, just follow these steps:

1. Start by creating a file called editor-style.css in your WordPress theme's root directory.
2. Open up your theme's functions.php file and add the following line of code in the setup code, or just at the top: add_editor_style();.
3. Now start editing your newly created editor CSS file. Port over the CSS from your theme's style.css that affects the styling of everything in your post's body. Be sure to assign the width, text color, background color etc. of the content part of your theme to the body in your editor-style.css file.
4. If it's not working as you expected, check the editor-style.css file from TwentyTen or TwentyEleven and see how they apply the several styles.
5. Don't forget to add the image styles like .alignleft, .alignright and .aligncenter as well as blockquote etc.

WordPress editor style is a post by Joost de Valk on Yoast - Tweaking Websites.A good WordPress blog needs good hosting, you don't want your blog to be slow, or, even worse, down, do you? Check out my thoughts on WordPress hosting!

This isn't for the faint of heart, if you're not a programmer this might be a bit tough to do, but I'll outline how it works:

Adding a comment meta value

Using the reasonably new comment_meta API, we're gonna add a piece of data to comments, that stores whether people want to subscribe to the newsletter or not. I did that by adding the following function to my functions.php file:

function ymc_add_meta_settings($comment_id) {
  add_comment_meta(
    $comment_id,
    'mailchimp_subscribe',
    $_POST['mailchimp_subscribe'],
    true
  );
}
add_action ('comment_post', 'ymc_add_meta_settings', 1);

Add a checkbox to the comment form

That wasn't too hard yet right? Next we add the checkbox to the comment form, wherever that is located in your theme, it's just plain (X)HTML:

<input type="checkbox" name="mailchimp_subscribe"
  id="mailchimp_subscribe"/>
<label for="mailchimp_subscribe">
  Subscribe to Yoast WordPress Newsletter (weekly email)
</label>

Subscribe the commenter

That's not really rocket science either. The next step is to take this data and work it. What we'll do is use the Mailchimp API to automatically subscribe people, and send them a confirmation email (we still need to make sure they double-opt-in).

First, let's grab the comment:

function ymc_subscription_add( $cid, $comment ) {
  $cid = (int) $cid;

  if ( !is_object($comment) )
    $comment = get_comment($cid);

  if ( $comment->comment_karma == 0 ) {
    // DO WORK
  }
}
add_action('comment_approved_','ymc_subscription_add',10,1);
add_action('comment_post', 'ymc_subscription_add', 60,1);

The code above makes sure we only do anything with comments that have been approved. So if a comment is approved as spam, it gets ignored. It also makes sure the $comment variable is filled with the comment. Now once we've done this, we're going to check whether the commenter wanted to be subscribed to the newsletter, so within the DO WORK section above, we add this:

$subscribe = get_comment_meta($cid, 'mailchimp_subscribe', true);
if ( $subscribe == 'on' ) {
  // DO WORK
}

We're checking for "on" because that's how PHP stores a checked checkbox, and this way we can reuse the $subscribe variable later. Once we're sure the commenter wanted to be subscribed, let's get all the data we need to add a subscriber to our mailing list. To do that, we'll need to know:

• Our Mailchimp API key
• Our Mailchimp API endpoint server
• The Mailchimp list ID for the list you want to add the commenter to

Once you've got these three, we can create the post request:

$apikey   = ' <your API key> ';
$listid   = ' <List ID> ';
$endpoint   = 'http://<your endpoint>.api.mailchimp.com/1.3/?output=php';

$request   = array(
  'apikey' => $apikey,
  'id' => $listid,
  'email_address' => strtolower( $comment->comment_author_email ),
  'double_optin' => true,
  'merge_vars' => array(
    ' <merge tag for name> ' => $comment->comment_author,
    'OPTIN_IP' => $comment->comment_author_IP,
  )
);
$result = wp_remote_post(
  $endpoint.'&method=listSubscribe',
  array( 'body' => json_encode($request) )
);

Note: setting double_option to false would forego the sending of an opt-in email, thereby immediately subscribing people to the list. Do not do this as it is illegal in most parts of Europe and in the US to do so.

As you can see, we're using the WP_HTTP wrapper function wp_remote_post to handle the post. At this time I'm not actually doing anything with the result, because I'm a sloppy coder. You should of course check the result and based on that do the following action:

update_comment_meta($cid, 'mailchimp_subscribe', 'subscribed', 'on');

This will prevent the code from trying to subscribe someone multiple times and overloading the MailChimp API.

Conclusion: Subscribe those commenters!

People are interacting with your site already, they're already giving you their email address, have them check that box, and make them subscribe to your list. I personally think it's a great enhancement that would make a lot of people happy. If you're not using Mailchimp but another email provider and are capable to do the same stuff with their API: please post about it, drop a comment here and I'll add a link!

Disclosure: Mailchimp sponsors my newsletter and is a regular advertiser on my sites.

Turn your commenters into subscribers! is a post by Joost de Valk on Yoast - Tweaking Websites.A good WordPress blog needs good hosting, you don't want your blog to be slow, or, even worse, down, do you? Check out my thoughts on WordPress hosting!

For reference, here is the copy in the infographic:

Anatomy of a WordPress theme

The cheatsheet for how your blog works

WordPress themes are made up of a folder of template files, each of which controls a specific piece of your theme. Parts of your site that remain static no matter what page you're on are controlled by header, sidebar and footer files. You can hack these files so they detect what page you are on and serve different content accordingly, such as display different navigation on posts than on pages; however it is most common for these sections to look the same throughout the site.

• header.php
  Global file that displays headers and navigation. Also contains HTML code.
• The Loop
  The display of contents of the main area of your site are controlled by individual WordPress theme template files using what's called "the loop".
• sidebar.php
  Sidebar display is controlled in this file. Multiple sidebars can be set up in functions.php, and contents of sidebar widgets are set up from the WordPress wp-admin panel.
• footer.php
  Contains instructions for global footer and closes HTML tags.

index.php - home

The index file controls what the homepage of your WordPress theme looks like. By default it is a loop that queries and then displays the most recent blog posts, with a link in the bottom to view previous posts.

Alternately, you can specify in wp-admin -> settings -> reading to have the home page be a page you created yourself in WordPress. In that case, you specify a different page/URL for the regular blog posts to appear on, and that page is generated by index.php.

single.php - individual posts

The display of individual posts in your WordPress theme is controlled by a little file called single.php. It contains a loop that queries just one post and displays it.

You can specify if you want sidebars (and which you want), if you want it to look different than the other pages on the site.

page.php - individual pages

Page.php controls what pages look like. You can choose to eliminate sidebars or other elements, add other unique elements for pages alone.

WordPress also allows you to create different page templates within your WordPress theme for different types of pages. To create a page template, simply copy page.php, rename it to whatever you want, then add this code to the top:

<?php
/*
Template Name: YourPageNameHere
*/
?>

archive.php, category.php, tag.php - archives

You can control the look and feel of different archives using template files also. If there is no archive file, the archives will look like index.php; however you can create an archive.php to override that. If you create a file called category.php, it will override archive.php for categories only. If you create a tag.php, you can override it for tag archives only.

The Loop

The loop is perhaps the most powerful part of your WordPress theme. It starts with a query (which determines which posts or pages to grab), and ends with a PHP "endwhile" statement. Everything in between is up to you. You can specify the output of titles, post content, metadata, custom fields and commenting all within the loop and each element is output for each post or page until the query is done. You can set up multiple loops and queries on a single page; for example: on a single.php you could have the loop showing the entire content of a single post, with a loop outputting just titles and thumbnails for related posts below it.

• Query post or page
• Start Loop
• the_title (outputs the title of the post)
• the_excerpt (outputs the post excerpt)
• the_content (outputs the full post content)
• the_category (outputs the post categories)
• the_author (outputs the post author)
• the_date (outputs the post date)
• other tags (there is a variety of other tags you can use in the loop)
• endwhile;
• Exit the loop

Background files of a WordPress theme

In order for a WordPress theme to work, it needs a few essential background files. These files can be modified to your needs and can quite powerfully affect the custom look and functionality of your site.

comments.php

This controls the output of comments, which can be included in the loop if you desire comments on your theme. Comments.php can be overriden by plugins such as Disqus, which then take over comment functionality on your blog.

functions.php

Functions.php allows you to put your own custom PHP code in order to modify core elements of your theme. It is often used to specify multiple sidebars, change the number of characters in the excerpt or add custom admin panel options for wp-admin.

style.css

This is the main CSS stylesheet for your theme. It also contains text at the top which tells WordPress what the name of your WordPress theme is, who the author is and what the URL of your site is.

This infographic was created in collaboration with the artists of CreditLoan.com.

The anatomy of a WordPress theme is a post by Joost de Valk on Yoast - Tweaking Websites.A good WordPress blog needs good hosting, you don't want your blog to be slow, or, even worse, down, do you? Check out my thoughts on WordPress hosting!

One of the things I notice very often when performing a site analysis is that sites are loading way too much external files. Reducing the number of files needed to load your site, thereby reducing the number of HTTP requests, makes your site load faster. Faster loading sites have a better user experience, and it's also a ranking factor these days. So, it's clear, when you can, you should reduce the number of HTTP requests.

There's usually three parts to this play:

• Reduce the number of JavaScript files
• Reduce the number of CSS files
• Reduce the number of images

Luckily, Frederick has made a large portion of this very easy in W3 Total Cache, allowing us to tackle 1 & 2 in one fell swoop. But first, let me give you a brief intro into "browser pipelining".

Browser pipelining and why reducing HTTP requests helps

If you web page consists of a HTML file, 3 CSS files, 5 JavaScript files and 10 images, a reasonable amount, it requires a total of 19 files to be loaded. Originally, browsers would load these one after the other. These days, most browsers will download 4 to 8 files at the same time, this is called "pipelining". If we take a maximum of 8 requests (which is pretty high) to the same domain at the same time, it would still require 3 batches to load.

Especially for CSS files and JavaScript files that are loaded in the <head> section of your site, that's an issue: the browser can't start rendering until it has all the files that "block" it from rendering. So we actually need to do two things: combine these files and reduce the number of requests and then move all the files that shouldn't be blocking the page load out of the <head> section and into the body.

This means that for instance a JavaScript that adds some minor functionality to your site's footer could easily be loaded in the last bit of your HTML, so it doesn't block a browser from starting to render your page. This doesn't impact your actual load time, but it does highly impact your perceived load time.

Reducing the number of files to load does help your actual load time: it makes your site faster.

Reducing number of javascript & CSS files loaded

Install W3 Total Cache, and then go to the "Minify" page in it settings screen. On there, scroll down a bit, and you should see two sections "JavaScript" and, right below it, "Cascading Style Sheets". In there, you can add your respective JS and CSS files, it'll look something like this:

If you've added all your CSS and JS file, W3TC will combine these files into one and minify them, meaning it will remove comments, spacing and other unneeded stuff. So you could have 5 js files and combine them into one, effectively saving 4 HTTP requests. As you can see, this is not hard to do, so there's really no excuse for not doing it.

Reducing the number of images

If you have a complicated theme, your theme might be using a lot of background images. I know this site does. There's a way to make all these images load as one file though, through a process called CSS spriting. Explaining the full process and history is too long a story for this post, if you're interested, this article on A List Apart is very good read.

In short: all those background images are combined into one background image. For example, see one of the sprites on my site (click for full version):

Now this isn't an easy thing to do, and if you're no developer you should really hire one to do this for you. If you know a thing or two about development, you might find SpriteMe, a service / bookmarklet by Steve Souders a very useful tool.

Another nice step is to prevent images that are not currently visible to the visitor of your website (because they're below his / her fold, or in web designer speak "outside the viewport") from loading. A jQuery plugin called Lazy Load will help you do this, it'll automatically load images as the visitor scrolls down and the images are visible to him.

Bonus tip: use a CDN

One of the reasons my site is so fast is because I have not only made a sprite out of all those images, they're actually loaded from a Content Delivery Network, or CDN. A CDN is a group of servers around the world, optimized for fast delivery of static files and positioned to be as close as possible to your site's visitors.

The benefit from this is twofold: first of all, as said, those servers are faster and closer to your visitors. Second, they're also usually on another host, like cdn.yoast.com in my own example. This means your browser will open 8 requests to yoast.com and 8 requests to cdn.yoast.com at the same time. Allowing it to load even more at the same time. The smart among you will now think: "hey, what if I would use 2 hostnames for my CDN, or 3". Good thinking. W3 Total Cache has full support for that too, in fact, it makes using a CDN ridiculously easy.

I use the Level3 CDN (aff), provided by VPS.net, which has been very good for me the last few months and is reasonably priced.

Conclusion: reduce those HTTP requests

As you can see, some of these steps are pretty easy. That means there's no good excuse for you not to take them. Just do it, make your site faster and your visitors happier!

Photo from Shutterstock.

How to reduce HTTP requests for your WordPress site is a post by Joost de Valk on Yoast - Tweaking Websites.A good WordPress blog needs good hosting, you don't want your blog to be slow, or, even worse, down, do you? Check out my thoughts on WordPress hosting!

define(
  'MY_WORDPRESS_FOLDER',
  $_SERVER['DOCUMENT_ROOT']  
);  
define(  
  'MY_THEME_FOLDER',  
  str_replace("",'/',dirname(__FILE__))  
);  
define(  
  'MY_THEME_PATH',  
  '/' . substr(  
    MY_THEME_FOLDER,  
    stripos(MY_THEME_FOLDER,'wp-content')  
  )  
);

That annoyed me, quite a bit. Why? Well because if people write articles about stuff like custom write panels, I expect them to know a bit about the basics of the WordPress API. And well, the WordPress API has constants and functions for these things. So let me introduce you to them in the same order as the author of the articles did his defines above:

ABSPATH constant

Not only is their method inconvenient, it's wrong for a lot of installs. You see, some people install WordPress in a subdirectory, and depending on what you need, there are two different paths you might need. ABSPATH is a constant that always returns the home of WordPress. So if WordPress is in the wp/ subdirectory, it would give you something like: /home/username/public_html/wp/. If WordPress were installed in the root, it would just return /home/username/public_html/. Now I don't know how they're using it, as it's not used in this particular article, but they'd have to be very cautious with that.

TEMPLATEPATH constant

The second two things they're doing are possibly even weirder. First they define a constant MY_THEME_FOLDER, which is basically the path to the current theme. WordPress has a very convenient constant for that: TEMPLATEPATH. Since they're using it in an include, that's probably what they need. Would save about 4 lines of code. Note that what they call a "folder" is actually a path.

get_template_directory_uri()

This is were they really go wrong. You see, they define a constant MY_THEME_PATH, and then use it as a URL in a call to wp_enqueue_style(), in other words: to enqueue a style sheet. Now paths and URLs are different animals altogether, and they don't mix well. Take this example:

• My blog is installed in a subdirectory /wp/
• Because of that MY_THEME_FOLDER has been defined as follows:

  /home/user/public_html/wp/wp-content/themes/example-theme

• The code that sets MY_THEME_PATH turns that into:

  /wp-content/themes/example-theme

• The stylesheet is now included with the following path:

  /wp-content/themes/example-theme/custom/book_panel.css

• This causes a 404 (file not found error) because that directory simply doesn't exist! It should have been:

  /wp/wp-content/themes/example-theme/custom/book_panel.css

The proper way of doing the enqueue would thus have been the following:

wp_enqueue_style(
    'my_meta_css',
     get_template_directory_uri(). '/custom/book_panel.css'
  );

Conclusion

I hope you understand why this annoys me. This is exactly the kind of coding that gives WordPress coders out there a bad name, as 5 - 10% of people out there trying this will not get it to work. If you want to prevent from making such mistakes, there's plenty of resources to learn about these things, or look them up. Two starting points would be the codex and my own cross reference of the WordPress source along with its very convenient WordPress source search function.

Quick WP Tip: paths and URLs in WordPress is a post by Joost de Valk on Yoast - Tweaking Websites.A good WordPress blog needs good hosting, you don't want your blog to be slow, or, even worse, down, do you? Check out my thoughts on WordPress hosting!

Wrong. Why that's wrong? Let's say that, a year from now, you're tired of this theme and want something else. It happens to all of us. So, you're switching themes. Have you guessed the problem yet? Because that theme you started using the titles and descriptions of uses it's own methods and locations for storing those titles and descriptions, when you switch to another theme, it won't recognize the old stuff.

If you're smart, you'll notice. If you're not, you'll be in even deeper trouble, as someone I did a site review for recently found out. She'd written superb SEO titles and meta's for her last 50 odd posts, and the hundreds of posts before that didn't have them. Took us a while to figure out she'd switched themes...

If you're a developer, changing a couple of post meta fields in the database might be reasonably easy, but for most people, it's not. That's why your theme should only contain functionality that alters the looks and the code of your site, not the content.

So there are no "SEO friendly themes"?

Does this mean a theme couldn't be SEO friendly? No it doesn't. A theme still determines a large part of what your heading structure looks like, whether it shows your content first and then your navigation or the other way around, whether your code is clean and tight or all messy etc. etc. etc. These are all very important aspects of on-page SEO, and I applaud every theme developer thinking about this and trying to learn about it.

Conclusion

There's a reason why we've got plugins and themes. We want to separate content from design. If something has to deal with your content, stuff you'd want to be the same regardless of which theme you're using, it has to be a plugin.

Update: Nathan has released his SEO Data Transporter plugin, which allows you to "transport" your data from one plugin to another, or from a theme to a plugin etc. This makes the technical fix easier, but still doesn't take care of the fact that people switch themes and simply forget about things like these. So my stance remains that it is a bad idea to have this functionality in your theme.

Why functionality in themes is not always good. is a post by Joost de Valk on Yoast - Tweaking Websites.A good WordPress blog needs good hosting, you don't want your blog to be slow, or, even worse, down, do you? Check out my thoughts on WordPress hosting!

How I "activate" a hReview

I alluded to it in last tuesdays podcast with Dougal Campbell: When I add a custom field "rating" to a post, my theme now automatically marks up that post as an hreview microformat. So it's as simple as this:

The rating is between 0 and 5, because that way Google understands it best and we don't have to give Google any extra metadata about it.

The hreview_echo function

To make this whole process easy, I've created a function in my functions.php file called hreview_echo. It looks like this:

function hreview_echo($val) {
  global $post;
  $rating = get_post_meta($post->ID, 'rating', true);
  if ($rating) {
    echo $val;
  }
}

We'll use this function on the several places where we need to add extra classes to make up the hreview.

The wrapper class: hreview

The first class we should add is the wrapper for the entire microformat: the hreview class. This should be on the div surrounding the post (this div should include the title and author). In the default theme (and in mine) it looks like this:

<div <?php post_class() ?> id="post-<?php the_ID(); ?>">

In this case the class of this div is actually put out by the WordPress core post_class() function, so we'll need to hook into that function. Luckily it allows us to easily do that using a filter, which we'll do using the functions below, which you can drop into your functions.php too:

function hreview_post_class($classes, $class, $post_id) {
  global $post;
  $review = get_post_meta($post->ID, 'rating', true);
  if ($review) {
    $classes[] = 'hreview';
  }
  return $classes;
}
add_filter('post_class','hreview_post_class',10,3);

If your theme doesn't use the post_class() function, it's even easier! Let's say your post div looks like this:

<div class="post">

You can just use our hreview_echo() function:

<div class="post<?php hreview_echo(' hreview'); ?>">

The item reviewed: the title

Next up in the line of things we have to add a class to is the post title, it needs two classnames: the item and fn classes. In my case it looked like this:

<h1><?php the_title();?></h1>

This is easily turned into the following, again using the hreview_echo function we created before:

<h1 <?php hreview_echo(' class="item fn"'); ?>><?php the_title();?></h1>

The date of the hReview

For the date we'll have to work it a bit. The hreview microformat determines the date should be in ISO date format. Meaning the date should look like: 2010-03-01. Your theme probably has another way of showing the date, I know mine does. My date looked like this:

<span class="date"><?php the_time('d F Y');?></span>

Now to make it so that it can still look like that but we can also give the microformat the correctly formatted date, we'll use a trick: by adding a span with a class of value-title and then adding the correct date in the title of that span, microformat parsers will ignore the other content and pick the value from that title.

So we'll turn it into this:

<span class="date<?php hreview_echo(' dtreviewed') ?>">
  <?php
      hreview_echo('<span class="value-title" title="'.
        get_the_time('Y-m-d').'"/>');
      the_time('d F Y');
  ?>
</span>

This outputs:

<span class="date dtreviewed">
  <span class="value-title" title="2010-02-10"/>
  10 February 2010
</span>

That's a nice, non-intrusive solution, right?

The reviewer: the author

The next class we need to add is the reviewer class, as this is the author of the review, that's a simple one too: it's the author of the post. In my theme, my author block looks like this:

<span class="author"><?php the_author(); ?></span>

Now you'll get by now what we'll do:

<span class="author<?php hreview_echo(' reviewer'); ?>">
  <?php the_author(); ?>
</span>

Easy does it, right? You can basically do something like this with any kind of showing the author's name. Other functions that might be used in your theme are for instance the_author_link() or the_author_posts_link().

The content of the review

We've done more than half of it now! Let's get going with the contents of the review, in the microformat, this needs the class description. In my theme, just like in the default kubrick theme, the content is wrapped in the following div:

<div class="entry">

You've guessed it by now haven't you? Here we go:

<div class="entry<?php hreview_echo(' description'); ?>">

By the way: if you want to mark up articles on for instance your fronpage as hreview too, and you use excerpts there instead of full articles, like I do, you should use summary, instead of description:

<div class="entry<?php hreview_echo(' summary'); ?>">

Finally: the rating!

And now, finally, it's time for us to add the rating, because that's what it's all about right? There's all sorts of ways to display a rating, I have chosen to do it in HTML that looks like this:

<div class="rating">My rating:</div>
<div title="4.5 out of 5 stars" class="rating_bar">
  <div style="width:90%"></div>
</div>

Which outputs this:

The second div (class rating_bar) displays the rating, and it contains the empty stars. The div within that contains the yellow stars, and fills the stars up to where they need to be.

The CSS for these 3 divs looks like this:

.rating {
  float: left;
  margin-right: 10px;
}
.rating_bar {
  float: left;
  width: 55px;
  background: url(images/stars.gif) 0 0 repeat-x;
}
.rating_bar div {
  height: 12px;
  background: url(images/stars.gif) 0 -13px repeat-x;
}

Download the (sprited) image of the stars here.

Now we'll need to do two things: dynamically output the size of the inner div within rating_bar, and make the rating readable for a microformat parser.

To display the rating, because it's a value between 0 and 5, we'll multiply it by 20. To make the output parseable by a microformat parser, we'll use the same value-title trick we used before. Finally, we'll turn this all into a function to display the rating, which you can drop into your functions.php, just like the two functions before.

<?php
function display_hreview_rating() {
  global $post;
  $rating = get_post_meta($post->ID, 'rating', true);
  if ($rating) {
?>
    <div class="rating">
      My rating:
      <span class="value-title" title="<?php echo $rating; ?>"/>
    </span></div>
    <div title="<?php echo $rating; ?> out of 5 stars" class="rating_bar">
      <div style="width:<?php echo ($rating*20); ?>%"></div>
    </div>
<?php
  }
  return $output;
}
?>

So, now you can just use the display_hreview_rating() function anywhere in your post where you want to display the rating. If there is no rating, it won't display anything.

Testing your hreview & rich snippets

Testing your hreview markup can be done with multiple tools, but I myself found the Google Rich Snippets tool to be extremely useful. If you use Quix, just type 'snippet' on the post you want to test! In my case it outputs a snippet like this for my review of a WordPress backup plugin:

Bonus: pricerange and tags

As you can see in the above snippet, it includes something that is not documented anywhere in the official Google documentation for reviews, but that Google does support: the pricerange.

Credit where credit is due: I first found this pricerange attribute when my colleague Eduard pointed me to this post by the SEOgadget guys, which pointed to this Knol. It's extremely useful and seems to basically allow for all sorts of text. People use it to display a pricerange in a €€ - €€€ style, or to display a "real" pricerange, like € 100 - € 150. In case of an individual review, you can just use it to tell what you paid for it.

Since what I paid for a product is not a real part of my theme, I just make it simple: when I tell that the plugin is free, I mark up that line as:

this plugin is completely <span class="pricerange">free</span>

If you do want to put the value into a custom field and display it, you could easily adapt one of the functions above to do that, I'll leave that as an exercise to you, the reader.

Another thing I found that Google recognizes is the class tags. That's really easy to do: I just added the class 'tags' around my tags. I don't know how Google uses that though, haven't seen it anywhere in the wild.

A final note on Rich Snippets

If you've modified your theme to mark up as hreview, please make sure to use this form to let Google know that you have. They might not show it if you don't fit their test segment though, because as Google states in the Knol:

Currently, review sites and social networking/people profile sites are eligible. We plan to expand Rich Snippets to other types of content in the future.

I hope you've found this post useful, let me know in the comments if you've used it to add hreview to your (premium) theme, and feel free to post links to examples, I'd love to see them! If you're wondering: all code examples on this site, unless specifically otherwise stated, are MIT licensed: free to distribute, free to modify. Please do add a link to where you got the original code though.

It's my humble opinion that additions like these should make it into all the premium themes, because that's what really makes a premium theme premium, in my opinion. Happy coding!

Implementing hreview in your WordPress theme is a post by Joost de Valk on Yoast - Tweaking Websites.A good WordPress blog needs good hosting, you don't want your blog to be slow, or, even worse, down, do you? Check out my thoughts on WordPress hosting!

Instead of just identifying the problem, your 404 error page needs to offer a solution.

In the default WordPress Kubrick theme the 404 error page (example) is probably one of the ugliest pages you've ever seen, and chances are yours is not any better. Today is the time to end that. This post will provide you with everything you need to make your "404 - File not found" page a starting point instead of a dead end street.

The goal of a good 404 error page is simple: to make sure visitors landing on it continue browsing your site, and find the content they came for. Let's get going.

Get into your visitors mindset

Get into the mindset of the person that just got to a 404 error page on your site. They were expecting something else, if not, they wouldn't have gone there. So there's a couple of things you should absolutely not do:

First of all, considering they've probably clicked a link somewhere to get to that 404 error page, whose fault is it that they're getting a 404? Theirs? No. Yours? It very well might be, so you'd better apologize.

Second, make sure the styling of your 404 error page fits in with the rest of your site. Sometimes designers go overboard with their 404 pages, and make them look like, for instance, a Windows blue screen. This can have the very undesired effect of people leaving immediately.

Third, if you are going to make jokes, like that Windows blue screen, make sure it's a joke everyone gets. Especially when you're blogging in English, you might end up with a lot of readers for whom English is their second or third language. Your puns, though well intended, might be going nowhere because their mastery of the language isn't sufficient. Because of that they might leave... Is that worth it?

Let's make a killer 404 error page for WordPress

Ok so we know what not to do. We also know that the visitor came to your site looking for specific content, usually having followed a link from somewhere. Now it's time to start giving them ways of doing that. If you're not using WordPress and you're lazy, the Google 404 widget might be helpful. If you are using WordPress, we can do better than that.

Let's let us be inspired by some great 404 error pages:

I'll be honest: the Conversion Rate Experts guys have inspired the first version of my 404 error page. They offer you 4 options to get to the content you were looking for:

1. search
2. check the URL for misspellings
3. check the sitemap
4. start over at the homepage

That's a great start. Apple gives you a sitemap straight away. Depending on your site's structure that might be a great idea too.

I wanted to add one more thing: a set of pages that actually might be related to the URL people had typed in. To do that, we'd have to parse the URL and see if there's something useful in there. Let's see what we have to work with:

What data does a 404 error page provide?

A lot of people seem to think that a 404 page is a dead end street. It's not, there's a whole lot of data that can help you find the content your visitor was looking for. Let's start with the URL: it contains something very useful. All the text that's there after the slash of your domain should be pointing you to what it is the person was looking for.

Luckily, WordPress stores that information for you. The $wp_query->query_vars['name'] variable holds whatever was in there. It does do some replacing in there though, it replaces all weird entities with a dash (-). We'll use this bit of information to spice up your 404 error page.

First of all, let's check whether there's a direct match for that var in a page name once you strip out all the things that people sometimes add to your URL erroneously. (If you read on there's an adapted version of the Kubrick 404 page which you can use to update your own themes.)

$s = $wp_query->query_vars['name'];
$s = preg_replace("/(.*)-(html|htm|php|asp|aspx)$/","$1",$s);
$posts = query_posts( array( 'post_type' => 'any', 'name' => $s) );

If that doesn't deliver results, you'll want to do a search for that word, to do that we'll have to rip out the dashes in the name, and then do the search. As we're going to re-use the $s variable further on, we'll do that outside of the if statement to check whether the previous query delivered results:

$s = str_replace("-"," ",$s);
if (count($posts) == 0) {
  $posts = query_posts(array( array('post_type' => 'any', 'name' => $s) );
}

Now we have an array with posts, at least, we hope we do, so let's check that, and loop through it:

if (count($posts) > 0) {
  echo "<p>Were you looking for <strong>one of the following</strong> posts
    or pages?</p>";
  echo "<ul>";
  foreach ($posts as $post) {
    echo '<li>';
    echo '<a href="'.get_permalink($post->ID).'">'.$post->post_title.'</a>';
    echo '</li>';
  }
  echo "</ul>";
}

I've made an adapted version of the Kubrick 404 error page, which you can download here.

There's a plugin that does something similar to the above, called Smart 404. It chooses to redirect the visitor to the first result it gets. It wouldn't be my preference, I actually want people to notice that the URL was wrong.

So now we have a great 404 error page, but we haven't used all the data that we were provided with. Another bit of data the 404 provides is the referrer: someone linked to your page with a wrong URL, or is linking to a page that isn't there anymore. So we've got one thing left to do:

Preventing 404 error pages

There's a very cool plugin called 404 notifier by Alex King, which can provide you with an RSS feed of the 404's on your site, and Redirection, one of my all time favorite plugins, offers the same functionality. You could also use my own Google Analytics for WordPress plugin. It tracks the 404's as 404.html (look for them in your content report).

Using Google Analytics has the added advantage that it saves the referrer, so you know which URL the visitor originated from. This allows you to not only redirect the URL to the correct place, but also to ask the site that referred the visitor to fix the URL.

Another great way to keep track of 404's on your site is using Google Webmaster Tools. In the Diagnostics - Crawl Errors area of Webmaster Tools Google gives you a great overview of what 404's it encountered on your site:

Two Things you Need to Know about 404 error pages

These are things that WordPress is doing right, but it's good to know these things:

• Internet Explorer will only show your custom 404 page if it's larger than 512 bytes (hard to get smaller than that with WordPress).
• 404 is not only the name, it's also the HTTP header that the page should send, if not, you might end up with 404 pages in the search engines indexes. You can easily check this with a HTTP header checker.

As said, no need to worry if you're using WordPress, but good to know these things.

There's really no excuse left now for a bad 404 error page on your WordPress blog or anywhere else, so go fix yours! Once you've done that, drop your site's URL in the comments, and I'll make a small gallery of cool 404 error pages in this post.

Practical Guide to creating a 404 Error Page for WordPress is a post by Joost de Valk on Yoast - Tweaking Websites.A good WordPress blog needs good hosting, you don't want your blog to be slow, or, even worse, down, do you? Check out my thoughts on WordPress hosting!

I decided, that the only time I want Thickbox to load, is when I manually add class="thickbox" to the code of a post or page. So I wrote up a little script that checks for that, and loads Thickbox if needed. Now you need to know that to make Thickbox work, you need to load both a script and a css file, so the complete code is the following:

function yst_conditional_thickbox() {
  global $post;
  if (is_singular() &&
    strpos($post->post_content,'class="thickbox"') !== false) {
      wp_enqueue_script('thickbox');
      wp_enqueue_style('thickbox');
  }
}
add_action('wp_print_styles','yst_conditional_thickbox');

This code should go into your themes functions.php file. Let's explain it a bit: the function checks whether the content of the post contains the text class="thickbox". If it finds this text, it enqueues both the Thickbox script and CSS file. The add_action "hooks" this function to a WordPress hook. I use the wp_print_styles hook here, because that executes in the head, and makes sure both the stylesheet and the script file get loaded properly.

Now of course there's nicer ways of doing this, like making it into a full regex to see if class="thickbox" is actually set on a link, to prevent it from loading on a post like this one, which doesn't have a thickboxed image in it, but does contain the text. But let's be honest, how often is that really the case? This simple conditional load means you can use Thickbox when you need it, but you're not making your users download Thickbox all the time when you're only using it in 5% of your posts.

Let me know in the comments if this works for you, and which other things you think you should load conditionally, to make your blog a bit faster and more userfriendly!

Quick WP Tip: Conditional Thickbox loading is a post by Joost de Valk on Yoast - Tweaking Websites.A good WordPress blog needs good hosting, you don't want your blog to be slow, or, even worse, down, do you? Check out my thoughts on WordPress hosting!

The first thing it does, on the homepage of the blog you've activated it on, is show the most important constants for that blog (see this screenshot). It shows you the important URL's, editor and memory settings etc.

On subpages it will show you something else: the page type, all the query vars that are set and the SQL query for that page. I've found that just doing a print_r or var_dump of $wp_query is hard to read, this theme tries to be a bit smarter about that, see these examples.

This theme also works in the preview, so that might be enough in a lot of cases. It also works great together with Donncha's Theme Tester, as Alex Leonard mentioned in the comments. Be warned that you might want to remove this theme from live sites though!

So all you have to do to use this is download it, upload it to your server and activate it.

If you're a developer this theme might come in handy sometimes, I'd love to know if you use it and what you'd add, maybe we can turn this into something super useful together.

WordPress Debug Theme is a post by Joost de Valk on Yoast - Tweaking Websites.A good WordPress blog needs good hosting, you don't want your blog to be slow, or, even worse, down, do you? Check out my thoughts on WordPress hosting!

Turns out Lester is being very good about it and is using the WordPress internal functions next_posts_link and previous_posts_link. This is good because both of these functions have a simple filter that we can hook onto to add a class to those links, and the code below will work in all instances, also when you're not using Lester's plugin but just plain old WordPress.

By default, those links don't have any classes on them, but by adding the following two simple functions to our functions.php, we can add those very easily:

function previous_posts_link_class() {
  return 'class="previouspostslink"';
}
add_filter('previous_posts_link_attributes','previous_posts_link_class');

function next_posts_link_class() {
  return 'class="nextpostslink"';
}
add_filter('next_posts_link_attributes','next_posts_link_class');

If you've added these two functions to your functions.php, you can now use the previouspostslink and nextpostslink CSS classes to style these two links!

Quick WP Tip: pagination classes is a post by Joost de Valk on Yoast - Tweaking Websites.A good WordPress blog needs good hosting, you don't want your blog to be slow, or, even worse, down, do you? Check out my thoughts on WordPress hosting!

We start the process with a simple WordPress MU install, to which we then add the Multi Site Manager plugin, to be able to run multiple domains off of it. Now this is all pretty simple and straight forward. Now we used to have to build a theme in several languages, but we've recently developed some new stuff that makes that simpler.

Localized templates

One of the things I've done for the StudioPress themes is localize them, which is actually not even that much work if you read the how to for it that John Godley wrote. On top of doing that, we add some other code that I've written, which allows you to pick the language for a blog in the themes backend.

Now this means, that we can run a multi domain, multilingual site in 1 WordPress install, while maintaining only 1 theme.

Localizing dates

One of the other things you need to take care of when you're localizing your WordPress theme is localizing the date output. To be honest the way I'm doing that right now is a bit of a hack, but it allows for us to translate dates from within a theme, without having to use the backend in the other language. It works by adding stuff like this to the themes functions.php:

$wp_locale->weekday[0] = __('Sunday','orangevalley');

So now, we can have an english backend, and a frontend in as many different languages on as many different domains as we want, served from one WordPress MU install, with only one theme to maintain. How cool is that?

Multilingual and Multi Domain Sites in WordPress is a post by Joost de Valk on Yoast - Tweaking Websites.A good WordPress blog needs good hosting, you don't want your blog to be slow, or, even worse, down, do you? Check out my thoughts on WordPress hosting!

Anyway, sometimes you'll want to disable this feature from within your theme, or maybe even as a sitewide plugin to disable it all over your WordPress MU installation. It's pretty simple to do:

function yst_remove_smileys($bool) {
  return false;
}
add_filter('option_use_smilies','yst_remove_smileys',99,1);

If you want to do that sitewide, add a plugin header to it and throw it in the mu-plugins dir of your WordPress MU installation.

Remove Smilies, once and for all is a post by Joost de Valk on Yoast - Tweaking Websites.A good WordPress blog needs good hosting, you don't want your blog to be slow, or, even worse, down, do you? Check out my thoughts on WordPress hosting!

PHP in WordPress themes must be GPL, artwork and CSS may be but are not required.

Ok, so that's the final truth, because the Software Freedom Law Center (who are of course absolutely NOT partial in this, even though they're called the "Software Freedom Law Center") said so. Nice. Really nice actually as all I've done and released for WordPress, ever, has always been GPL, and I chose to work with Brian because his themes were GPL and the others were not (at the time).

You'd think I'd be happy, and I am, sort of. But I've got an itch that needs scratching. With this final statement, there's also a new page on WordPress.org for Commercially supported GPL WordPress theme makers, and Genesis is among those of course.

So, all the theme makers who decide to go fully GPL (their artwork and CSS included), can get listed on that page. Well, good for them. You'd think, that by now, Matt and Automattic would have been smart enough to know who their friends and who their foes are. I'm not saying these theme makers aren't their friends. But there are these people out there, who have been building things that have been GPL all the time, who do NOT get that recognition.

Of course, we plugin authors get to host our own plugins on wordpress.org, and we can get links back to our site etc. But where's the page for commercially supported GPL WordPress PLUGINS Matt? Don't you think it's time you started treating the plugin authors the same way as the theme authors? Or do we have to start a theme war for that first?

And yes I do have an interest in this, and yes I am planning on going the "commercially supported GPL" route with some of my plugins, just because keeping them all free doesn't make any sense any more. Free does other things, just as Chris Anderson says, it has helped tremendously in getting my name out, but "free" doesn't make me rich, far from it even. I can be quite honest in that so far, in working with Brian on StudioPress... Well let's just say the effort to gain ratio is a LOT better.

The fact that people are able to build business models around a project, is the reason that projects grow. The premium theme market, started by Brian but also greatly pushed by my buddies at WooThemes and others, has increased development on themes tremendously: it has done the entire WordPress community a lot of good. (BTW, read Daniel Jalkut's post on the GPL vs liberal licenses, it's a very good read and offers some nice food for thought).

So my plea, to you, Matt, is to help people build up viable business models around WordPress Themes AND Plugins. For several reasons, including the fact that I'm loving to be able to make a living with it, but also because I think it will do the community a lot of good. And ow yeah, I'd love a haiku on WordPress.org about me too!

On the GPL, Themes, Plugins & Free. is a post by Joost de Valk on Yoast - Tweaking Websites.A good WordPress blog needs good hosting, you don't want your blog to be slow, or, even worse, down, do you? Check out my thoughts on WordPress hosting!

Brian is the one who kickstarted the premium theme space, and he was also the first premium theme developer to realize that he could stick to the GPL and still have his themes be premium. As most of my readers will know, everything that I've ever coded for WordPress has always been released under the GPL, which is why I never went into the premium theme business before. But Brian's move to the GPL opened a series of possibilities for me.

So we are partnering up. I'm going to be optimizing all the StudioPress themes, and offering StudioPress customers advice on how to optimize their sites in regular blog posts and in a new blog optimization package we'll be offering through StudioPress.

Brian and myself are very happy with this new partnership, and look forward to creating a lot of very well designed, well SEO'd themes for all of you to build your sites with!

Now you'll ask what does this have to do with OrangeValley? Well, this agreement is actually between Brian and OrangeValley Projects, which is the new WordPress & Magento development company we've recently started, and my colleagues in OrangeValley Projects will also be working on all of this.

StudioPress and Yoast kick it off together is a post by Joost de Valk on Yoast - Tweaking Websites.A good WordPress blog needs good hosting, you don't want your blog to be slow, or, even worse, down, do you? Check out my thoughts on WordPress hosting!