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

WordPress Development

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. RookieMom Whitney says

    October 16, 2009 at 6:45 pm

    None of my thumbnails are loading and I'm mystified. I'm not trying to do anything fancy – I just want thumbnails on my archive page. We have set up a sandbox version of my site where I am trying to work this out. Any tips would be tremendously appreciated.

    The alt text is showing and the space is reserved in the layout, but the image itself is not loading.

    (See category page: http://sandbox.rookiemoms.com/categories/craft/)

  2. Gigi Gerow says

    October 29, 2009 at 5:31 pm

    In the code for the post category page…I would like to sort the posts by the title…I know that somewhere
    I need to add &orderby=ASC…I just can't quite figure it out.

    Thank you for the information. It is very useful.

  3. Alberg says

    January 7, 2010 at 11:17 pm

    HI Bill.

    Thanks for the tutorial on FCG. I am trying to use the gallery to replace the Thesis multimedia box, so that I can store a dozen images in it, and have them auto rotate. I'd like that to appear on all pages on the site. Any thoughts on how to do that? And one thing I may not be getting – do I have to create a seperate post or page for each image that I want in the gallery? This is different from how I populate the multimedia box – by just dropping images in a folder. Am I missing something? Thanks, Alan

    • Bill Erickson says

      January 9, 2010 at 6:57 am

      Yes, you'll need to create a separate post or page for each image. This is really designed as a way of highlighting your posts or pages, not to just display images.

      If you just want images, google for a jquery image rotator code, then drop that in the custom functions file instead of FCP. You could also use Slideshow Pro (that's what I used on bilpil.com )

      • Bill Scheider says

        October 18, 2010 at 8:51 pm

        Hi Bill
        Thanks for this tutorial! I’m wondering how you integrated the slideshow pro into the thesis theme on the bilpil.com site? I’ve got SSP standalone and the Slidepress plugin installed but can’t figure out how to integrate it into Thesis!

        Can you help?
        Thanks so much
        Bill Scheider

        • Bill Erickson says

          October 18, 2010 at 10:47 pm

          On that specific site I just dropped the standalone code in a function and attached it to the feature box. If you’re using SlidePress you can use the handy template tag.

          add_action('thesis_hook_feature_box','cool_slideshow');
          function cool_slideshow() {
          slidepress_display_gallery();
          }

  4. Christine Green says

    March 25, 2010 at 7:14 pm

    Bill,
    Thanks for this post. I was able to use the code to create a new sidebar. I then added a text widget to that sidebar but is has a bullet "dot" in front of the text (as part of

      I believe…?). I can't figure out how to remove that.
      I'd appreciate help.
      Thanks once again!
  5. Avi D says

    March 30, 2010 at 7:01 am

    Hi Bill,

    That’s a great bit of code. As understand it , this code works for
    A) Individual posts
    B) Page

    The reason is I’ve tried this out in a couple of posts to no avail. I’m in sandbox mode or I’d have dropped you a link. I’ve added the php to custom functions and the css to custom.css.

    Anything I’m missing here?Thanx…

  6. Avinash D says

    April 3, 2010 at 2:28 am

    Beautiful bit of code. A question:

    1) Assuming I wanted only 2 columns of text, how would this be rewritten to slot all text into 2 columns regardless of number of ? What I meant is, assuming I have 3 , I don’t want 3 columns but 2 columns. So I would want the 1st 2 h4’s in column 0 and the 3rd h4 in column 1. The logic would be: Test number of H4. If X>2, take 1 more than half the number of H4 and add to column 0. Add rest to column 1. Hence if 9 H4, 5 h4 to column 0 and 4 h4 to column 1.

    • Bill Erickson says

      April 3, 2010 at 1:21 pm

      All the function does is break <h4>'s into div's, which can then be styled with the custom.css file. So in your instance, I would do page-specific css that was applicable for your specific situation. So on the about page, do something like:

      .custom.about #content-0 { }
      .custom.about #content-1 { }


      Bill Erickson
      WordPress Consultant
      https://www.billerickson.net

  7. John says

    May 5, 2010 at 3:47 am

    Hey Bill,

    I am trying to implement both of these features into one but am unable to get the image to display. Displaying the post titles and excerpts is working fine, but above the title I am getting an empty imc src call <img alt="" src="">

    Basically I would like to have the thesis_post_image output above the Post Title.

    This is essentially how they show up on regular category pages using thesis and populating the thesis_post_image.

    Do you think you could show me how to add that code?

  8. colm flanagan says

    July 21, 2010 at 3:56 pm

    Hi,

    I have been having the same problem from the start with thesis theme and i cant find any help on how to solve it. When i publish a post on the home page the thumbail works 100% but is doesn’t carry over into the category pages….Is there a simple option i am overseeing or is it another issue?? Any advice would be appreciated..

    Thanks

    Colm

    • Bill Erickson says

      July 21, 2010 at 4:01 pm

      Go to Site Options, and in the Archives dropdown make sure you have either “Everything’s a teaser” or “Same as Homepage” selected.

      • colm flanagan says

        July 21, 2010 at 9:42 pm

        Thanks man, so simple and yet it was giving me a headache…Thanks again..

        P.S sorry for submitting the Q twice, very tired 🙂

  9. colm flanagan says

    July 21, 2010 at 9:39 pm

    Can any one tell me why my thumbnails dont carry over from my homepage to my category page in the thesis theme?? Im really struggling to find help on this one..Thanks..

  10. Trisha says

    August 9, 2010 at 2:27 pm

    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.

  11. Gary Cohen says

    October 11, 2010 at 8:22 pm

    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

      August 19, 2011 at 1:48 am

      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?

  12. John says

    November 12, 2010 at 5:05 pm

    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

      November 12, 2010 at 5:27 pm

      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

  13. Bill says

    February 19, 2011 at 5:09 am

    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

      February 19, 2011 at 2:42 pm

      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…

  14. Joshua says

    April 13, 2011 at 9:44 pm

    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

      April 13, 2011 at 10:20 pm

      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

        April 15, 2011 at 10:43 pm

        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

          April 15, 2011 at 10:49 pm

          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

            April 21, 2011 at 3:37 am

            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

  15. Matt Pardo says

    May 12, 2011 at 11:49 pm

    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