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
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.
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
Bill Erickson says
I’d have to see the code and live site to know what’s going on.
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?
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
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…
Bill says
Gotcha. Thanks for your time …
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
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