You know WordPress 3.0 was introduced couple weeks back and I was so excited that Matt and their team have done a beautiful job of implementing “Featured Images”, which allow you to make a “dynamic magazine” style theme, while not hindering performance of your WordPress.
Before WordPress 3.0 was out, I had been using my own custom code, which uses ImageMagick to re-size images so I can fit them into my custom magazine-style theme.
But you know, it looked awful, I never liked it nor was it optimized. My blog loaded slow because images were being re-sized on-the-fly and took a lot of server resources, especially this blog has a TON of content, 11,667 blog posts to day with each of those blog posts containing 1-3 images.
So, today, I took the time out to throughly study the new Featured Images feature on WordPress 3.0. I was able to quickly turn my blog into a more “dynamic” magazine style for the home page.
In the process, I’ve documented the process so you can customize your existing WordPress theme and take advantage over the new Featured Image feature.
I found that documentation on this subject matter was lacking so I am sure it will help you.
How to Implement Featured Images into your Existing Blog Theme!
1. First, you need to go edit your functions.php file in your themes folder. At the top, add these lines:
add_theme_support( 'post-thumbnails' );
// set_post_thumbnail_size( 650, 200, true );
//set_post_thumbnail_size( HEADER_IMAGE_WIDTH, HEADER_IMAGE_HEIGHT, true );
function twentyten_continue_reading_link() {
return ' ' . __( 'Continue reading ', 'twentyten' ) . '';
}
function twentyten_auto_excerpt_more( $more ) {
return ' …' . twentyten_continue_reading_link();
}
add_filter( 'excerpt_more', 'twentyten_auto_excerpt_more' );
function twentyten_custom_excerpt_more( $output ) {
if ( has_excerpt() && ! is_attachment() ) {
$output .= twentyten_continue_reading_link();
}
return $output;
}
add_filter( 'get_the_excerpt', 'twentyten_custom_excerpt_more' );
This line:
add_theme_support( 'post-thumbnails' );
Activates your post thumbnails feature in your theme.
You can verify by editing any of your blog posts, you should see the following option under the right hand side like this:
For this line:
//set_post_thumbnail_size( 650, 200, true );
I’ve commented it out because you can actually change this value in your WordPress dashboard, which I will show you.
2. Next, make sure you have WordPress 3.0 installed!
3. Next, let’s installed this plug-in called “fw-post-image”, you can find it under Plugins->Find New. What this plugin does is automatically finds the first image in your posts so on a blog post you didn’t set a “featured image”, it will automatically pull it for you. Since I have over 11,000 blog posts, it’s nearly impossible for me to set Featured Image on my previous blog posts but this plugin does it for you.
But if you don’t have 11,000 blog posts like me, you can just skip this step.
4. Once those are installed, go to your loop.php file (or sometimes you won’t use a loop.php file, you might just be coding straight on index.php, archive.php, etc…etc…).
In the loop, you can add the following lines to add post thumbnails:
the_post_thumbnail('thumb', 'class=alignleft');
This will bring up my thumbnails with image alignment to the left.
5. (Optional) You can also do cool things like randomly moving the image to the left or right.
< ?php
srand(time());
$strand=rand()%2;
if($strand==0)
the_post_thumbnail('thumb', 'class=alignleft');
else
the_post_thumbnail('thumb', 'class=alignright');
?>
What I did is actually have every 4th image aligned to the right like this:
(You can see my homepage to see this in effect. I found that Lifehacker did something like this (not exactly) but I created my own style out of it.)
< ?php
$zcount++;
if(($zcount%4)==0)
the_post_thumbnail('thumb', 'class=alignright');
else
the_post_thumbnail('thumb', 'class=alignleft');
?>
At this point, I got to pull the thumbnail images (since WordPress 3.0 makes thumbnails of ALL your older blog posts too) like this:
6. (Optional) Now, I want a bit more customization and want larger thumbnails, not the boring default 150×150 pixels.
So, let’s go into our WordPress dashboard and go to Media then uncheck “Crop thumbnail to exact dimensions (normally thumbnails are proportional)” and also set the maximum width and height you’d like.
After that, you should see a cool “dynamic” magazine-style theme like this where images are displayed as big as possible within your maximum limits:
Although it’s not perfect yet, I find this more “dynamic” and magazine-like versus my old theme.
For comparison, check out my old theme versus the new one:
(The Old)
(The New)
The best part about this(my) customization with the first post pull and more random-sized images is that I can always highlight the blog posts I want by “setting” a large image on the “Featured Image”. (Yes, you can still set it to highlight your best blog posts.)
It’s not perfect yet and I will be hacking it more but I like it more. I might have to adjust the maximum width and height values now but it’s getting there.
Btw, I am writing this blog post while editing this blog’s very own blog theme “live”.
Hope that helps!
Also, if you want to learn more about how this new feature works in detail, check out Mark’s blog post on featured images, which I learn from and wrote this blog post! Thanks Mark!
And also, you can refer to the TwentyTen default theme of WordPress 3.0, from which I copied most of my code. There’s more features you can implement, I just only highlighted the ones I needed for my project.
