Custom Images and Category Pages in Thesis

As I’ve been working with Thesis a lot lately, I thought it would be a good idea to start posting some tips for customizing it. This post covers customizing post image/thumbnails and displaying category posts on pages.

As I've been working with Thesis a lot lately, I thought it would be a good idea to start posting some tips for customizing it. If you need help with Thesis or Wordpress, please review my Wordpress Consulting page.

1. Custom Use of Post Image and Thumbnails

Thesis has a great tool for adding images to posts, and when making customizations you might need to access those images. Thesis stores the URL for the post image in a custom field titled thesis_post_image, so assign it to a variable like this:

global $post;
$post_image = get_post_meta($post->ID, 'thesis_post_image',$single=true);

You can then use $post_image to plug the image url where you want it, like :

<a href="<?php the_permalink() ?>"><img src="<?php echo $post_image ?>" alt="" /></a>

If you would like to use a thumbnail of this image, you'll need to use the thumb.php script included with Thesis (found in /lib/scripts/thumb.php). There's five parameters you can use:

  • src= url to the image
  • w= the width of your thumbnail
  • h= the height of your thumbnail
  • zc= whether it should zoom (0) or crop (1) the original image
  • q= quality, the default is 75 and max is 100

To make a thumbnail, you simply link to thumb.php script and include the parameters. Here's an example:

<img src="<?php bloginfo('template_url'); ?>/lib/scripts/thumb.php?src=<?php echo $post_image ?>&w=66&h=66&zc=1&q=100" width="66" height="66" alt="Thumbnail image for <?php echo $post->post_title ?>" />

The red part is the link to the thumb.php script, the green is the link to the original image, and blue is the other four parameters defining the thumbnail.

2. Displaying Category Posts on a page

United4Iran.org organized events in over 100 cities, and created a page for each city with relevant information. They wanted a way to show relevant posts on those pages (we define "relevant posts" as posts in a certain category; posts for the Austin, TX page are in the "austin" category). We used a custom function so Thesis could be updated in the future without causing problems to our customizations.

When the client wants to add a post category to a page, he simply adds the category ID to the page's custom field called custom_cat_page. The page will then list the 10 most recent posts from those post categories, and provide a link to the archive page for more.

I'll work through the custom function, detailing what each part does (the parts beginning "//" are my comments).

function custom_cat_page() {
global $post;
$temp_query = $post;
// This loads the data on the current post and saves it in $temp_query (so we can get it later)$postID = $post->ID;
$custom_cat = get_post_meta($postID, 'custom_cat_page',$single=true);
// Save the custom field 'custom_cat_page' to $custom_catif($custom_cat){
// If the custom field is in use...?><?php
$posts = new WP_Query('cat='.$custom_cat.'&showposts=10');
// Get the 10 most recent posts from the specified categorieswhile ($posts->have_posts()) : $posts->the_post();
?>
<h3><a href="<?php the_permalink() ?>"><?php echo $post->post_title ?></a></h3>
<?php the_excerpt();
// Show the post title and excerpt.endwhile;
?>
<p><a href="/?cat=<?php echo $custom_cat;?>">View the Archives</a></p>
// Link to the archives page for the categories<?php
$post = $temp_query;
// Reset $post back to its original content}
?>
<?php
}
add_action('thesis_hook_after_post','custom_cat_page');
// Add this function after the page's content

No comments yet