WordPressCreme.com

Use a quality host

Maybe I’m stating the obvious, but don’t expect to get the speed of a Ferrari on a crappy shared host. When your blog is young, new, and receives only a few visits per hour, most web hosts are good. But the day your site becomes more popular, you’ll see it takes a while to load.

I remember when Cats Who Code were hosted at one.com, all was fine until I started to get more than 5000 unique visitors per day. Then, my blog loading time started to degrade. Most websites have to switch from a hosting plan to another, and some have to switch to a new host. I switched to WpWebHost and I’m happy with them. I’ve heard a lot of good things about HostGator as well so you might want to check them out.

Be careful with external requests

When your blog loads slowly, a definite question to ask yourself is, “Do I really need that stupid widget?” or “Is Google Adsense a good thing for my blog?” and so on. In fact, it is funny to see how many people are struggling with loading time when not thinking that maybe, the super widget you placed in your sidebar was a piece of crap.

Each widget like “Facebook fans”, “Latest Twitter entries”, advertisements such as Google Adsense and buttons like the well-known Digg button have to load content from other sites. By using these, you are making your site dependent on other sites. If you’re using a Digg button in your blog, and the whole Digg site is down, your blog will not load correctly.

Make use of caching

The first two tips I gave you should have already helped you a lot to get a quicker loading website; but, especially in case of high traffic websites, this may be not enough.

Caching is a popular technique that has proven great results. The following example features a very simple caching implementation:

<?php
// start the output buffer
ob_start(); ?>

//Your usual PHP script and HTML here ...

<?php
$cachefile = "cache/home.html";
// open the cache file "cache/home.html" for writing
$fp = fopen($cachefile, 'w');
// save the contents of output buffer to the file
fwrite($fp, ob_get_contents());
// close the file
fclose($fp);
// Send the output to the browser
ob_end_flush();
?>

Don’t hesitate to check out this interesting post if you want to learn more about caching.

If you’re running a WordPress blog, a very handy plugin is Wp Super Cache. Easy to install and configure, Wp Super Cache will create static versions of your WordPress blog pages so it can load quicker.
It’s a must have for all blogs with lots of traffic.

Minify is your friend

Minify is a PHP5 app that combines multiple CSS or Javascript files, removes unnecessary whitespace and comments, and serves them with gzip encoding and optimal client-side cache headers. Take a look at the following screenshot to see how helpful Minify is:

The stats above are from a brief walkthrough which shows how easy it is to set up Minify on an existing site. It eliminated 5 HTTP requests and reduced JS/CSS bandwidth by 70%.

To install minify on your website or blog, Download it and unzip the files to a new directory.
Copy the min directory directly into your document root, and you’re done!

Free, easy to install, and extremely powerful, Minify is a real life saver for me and I recommend it to any traffic website owner.

Store media elsewhere

When a site is popular, it tends to use lots of bandwidth. For exemple, a basic blog post with images can eat up to 2GB of bandwidth after making Digg front page, as my highly controversial anti-IE post did a while ago.

To reduce bandwidth usage and consequently make your website load a lot faster, the solution chosen by many highly popular sites is to store media on other servers.

Many services are allowing you to upload your media on their servers. The following list are the most popular sites for storing you website media:
Amazon S3 : Premium service, cost of 15 cents per GB of storage, and 20 cents per GB transfer.
Flickr : Provides both free/limited account and pro account, for $25/year.
Photobucket : provides a free account which let you store up to 10 GB. Paid account cost $25/year.
ImageShack : Storage unlimited, but bandwidth transfer is limited to 100 Mo/hour.

Additional good practices

Above, I have listed my favorite tips to reduce loading time. Those tips are efficient and if you apply them, there’s no doubt that you’ll see a strong loading speed improvement. But there’s many additional tips that you can use to significantly improve your site performance.

For example, I recently heard that you shouldn’t use the @import CSS directive in order to limit extra loading time.
Another thing you should be interested in is how to compress CSS files with PHP, a very nice way to save bandwidth.

Any other tip you’d like to share? Feel free to let me know in a comment.

Have you checked out the highly recommended Digging into WordPress book by Chris Coyier and Jeff Starr?

How to speed up your blog loading time

Monetizing your old blog posts

Let’s start this post with a nice hack dedicated to help you make more money online, initially published on my other blog Cats Who Blog.
If you don’t want to bore your loyal readers but still want to earn some bucks, what about monetizing only your old blog posts instead? This code will add some advertisements only if the post is more than 15 days old.

The following function has to be pasted in your functions.php. If you are using the Thesis theme this file is named custom_functions.php.

function is_old_post($post_id=null){
   $days = 15;
   global $wp_query;
   if(is_single() || is_page()) {
      if(!$post_id) {
         $post_id = $wp_query->post->ID;
      }
      $current_date = time();
      $offset = $days *60*60*24;
      $post_id = get_post($post_id);
      $post_date = mysql2date('U',$post_id->post_date);
      $cunning_math = $post_date + $offset;
      $test = $current_date - $cunning_math;
      if($test > 0){
         $return = true;
      }else{
         $return = false;
      }
   }else{
      $return = false;
   }
   return $return;
}

