For a primer, you should check out my previous post on this topic. There will be some referencing it in this post.

It’s been a couple of years since that post and many things have changed.
The theme AutoFocus has gone through a number of changes. Alan has released a “Pro” (paid) version of the theme with tons of enhancements. He’s also stayed fairly current on releasing updates to the theme. Now both the lite and pro versions are at version 2.0.2 and come with some bells & whistles that just weren’t available when I started using Autofocus.

Even with all of those updates, enhancements, etc… I just didn’t like the direction AutoFocus was going. I was stuck in its 1.x days and loving the way it worked. I love the simplicity, lack of widgets, and overall minimalistic view of the theme. Needless to say, I never upgraded. I’ve made my own modifications to the theme throughout the time I’ve had it, and I like it just the way it is.

The New Issues

So as the title (and the previous post I wrote about it) would suggest, I thought that the single post pages needed the thumbnails of the previous and next posts. I just thought it looked funny without them. With this idea, I set off to make that happen.

Now while that was successful, many people in the comments of that post pointed out enhancements and fixes to my code. I welcomed that and modified it accordingly.

A couple of weeks ago while I was upgrading some other themes I was updating the very popular TimThumb script. It is used for dynamic re-sizing of images and has been very successful in doing so in many WordPress themes. I thought to myself, why not utilize this script in AutoFocus? Why didn’t I think of that before?

Now what I have is a post image thumbnail where I supply what I want TimThumb to resize the height to, and it adjusts the width proportionality. TimThumb also has a whole host of other settings it can do. I suggest you check it out and see for yourself.

The New Solution

So what I’ve done now is revamped the way the previous/next post thumbnail gets displayed as well as turning the code into a function so I can just plop it into my single.php file.

  1. First things first, go grab TimThumb and copy it into your theme directory. Rename this file thumb.php (if you’re following my example exactly) or edit the call to it on line 18 and 36.
  2. Paste the following function into your theme’s functions.php file. <pre class="brush: php; collapse: false; highlight: [16,17,18,19,20,21,22,34,35,36,37,38,39,40]; title: ; toolbar: false; wrap-lines: true; notranslate" title="">/* Previous / Next Post Image Thumbnails */

function tq_prev_next_post() {

	echo '&lt;div id="nav-below" class="navigation"&gt;';

	$previouspost = get_previous_post($in_same_cat, $excluded_categories);
 
	if ($previouspost != null) {
		echo '&lt;div class="nav-previous"&gt;';
		previous_post_link('%link &laquo; Previous');
		echo '&lt;div class="nav-excerpt"&gt;&lt;p&gt;';
 
		/* Show previous Post's Thumbnail */
		$tq_previouspost_img = get_post_meta($previouspost-&gt;ID, "image_url", $single = true);
		$tq_previouspost_img = get_bloginfo('template_url') . "/thumb.php?src=" . $tq_previouspost_img . "&h=150&q=70&s=1";
		$tq_previouspost_title = get_post($previouspost-&gt;ID);
		$tq_previouspost_title = $tq_previouspost_title-&gt;post_title;
		echo '&lt;img class="post-thumb alignleft size-thumbnail" src="' . $tq_previouspost_img . '" alt="' . $tq_previouspost_title . '" /&gt;';
		/* End previous thumbnail */			
 
		previous_post_excerpt();
		echo '&lt;/p&gt;&lt;/div&gt;&lt;/div&gt;';
	} 
	$nextpost = get_next_post($in_same_cat, $excluded_categories);
 
	if ($nextpost != null) {
		echo '&lt;div class="nav-next"&gt;';
		next_post_link('&lt;span style="text-align:right;"&gt;Next &raquo; %link &lt;/span&gt;');
		echo '&lt;div class="nav-excerpt"&gt;&lt;p&gt;';
 
		/* Show Next Post's Thumbnail */
		$tq_nextpost_img = get_post_meta($nextpost-&gt;ID, "image_url", $single = true);
		$tq_nextpost_img = get_bloginfo('template_url') . "/thumb.php?src=" . $tq_nextpost_img . "&h=150&q=70&s=1";
		$tq_nextpost_title = get_post($nextpost-&gt;ID);
		$tq_nextpost_title = $tq_nextpost_title-&gt;post_title;
		echo '&lt;img class="post-thumb alignright size-thumbnail" src="' . $tq_nextpost_img . '" alt="' . $tq_nextpost_title . '" /&gt;';
		/* End Next thumbnail */			
 
		next_post_excerpt();
		echo '&lt;/p&gt;&lt;/div&gt;&lt;/div&gt;';
	}
	echo '&lt;/div&gt;&lt;!-- #nav-below --&gt;'; }</pre>
  1. Edit your single.php file. You’re going to replace the <pre class="brush: xml; light: true; title: ; notranslate" title=""><div id=”nav-below”> … </div></pre>

    section with the function we just created. Replace it with <pre class="brush: php; light: true; title: ; notranslate" title=""><?php tq_prev_next_post(); ?></pre></li> </ol>

    That’s it. Again it would be best if you have any questions to first look at my original post as to where these chunks of code go and how the overall code block should look.

    Here’s what it looks like now.

    You can also see it in action by visiting my Photoblog.


TQuizzle

TQuizzle.com is my place to talk about whatever. I really don't post here much anymore what with all the other domains I own, but I'm putting it up on GitHub so that it can be seen for archive puposes.