Quickly Adding Thumbnails to WordPress Archives

Post thumbnails make archives look much more attractive in my personal opinion, yet they are not natively displayed in the otherwise-beautiful theme shipped with the latest version of WordPress, Twenty Ten.

As is the case with most WordPress stuff, this shouldn’t stop us from adding it in ourselves – this is exactly what we’ll do. I should note that I’m a student of WordPress, and wouldn’t consider myself an expert by any measure, but I do know enough to get around and do so without making a mess (correct me if I proceed to make a mess).

Our goal today is to add a small thumbnail next to our posts on the archive pages of the Twenty Ten theme. Of course what you’ll learn here can easily be applied to most themes. We’ll be making use of primarily two functions, modifying a third, and adding a few lines of CSS to accomplish this today.

We’ll be modifying only two files today, loop.php and style.css. Within loop.php we will add the code to show the image, and within style.css we’ll add the rules to style the post and the image itself. Let’s begin!

loop.php, where the magic happens

Within loop.php we will find and abundance of if-else-statements (at times I will break this down into numerous smaller files to improve readability). Within Twenty Ten version 1.1 we will find a comment on line 122 saying “How to display all other posts.” This is where we will do our initial changes. Look at the two lines following this comment:

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

First we’ll want to determine whether or not the post has a thumbnail associated with it. If there is a thumbnail, we’re going to add a class to the post div which will make some changes to the formatting to accommodate the thumbnail itself. If there is no thumbnail, we’ll leave the post div as-is.

<?php else : ?>
<?php $tnail = has_post_thumbnail() ? "hasthumb" : "nothumb" ; ?>
<div id="post-<?php the_ID(); ?>" <?php post_class($tnail); ?>>
<?php the_post_thumbnail( 'thumbnail' ); ?>

There are a couple of things going on here, so let’s break them down individually. First, we’re building a CSS classname off of the presence (or lack) of a thumbnail. For anybody who might be confused with the syntax, we’re using the ternary operator to do this:

$tnail = has_post_thumbnail() ? "hasthumb" : "nothumb" ;

has_post_thumbnail() returns either true, or false. If it’s true, the value of $tnail will be “hasthumb,” and if it’s false the value of $tnail will be “nothumb”. We then carry that value down into our call to post_class() where it will be added to the beginning of a list of many other classnames generated by WordPress for this post.

Within the div that contains the post itself, we add a call to the_post_thumbnail() function and specify that we want the thumbnail size. This function assumes you want the thumbnail size even if you leave out a value. The thumbnail size is configurable in your settings (settings > media) – for my site I’m using the default 150px by 150px. If the post has a thumbnail, the HTML to show the image will be generated and the image will be placed within the resulting HTML.

Styling the Image

Now we need to style the image. Without adding our CSS, the image will sit on top of the post, which isn’t what we want. Instead, we would like to place the image to the left of the post, with a nice gutter between image and content. For this next step, let’s open up style.css and navigate down to the bottom of the file to add the following:

/* =Post Thumbnails
-------------------------------------------------------------- */
body.home div.post.hasthumb,
body.archive div.post.hasthumb,
body.search div.post.hasthumb {
  padding-left: 170px;
  position: relative;
}
body.home div.post.hasthumb img.attachment-thumbnail,
body.archive div.post.hasthumb img.attachment-thumbnail,
body.search div.post.hasthumb img.attachment-thumbnail {
  position: absolute;
  top: 0; left: -5px;
  border: 5px solid #fefefe;
  box-shadow: 0px 1px 3px #CCC;
  -moz-box-shadow: 0px 1px 3px #CCC;
  -webkit-box-shadow: 0px 1px 3px #CCC;
}

A careful look at these rules will show that they will only apply on the home, archive and search pages. Additionally, the selectors only apply to the posts that have images representing them since they are the only entries that have the hasthumb classname.

That’s it, you should be able to save all changes and begin adding a featured image for each of your posts and find it right along side your excerpt.

Install and Setup of Kohana 3, The

Kohana is the wildly popular PHP Framework used by many developers all over. I’ve used it numerous times in the past on some rather different projects and found it to be pretty versatile and reliable over-all. One of my largest projects received well over 100,000 unique visitors a day, and still managed to hold up exceptionally well under the stress.

This post will serve as nothing more than a guide to installing Kohana version 3.

Environment

In order to run Kohana you will need a server, but don’t worry too much as your average computer will do. I develop on windows (for now) so I typically install WAMPServer, which places Apache, MySQL, and PHP all on my box inside a live server environment so that I can develop on the domain http://localhost/ – awfully handy.

Depending on what operating system you’re using, you may not find WAMPServer to be all that helpful. There are always alternatives: MAMP and XAMPP are two popular ones.

The Classic Download, Copy and Paste Procedure