Once you’ve successfully inserted the code in your function.php file, you are now ready to call the functions in your single.php template as shown below:

<?php if(is_old_post()){ ?>
INSERT AD CODE HERE
<?php } ?>

Source : http://www.catswhoblog.com/how-to-monetize-your-old-blog-posts

Display your posts word count

Many people asked me about being able to get the post word count and display it. It is definitely easier to do than you may think at first.
Simply open your functions.php file and paste this function in it:

function wcount(){
    ob_start();
    the_content();
    $content = ob_get_clean();
    return sizeof(explode(" ", $content));
}

Once finished, you can call the function within the loop to get the number of words for the current post:

<?php echo wcount(); ?>

Source : http://www.wprecipes.com/wordpress-function-to-display-your-posts-words-count

Detect the visitor browser within WordPress

One of my favorite WordPress hacks of the year is definitely this one, which is incredibly useful. While conditional comments are a great way to target specific browsers, WordPress has one detection function that you can use to make your web developer life easier.

<?php
add_filter('body_class','browser_body_class');
function browser_body_class($classes) {
	global $is_lynx, $is_gecko, $is_IE, $is_opera, $is_NS4, $is_safari, $is_chrome, $is_iphone;

	if($is_lynx) $classes[] = 'lynx';
	elseif($is_gecko) $classes[] = 'gecko';
	elseif($is_opera) $classes[] = 'opera';
	elseif($is_NS4) $classes[] = 'ns4';
	elseif($is_safari) $classes[] = 'safari';
	elseif($is_chrome) $classes[] = 'chrome';
	elseif($is_IE) $classes[] = 'ie';
	else $classes[] = 'unknown';

	if($is_iphone) $classes[] = 'iphone';
	return $classes;
}
?>

The final result will look something like this, if you view the source code of your page:

<body class="home blog logged-in safari">

Source : http://www.nathanrice.net/blog/browser-detection-and-the-body_class-function/

Get short urls for social bookmarking

With the rise of Twitter and its 140 characters limit, bloggers have to use short urls to fully take advantage of this new social media phenomenon.
Lots of quality url shorteners are available, but this trick will create a shorter version of your urls automatically, making you save time and hassle.
Paste the following code on your single.php file:

<?php echo get_bloginfo('url')."/?p=".$post->ID; ?>

It will output a url similar to:

http://www.catswhocode.com/?p=54

Source : http://www.wprecipes.com/how-to-get-short-urls-for-social-bookmarking

Get the first image from the post and display it

This hack has been a favorite of WpRecipes during the year 2009. And I understand that because this hack is very useful, especially for “magazine” themes: It allows you to automatically get the first image from the current post, and display it.

The first thing to do is to paste the function below on your functions.php file.

function catch_that_image() {
  global $post, $posts;
  $first_img = '';
  ob_start();
  ob_end_clean();
  $output = preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $post->post_content, $matches);
  $first_img = $matches [1] [0];

  if(empty($first_img)){ //Defines a default image
    $first_img = "/images/default.jpg";
  }
  return $first_img;
}

Once finished, you can simply call the function within the loop to display the first image from the post:

<?php echo catch_that_image() ?>

Source : http://www.wprecipes.com/how-to-get-the-first-image-from-the-post-and-display-it

Use SSL on wp-admin directory

On the internet, security is always a concern. If your hosting provider supports it (Wp WebHost and HostGator does) you should definitely enable SSL support.
SSL is a cryptographic protocol that provide security and data integrity for communications over TCP/IP networks such as the Internet. TLS and SSL encrypt the segments of network connections at the Transport Layer end-to-end.
Open the wp-config.php file and paste the following:

define('FORCE_SSL_ADMIN', true);

Next, save the file, and you’re done!
Source : http://www.wprecipes.com/how-to-force-using-ssl-on-wp-admin-directory

Enhancing the search function

WordPress has a built-in “search” function which isn’t bad, but should have been better. For example, one of the things that could enhance it is to highlight the search results.
To do so, open your search.php file and insert this code:

<?php
	$title = get_the_title();
	$keys= explode(" ",$s);
	$title = preg_replace('/('.implode('|', $keys) .')/iu',
		'<strong class="search-excerpt">\0</strong>',
		$title);
?>

Then, you’ll have to define a style for the search-excerpt CSS class. Just open style.css and paste:

strong.search-excerpt { background: yellow; }

Source : http://yoast.com/wordpress-search/

Post on your WordPress blog using PHP

Many of you have enjoyed my “Awesome things to do with cURL” article, published in June. One of the most interesting snippets from that article is showing how to post articles on your WordPress blog, using PHP and cURL.

Here is the function. This code is not made for being used within WordPress, so don’t paste it on your functions.php file (or any other).

Please note that you must activate the XMLRPC posting option in your WordPress blog. If this option isn’t activated, the code will not be able to insert anything into your blog database. Another thing, make sure the XMLRPC functions are activated on your php.ini file.

