Custom Images and Category Pages in Thesis

This post has been marked as old. The code might no longer work. Comments have been disabled as this is no longer maintained. Use the search on the right to find a newer tutorial.

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_cat
if($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 categories
while ($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

Bill Erickson

Bill Erickson is a freelance WordPress developer and a contributing developer to the Genesis framework. For the past 14 years he has worked with attorneys, publishers, corporations, and non-profits, building custom websites tailored to their needs and goals.

Ready to upgrade your website?

I build custom WordPress websites that look great and are easy to manage.

Let's Talk

Reader Interactions

Comments

  1. Trisha says

    it WORKED! been trying to get the post images code for 2 days. Now my category page works, THANK YOU! I like how you use custom fields for your category pages.

  2. Gary Cohen says

    Bill,
    I am helping someone setup category pages and for the life of me I can’t work out why the image does not show. I was able to change to full post – but no image. My friend wants the post to look the way it would on the default blog template. I am using your code as you presented it.
    Thanks,
    Gary

    • Tina says

      Gary,

      I am trying to do the same thing – trying to get it to look exactly as it would on the blog template… can you tell me how you got the entire post to show?

  3. John says

    I am a fairly inexperienced user so please forgive me if this question seems a bit simplistic. I have used thesis to make my categories apear in my navigation bar at the top of my site along with select pages. The problem that I am running into is that thesis automatically lists the pages first and then the categories. I would like one particular page to appear after the categories. Is this possible? How would I achieve this re-ordering? Thank you in advance.

    John

    • Bill Erickson says

      The easiest and best solution (in my opinion) would be to switch from Thesis Nav Menu to WordPress Menus. If you go to Thesis > Site Options you can select the menu type. With a WordPress Menu, you can add Posts, Pages, Categories and Custom Links to the nav menu in whatever order you want. It’s much easier to use than Thesis’ built-in menu, which was built before WordPress menus.

      Another option, if you want to keep using the Thesis Nav Menu, is to create a page with the same name as the category, and under SEO Options for that page set the 301 Redirect URL to the category. More information on that option here: Redirect Pages in Thesis

  4. Bill says

    First, thanks for the tutorials. They are a great resource. I know, an elementary question … how best to implement teaser styling to this custom function?

    • Bill Erickson says

      Unfortunately there’s not an easy way to implement the teaser format. You’ll need to copy the HTML and build your own loop with it. You’ll need a counter so that you can apply certain things to every other post. For example, every two teasers are in a div with a class of “teasers-box”. The second teaser needs the class teaser_right…

  5. Joshua says

    Bill,

    This is great, but if I want to format this page to match my home page, but only for this custom category page (in other words, display full posts instead of excepts and be styled to match). How would I change this code to do that? Right now it all looks unstyled and, well, basic.

    Thanks,
    Joshua

    • Bill Erickson says

      You’ll need to copy the formatting and style from your homepage. View Source, see how it’s put together (what classes are used on divs) and reconstruct it.

      To be honest, it would be easier to add text to the top of a category page rather than build a new category page out of a standard page.

      • Joshua says

        Well, I’m not trying to ad text, I am trying to simulate two blog streams, but just using a different category so they remain on the same rss feed (plus, I don’t want to have a multiblog site). So I have excluded the “news” category from the homepage, now I just need to make a custom “News” page that will appear like the blog page but only with things in the news category.

        I have a feeling I can do it more easily with a custom loop api, but not sure how…

        Thanks for your help, Bill!

        Cheers,
        Joshua

        • Bill Erickson says

          Why not just use the actual category pages? Like /category/news ?

          The custom loop api is definitely a better route for this. This post was originally written almost two years ago, before the custom loop api was available.

          To be honest, even with the custom loop api I always had difficulty duplicating the look/feel of the Thesis blog stream (with its features and teasers). It’s much easier to do in Genesis.

          • Joshua says

            Well, I would use a category page, that was my original idea. But you can’t get the category pages to display full posts formatted like the main page. And if you can (and I don’t know about it), how would you get it to only do this for a single category, while leaving the others to be display how ever else you like?

            That’s what lead me to this post. The only thing I’m having trouble with, actually, is getting the date to display in the byline – everything else is a copy of the main page (minus teasers, which is fine with me). I’ve used your code, modified slightly for a custom page template to display full posts, but I can’t get the_date or get_the_date to work. Thoughts?

            Here’s my post on the thesis forum: http://bit.ly/fbxcC2

            Thanks!
            Joshua

  6. Matt Pardo says

    Bill,

    Thanks for posting this function. My wife has a scrapbooking blog and was looking for something like this and it worked perfectly. Thanks a lot! It saved me a ton of time.

    Matt