WordPress

• Code Snippets and Examples

  • The only proper way of adding a Facebook “Like” button to your WordPress blog
  • An article I wrote recently for Smashing Magazine: Lessons Learned From Maintaining a WordPress Plug-In
  • Gravity Forms PayPal integration
  • 16 Vital Checks Before Releasing a WordPress Theme
  • How to Display Human Readable Post Dates in WordPress
  • Control WordPress Content via Userrights or Time
  • A good Beginner’s Guide to the Thematic Framework

• Plugins

  • BuddyPress Courseware beta; a very cool plugin for schools & other educational institutions.
  • Post to post; nice plugin for creating relations between posts.
  • Press This Reloaded; pretty useful if you need to, for instance, adapt the SEO title of a post.
  • WPMU.org features my WordPress Salesforce CRM plugin.
  • Custom Post Permalinks; I seriously think this should be in WordPress core, but as long as it's not, this'll do.

• News

  • Common WordPress Multisite Problems and Solutions
  • Top 10 WordPress News Blogs
  • When is the Best Time to Post a Blog Post? Not enough people think about this.

SEO

• Without any work from me, my Google Analytics plugin now helps you verify your Google Webmaster Tools account.
• I'm seeing similar stuff to this: Google Webmaster Tools Link data - a case study by Dave Naylor, my favourite UK SEO.
• Want an SEO job? Check out the Daily Mail's robots.txt file

Analytics

• Qualitative Web Analytics: Heuristic Evaluations Rock! another great post by Avinash Kaushik
• The new Management API for Google Analytics rocks; check out the docs

Web design / web development

• Practical? No. Cool? Yes. Compressing Your JavaScript and CSS to PNG Images
• What a surprise: Steve Jobs was right, Flash fails on Android
• HTML5 for Web Designers: Book Review at Nettuts+ - I've read it too, it's amazing
• Good Help is Hard to Find is another A List Apart classic. Wonder how to apply this to my plugins...
• A very concise explanation of the viewport metatag by David B. Calhoun
• A pretty awesome example of what can be reached with CSS3 now
• I'd almost start using Typekit: Adobe partners with Typekit to bring legendary typefaces to the web.
• MathML is now part of WebKit nightlies, go forth and play, all you math lovers out there!
• Delay loading of print CSS (in WordPress, but useful for everyone)
• Debugging Tools - jQuery for Designers
• This would work perfectly for WordPress plugin developers: Readme Driven Development

Online Marketing / Social media

• Daring Fireball - Online Advertising: Losing the Race to the Bottom - listen to this, seriously.
• What's this thing called Buzz that Leo talks about? :)
• Facebook Tabs: What They Are & How to Use Them - Good writeup on RWW
• Quite curious how many people will do this: German Homes Can Now Opt Out Of Google - TechCrunch

Science

• Experts are usually wrong
• Everyone looks better after you've tipped back a pint or two, and now we know why
• A nice infographic on the history of the Internet
• Freakonomics: loved the book, looking forward to the movie, check out the trailer.
• Wonder what my wife does? Read her latest paper on the Intergenerational Transmission of Convictions.

Fun

• (Fake) Lady Gaga sings about Java programming with some hilarious quotes
• Gonna have to try this on my son in about 2 years: 4 Tools for Teaching Kids to Code
• Basically, you can't block Mark Zuckerberg on Facebook, because too many other people did it before you
• You know you're a geek when you think this is funny

Lifestyle