function wpPostXMLRPC($title, $body, $rpcurl, $username, $password, $category, $keywords='', $encoding='UTF-8') {
    $title = htmlentities($title,ENT_NOQUOTES,$encoding);
    $keywords = htmlentities($keywords,ENT_NOQUOTES,$encoding);

    $content = array(
        'title'=>$title,
        'description'=>$body,
        'mt_allow_comments'=>0,  // 1 to allow comments
        'mt_allow_pings'=>0,  // 1 to allow trackbacks
        'post_type'=>'post',
        'mt_keywords'=>$keywords,
        'categories'=>array($category)
    );
    $params = array(0,$username,$password,$content,true);
    $request = xmlrpc_encode_request('metaWeblog.newPost',$params);
    $ch = curl_init();
    curl_setopt($ch, CURLOPT_POSTFIELDS, $request);
    curl_setopt($ch, CURLOPT_URL, $rpcurl);
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
    curl_setopt($ch, CURLOPT_TIMEOUT, 1);
    $results = curl_exec($ch);
    curl_close($ch);
    return $results;
?>

Source : http://www.wprecipes.com/post-on-your-wordpress-blog-using-php

Rewrite author name with custom field

If you often invite other bloggers to post on your blog, this tip is a must have. It simply allows you to create a custom field with the name of the guest author, and it will overwrite the the_author(); functions.
Simply paste the following code on your single.php and page.php, where you want the author name to be displayed.

<?php $author = get_post_meta($post->ID, "guest-author", true);
if ($author != "") {
    echo $author;
} else {
    the_author();
}  ?>

Source : http://www.wprecipes.com/rewrite-author-name-with-custom-field

Detect mobile visitors on your WordPress blog

Mobile devices as such the Blackberry or iPhone are more and more popular everyday, and this is why you definitely should take those readers in consideration by offering them a mobile version of your blog.
This hack is definitely easy to implement, thanks to Jeff Starr and Chris Coyier, the author of the excellent “Digging into WordPress” book.

To achieve this recipe, you first have to get the code from detectmobilebrowsers.mobi and upload it to your theme directory.

Then, simply open your header.php file and place the following at the top of the file. Don’t forget to edit line 5 according to the page where you’d like to redirect mobile users.

include('mobile_device_detect.php');
$mobile = mobile_device_detect();

if ($mobile==true) {
  header( 'Location: http://your-website.com/?theme=Your_Mobile_Theme' ) ;
}

Source : http://digwp.com/2009/12/redirect-mobile-users-to-mobile-theme/

By the way, if you’d like to win a premium WordPress theme, check out the contest I’m currently running on Cats Who Blog.

Have you checked out the highly recommended Digging into WordPress book by Chris Coyier and Jeff Starr?

Top WordPress hacks of 2009

Create a Letterpress Effect with CSS Text-Shadow

Let’s start this list of tutorials with one that will definitely show you the potential of the text-shadow property. In this tutorial, you’ll learn how to create a stunning (and very popular these days) text effect using CSS and the text-shadow property.

» Read tutorial

Creating cross browser compatible CSS text shadows

Since text-shadow is a part of CSS3, some browsers (who said IE??) have not implemented it yet, and some hacks need to be used to make it work properly.
The following article will show you how to create cross browser compatible text shadows.

» Read tutorial

Improve the Quality of Bold Text in Safari with text-shadow

Although Mac OS X has a pretty good font rendering engine, bold text in Safari is often a bit dirty. Did you know that by using the text-shadow property you can create beautiful bold text? This article will show you how to.

» Read tutorial

CSS text-shadow Fun: Realtime Lighting Demo

Using the text-shadow CSS property as well as some JavaScript, humorous experimental effects can be created. If you haven’t already, you can definitely say goodbye to Flash.

» Read tutorial

Cross browser text shadow

The filter non-standard property, which has been created by Microsoft, can fix some compatibility issues with IE 6, 7 and 8.
This interesting article will show you how to efficiently use the filter property to create text effects similar to those you can get with text-shadow.

» Read tutorial

Mootools text drop-shadow

When you need full cross-browser compatibility and still want to use CSS3 properties, JavaScript is always here to help. This tutorial will show you how to recreate the text-shadow CSS property using the MooTools JavaScript framework.

» Read tutorial

Text embossing technique with CSS

Text embossing is very popular in the world of web design and front-end web development. Indeed, even if I’m quite bored to see it on so many websites, it looks very nice.
And it is also very easy to implement. Just read this tutorial and you’ll know how to do it.

» Read tutorial

Photoshop like effects using CSS

Some browsers allow multiple values to the text-shadow property, which allow you to create effects like this one. I don’t think I’ll implement that kind of effect on any of my websites, but I’m happy to know how I can do it.

» Read tutorial

“Acid” text effect using text-shadow

Another nice text effect created using the text-shadow property. The page is in German, but fortunately everyone can understand the CSS code.

» Read tutorial

Super awesome buttons with CSS3

CSS buttons are very cool and they are a nice way to use your CSS3 skills. In this great tutorial, you’ll learn how to create stunning buttons using text-shadow and a few other CSS3 properties.

» Read tutorial

Have you checked out the highly recommended Digging into WordPress book by Chris Coyier and Jeff Starr?

10 resources to get the most out of the CSS text-shadow property