Display thumbnails from each category WordPress
- SOLVED
I currently have this code on the home-page of my site. This produces a thumbnail for the 20 latest images from all categories apart from '24':
<?php $recent = new WP_Query("cat=-24,$image_cat&showposts=20"); while($recent->have_posts()) : $recent->the_post();?>
<a href="<?php the_permalink() ?>"><img style="float:left; margin:0px 18px 18px 0px;" src="/wp-content/themes/portfolio/scripts/timthumb.php?src=<?php echo get_post_meta($post->ID, "image", true); ?>&h=225&w=225&zc=1&q=100" alt="<?php the_title(); ?> by Andrew Areoff" /></a>
<?php endwhile; ?>
What I'd like to do is display one thumbnail from each category (say the latest image if that's easier) on the home-page instead of the above scenario. I'd also like to display the title of the category. This thumbnails would then link through to the respective category page.
Any ideas on the code to produce this?
Answers (6)
Dan Fraticiu answers:
Final solution:
<h3>List categories</h3>
<ul>
<?php
$categories = get_categories('exclude=28');
foreach($categories as $cat){
echo '<li style="float: left;">';
$catPost = get_posts('numberposts=1&category='.$cat->cat_ID.'');
$post = $catPost[0];
setup_postdata($post);
echo '<a href="'.get_category_link( $cat->cat_ID ).'"><img style="margin:0px 18px 18px 0px; height: 225px; width: 225px; display: block;" src="/wp-content/themes/portfolio/scripts/timthumb.php?src='.get_post_meta($post->ID, "image", true).'&h=225&w=225&zc=1&q=100" alt="'.$post->title.'" /></a>';
echo '<h4><a href="'.get_category_link( $cat->cat_ID ).'">'.$cat->cat_name.'</a></h4>';
echo '</li>';
}
?>
</ul>
Andy Essex comments:
What did you misunderstand, so perhaps I can clarify?
Dan Fraticiu comments:
Andy, english is not my main language so that might be the cause of the misundertanding. from what I get is that you want a list of all the categories you have. Each list item has the name of the category and a thumbnail. So here we go:
<h3>List categories</h3>
<ul>
<?php
$categories = get_categories('exclude=28');
foreach($categories as $cat){
echo '<li>';
echo '<h4><a href="'.get_category_link( $cat->cat_ID ).'">'.$cat->cat_name.'</a></h4>';
$catPost = get_posts('numberposts=1&category='.$cat->cat_ID.'');
$post = $catPost[0];
setup_postdata($post); ?>
<a href="<?php the_permalink(); ?>"><img style="float:left; margin:0px 18px 18px 0px;" src="/wp-content/themes/portfolio/scripts/timthumb.php?src=<?php echo get_post_meta($post->ID, "image", true); ?>&h=225&w=225&zc=1&q=100" alt="<?php the_title(); ?> by Andrew Areoff" /></a>
<?php echo '<li>';
}
?>
</ul>
The code generates an unordered list, each item contains the category name (+link) and a thumbnail (+link). The thumbnail is the taken from the latest post in each category.
Hope this is what you were looking for. If not you could rephrase.
Andy Essex comments:
This almost works and your English is better than my ???
Please see the screenshot I have attached.
All I need to do now is get the wording text to appear underneath the image.
For instance 'Beach Huts' should appear underneath the first image you see of beach huts.
Can you help me with this?