Like so many other frameworks, we’ll begin with downloading Kohana and extracting the files into our project directory. You can download Kohana 3 from the Kohana download page. At the time of this writing, the latest (stable) version is 3.0.9, which also happens to be the version I’ll use in the following examples.

Extract the contents of your download to your project directory. You may keep the standard /kohana folder that comes in the archive, or you can just pull the files themselves our and into your directory. Once you have this done though, load up your favorite browser and navigate to your project directory to begin the requirements testing.

Kohana checks environment to ensure it can run properly with present configuration.

This stage will test your environment for Kohana┬ácompatibility. Kohana will need to ensure that your server configuration allows for writable log directories, appropriate versions of PHP and so much more. This screen will give you a nice rundown of how you stack up. All green is all good, but if Kohana finds something it doesn’t like (like unwritable directories) be sure to handle it here and refresh to re-check your system.

If you require assistance setting up your server environment to allow for writable directories, or enabling extensions in the PHP library, please consider visiting serverfault, and online peer-reviewed question and answer website for server maintenance.

As indicated in the automated test, once your system is clear you may delete (or rename) the install.php file to continue the process of setting up Kohana 3.

Setting the Base URL

Some of you may have refreshed your browser only to find a aesthetically pleasing (yet heartbreaking) error on your screen. You got antsy, slow down and keep reading (we’re almost done, I promise). The next thing we need to do is update our base bath to the project on our server.

Kohana uses Apache’s mod_rewrite to beautify your url structure. Much of this logic exists within the example.htaccess file found immediately within your Kohana directory. Open this up to make our next edit.

If necessary, let’s update the following line:

# Installation directory
RewriteBase /

If your project is immediately inside your /www or /htdocs folder (your web-server directory) then you can leave this as /, however if you’ve created a project folder to house your Kohana application you need to point this to where that project is. Hint: it’s the same path that we accessed to get to the previous phase, the system check.

My project happens to be in a custom path, so I’ll update my example.htaccess file.

# Installation directory
RewriteBase /projects/demoKohana/website

When you are ready to save this file, save it as .htaccess in the same directory. It’s an odd filename, but trust me on this. This file is handled by Apache and often times contains very important rules for how requests ought to be handled. You can read more about .htaccess on the Apache website.

Now that we’ve modified the .htaccess file, our directory ought to look like this:

Basic Kohana 3 root directory appearance.
  • application (folder)
  • modules (folder)
  • system (folder)
  • .htaccess
  • build.xml
  • DEVELOPERS.md
  • example.htaccess
  • index.php
  • LICENSE.md
  • install.php (deleted or renamed)
  • README.md

If this looks like your directory, you’re well on your way to finishing the setup process.

Once you’ve confirmed your directory structure is correct, we can move on to the the final touches before starting development with the Kohana 3 framework.

Updating the Bootstrap

Our next, and final, step is to update an array found within application/bootstrap.php. Within bootstrap.php, locate the following lines:

Kohana::init(array(
	'base_url' => '/',
));

Here, again, we’ll want to change the base_url value. Within a comment the Kohana developers tell us that this value represents the “path, and optionally domain, of your application.” As such, if you want to provide the domain you are more than welcome to. I will be using a path instead:

Kohana::init(array(
	'base_url' => '/projects/demoKohana/website',
));

Save, and exit.

At this point, if all went as it should, you should be able to refresh your project directory and find one of the most glorious messages developers have enjoyed since 1974.

To the Controller!

By default, Kohana will run the index action of the default Welcome controller. The default controller and action are set within the bootstrap.php file, located just inside the applications folder. Locate the following lines:

Route::set('default', '(<controller>(/<action>(/<id>)))')
	->defaults(array(
		'controller' => 'welcome',
		'action'     => 'index',
	));

If you would like to change the controller and/or action, you may do so here. Instead of changing the present values, I’m going to leave them as they are and simply take a look at the welcome controller. You can find the welcome controller source located inside application/classes/controllers under the filename welcome.php:

<?php defined('SYSPATH') or die('No direct script access.');

class Controller_Welcome extends Controller {

	public function action_index()
	{
		$this->request->response = 'hello, world!';
	}

} // End Welcome

You can see from this code that all the action_index() method does is send the ‘hello, world!’ message directly to the response. No views are being loaded, so we’ll go ahead and load a view now. We’ll start by creating a new file at application/views/welcome.php and placing within it the text “This is my view.” Next, back in our controller we will make the following change to the action_index method body:

//$this->request->response = 'hello, world!';
$this->request->response = View::factory( 'welcome' );

Here we are loading the welcome view into the response. This now allows us to make changes to our applications/views/welcome.php file rather than modifying the output within the controller itself.

Next up, Using Views in Kohana 3.