• Trying to follow this advice: living a Balanced Freelance Life (even though I'm only partly freelance)

Mac

• Why Daniel Jalkut is sticking with the Mac
• Precipitate: search for and launch the info you stored in the cloud from Spotlight or G Desktop for Mac
• This is bloody hilarious: No Comment: Justin Long's jailbroken iPhone
• This proved to be pretty awesome for mp3 splitting: Macsome Audio Splitter

Link dump: interesting reads from around the web is a post from Joost de Valk's 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 page needs to offer a solution.

In the default WordPress Kubrick theme the 404 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 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 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 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 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 page

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 pages:

I'll be honest: the Conversion Rate Experts guys have inspired the first version of my 404 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('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('post_type=any&s='.$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 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 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 page, 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 pages in this post.

Practical Guide to 404 Error Pages: What WordPress is Missing is a post from Joost de Valk's 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 code is almost as easy as the code to display your FeedBurner subscribers or your last tweet. You'll need to create an account with Technorati and then get your API key. That page will also tell you how much queries you've made that day, and what your daily allowance is.

This is the code, including caching:

$technorati = get_option("technorati");
if ($technorati['lastcheck'] < ( mktime() - 600 ) ) {
	$apikey 	= "apikey";
	$endpoint 	= "http://api.technorati.com/cosmos?key=".$apikey;
	$request 	= $endpoint."&url=yoast.com&limit=10";
	$snoopy 	= new Snoopy;
	$result 	= $snoopy->fetch($request);
	if ($result) {
		$pattern1 = '/<inboundblogs>([0-9]+)<\/inboundblogs>/';
		$pattern2 = '/<inboundlinks>([0-9]+)<\/inboundlinks>/';
		$pattern3 = '/<rank>([0-9]+)<\/rank>/';
		preg_match($pattern1, $snoopy->results, $matches);
		preg_match($pattern2, $snoopy->results, $matches2);
		preg_match($pattern3, $snoopy->results, $matches3);
		$technorati['inboundblogs'] = number_format($matches[1]);
		$technorati['inboundlinks'] = number_format($matches2[1]);
		$technorati['rank'] 	= number_format($matches3[1]);
		$technorati['lastcheck']= mktime();
		update_option("technorati",$technorati);
	}
}
echo "<h3>Technorati</h3>";
echo "<p>".$technorati['inboundblogs']." blogs linked 
	".$technorati['inboundlinks']." times in the last 6 months, 
	ranking it as ".$technorati['rank']." among all blogs.</p>";

That's it! Let me know if you've got any questions!

Using the Technorati API on your blog is a post from Joost de Valk's 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 that is pretty darn easy to do. So, for my own reference, and yours, here's a complete overview of everything possible with a mailto link.

There are a couple of variables you can use, and you'd have to do that in standard URL format:

<a href="mailto:info@example.com?subject=subject&cc=cc@example.com">mail link</a>

Here are the variables you can use in these mailto links:

Some mailto examples

Simple mailto link:

<a href="mailto:info@example.com">mail link</a>

mailto link with subject:

<a href="mailto:info@example.com?subject=email%20subject">mail link</a>

mailto link with multiple recipients:

<a href="mailto:info@example.com,email@example.com">mail link</a>

mailto link with a CC:

<a href="mailto:info@example.com?cc=email2@example.com">mail link</a>

mailto with message body already started:

<a href="mailto:info@example.com?body=these%20mailto%20links%20are%20cool">mail link</a>

mailto with 3 lines of message body:

<a href="mailto:info@example.com?body=these%20mailto%0Alinks%20are%0Acool">mail link</a>

mailto with 3 lines of message body and a BCC:

<a href="mailto:info@example.com?bcc=mail2@example.com&body=these%20mailto%0Alinks%20are%0Acool">mail link</a>

As you can see, you can add as many of these as you want and stack them on top of each other. Remember that after the email address you'll use a question mark to prefix the first variable, and ampersands ( & ) for each consecutive variable.

On top of that, for the code to be valid HTML, you have to replace every & with &.

Happy mailing!

The full guide to mailto links! is a post from Joost de Valk's 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!

Next to that links would be in a different color, depleting your color cartridges and not giving you any info whatsoever. When you've printed an article, you usually have to go back to the online version to be able to open the links. There's a solution for that, and it's actually quite easy: using CSS to add the URL after the link. That's really easy to do with the content declaration, like this:

#content a:after {
	content: " (" attr(href) ") ";
	font-size: 80%;
}

Next to that I used display:none; to hide the menu, sidebar and comments, so you get just the article, in black text, on a white background.

Of course, feel free to have a look at (and copy) my print css!

Added a print CSS style sheet is a post from Joost de Valk's 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!

[code language="php"]
function FrontpageDiggs($url) {
$result['source'] = "http://digg.com/rss_search?search=".$url."&area=promoted&type=url&section=all";
$output = file_get_contents($result['source']);
preg_match_all("/.*().*/",$output,$matches);
$result['result'] = count($matches[1]);
return $result;
}
[/code]

Now if you echo $result['result'], you'll get the number of posts for $url that made the frontpage.

Get the number of popular digg posts for a URL is a post from Joost de Valk's 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!

OS X 10.5 is really looking good, can't wait to get home and play around with it.

OS X 10.5 Leopard: Spaces combined with Parallels is a post from Joost de Valk's 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!

Big hunkin’ list of Mac Tools for SEO’s and Webdevelopers is a post from Joost de Valk's 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!

Webdesign survey is a post from Joost de Valk's 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!

Keeping track of what people are searching for
I had a few things to make sure while building this search function. First of all, I wanted to have the same info I get when I look at the statistics page for the Search Meter WordPress plugin. Secondly, I wanted to show more then just the post or page title. The last, but also very important demand I have is that it's fast. Well the first one was quite easy, I decided to put the data into the table for the search meter plugin and just use that interface, instead of writing that myself. The function was basically adapted from the code of the plugin:

function save_search($searchstring, $numresults) {
global $table_prefix;
// Save into the DB. Usually this will be a new query, so try to insert first
$query = "INSERT INTO {$table_prefix}searchmeter (terms,date,count,last_hits) VALUES ('$searchstring',CURDATE(),1,$numresults)";
$success = mysql_query($query);
if (!$success) {
$query = "UPDATE '{$table_prefix}searchmeter' SET count = count + 1, last_hits = $numresults WHERE terms = '$searchstring' AND date = CURDATE()";
$success = mysql_query($query);
}
return true;
}

Constructing the Yahoo! API query
The second thing wasn't too hard to do either, as Yahoo! returns a snippet with the searchresult for the query. The REST query is constructed as follows:

$query = "site:yoast.com+".urlencode($searchstring);
$request = 'http://search.yahooapis.com/WebSearchService/V1/webSearch?appid='.$yahooappid.'&query='.$query.'&output=php';

The part output=php makes the API return serialized PHP, which, after calling unserialize, turns into a nice clean array, which you can then loop through to display the results.

The only thing left was adding the search box to my layout for the non-blog pages, and fixing the blog to look the same. In the theme I had to change the action URL of the searchform.php file to /search/, and there it was: my new site wide search function!

So far, it's all good. I've got a few things left, like building in paging so you can see more than 10 results. I've got one thing that bothers me though: it's a bit slow. Of course I could solve this by spidering my own site with something like ht://Dig, but I think there ought to be a better solution... Perhaps you guys and girls know of one?

Implementing a sitewide search function is a post from Joost de Valk's 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 301 for Apache:

header("HTTP/1.1 301 Moved Permanently");
header("Location: http://www.example.com/newpage/");
exit;

PHP 301 for IIS:

header("Status: 301 Moved Permanently");
header("Location: http://www.example.com/newpage/");
exit;

PHP 301 redirects for Apache and IIS is a post from Joost de Valk's 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!

If you use "old-style" CSS hacks, you're bound to end up in trouble once the IE team decides to fix yet another bug. Because that's what these CSS hacks do: they rely upon bugs in IE to make sure it parses the CSS the way YOU want it to. Conditional comments, on the other hand, rely on a built-in feature, provided to you by the IE developer team to work around your problems. Which one of these do you think has the most chance of surviving the coming years? Right.

Richard Rutter gives a very wise comment on Jens' post, basically agreeing with my opinion, but he says the following as well:

In terms of reliable use among teams, it is of course advisable to avoid CC or CSS hacks wherever possible, however as we all know life isn’t that simple. So where IE-specific workarounds are needed, our workflow is to put those rule in a separate style sheet called via CC and - most importantly - to document the normal style sheet where rules are being overwritten (as is normally the case).

Document those overrides, and do that all the time. If you do that, conditional comments are surely the best way to make sure your layout works in al browsers.

The correct way of using conditional comments is a post from Joost de Valk's 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_value session.use_trans_sid 0
php_value session.use_only_cookies 1

I also wanted Google to get a clean URL when it decided to spider one of the old URL's again, and didn't have access to mod_rewrite, so I redirected them with some PHP. The solution is quite simple:

if (isset($_GET['PHPSESSID'])) {
	$requesturi = preg_replace('/?PHPSESSID=[^&]+/',"",$_SERVER['REQUEST_URI']);
	$requesturi = preg_replace('/&PHPSESSID=[^&]+/',"",$requesturi);
	header("HTTP/1.1 301 Moved Permanently");
	header("Location: http://".$_SERVER['HTTP_HOST'].$requesturi);
	exit;
}

PHPSESSID in your URL? Learn to 301 redirect them with PHP is a post from Joost de Valk's 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!

So I implemented this colorpicker, you can check it out on the RSS viewer page of FeedRoll. It absolutely rocks!

FeedRoll is a post from Joost de Valk's 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 problem was caused by the fact that replace only replaced items once, where they should be replaced multiple times. I don't know where Sherman will be using the script yet, once I do I'll of course tell you all about it!

Sortable table script updated to v1.5.5 is a post from Joost de Valk's 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!

As usual, Technorati walks ahead of the pack is a post from Joost de Valk's 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!

It would be so cool if Google, or any other SE for that matter, knew how to handle searches like that. The same could be done for events, resume's etc. Google would probably want to make it simpler, or make another page for it, since I can't see my mum typing in "class:vcard", but the idea is good, and I think something people should be working on.

Update 18-2-2010: It took them a while, but it's hear now: Google & Microformats.

Googling for microformats is a post from Joost de Valk's 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!

Sortable table v1.5 is a post from Joost de Valk's 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!

Hence my FeedBurner History comparison tool was born, go check it out, and give me your feedback!

FeedBurner history comparison is a post from Joost de Valk's 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 makes me want to code more cool FeedBurner tools, which is probably exactly what they intended :). I've been working on a feed compare tool, which allows you to compare the growth of 2 or 3 feeds in one graph. I'll release that soonish!

Cool FeedBurner schwag is a post from Joost de Valk's 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!