WordPress: Display categories as image blocks

CMS & WordPress
1

Hi everyone,

I am trying to display my WordPress categories as tiled images - the image coming from the most recent article’s featured image. The image will then link to the category.

The image is showing fine, but the link to the category page doesn’t work…


<?php $category = get_the_category(); 
	if($category[0]){
		echo '<a href="'.get_category_link($category[0]->term_id ).'">'.the_post_thumbnail('thumbnail').'</a>';
	}
?>
<?php $category = get_the_category(); echo $category[0]->cat_name; ?>

This code outputs the following code:


<img width="226" height="185" src="IMAGE URL" class="attachment-thumbnail wp-post-image" /><a href="CATEGORY URL"></a>
Category Name

What I wanted was the following output:


<a href="CATEGORY URL">Category Name <img width="226" height="185" src="IMAGE URL" class="attachment-thumbnail wp-post-image" /></a>

Any ideas?

Thanks,
Simon

2

Try:


$category = get_the_category(); 

if($category[0]){
    $link = get_category_link($category[0]->term_id );
    $cat_name = $category[0]->cat_name;
    $thumbnail = the_post_thumbnail('thumbnail');

    echo "<a href='$link'>$cat_name $thumbnail</a>";
}
3

Am I doing something wrong? I inserted the code (with PHP tags as:


<?php $category = get_the_category(); 
		if($category[0]){
	    $link = get_category_link($category[0]->term_id );
	    $cat_name = $category[0]->cat_name;
	    $thumbnail = the_post_thumbnail('thumbnail');

	    echo "<a href='$link'>$cat_name $thumbnail</a>";
	} ?>

Thank you

4

Sorry, that did work, it was other code breaking it, however, that insets the starting anchor tag after the image:

This is the produced code:


<img width="226" height="185" src="IMG URL" class="attachment-thumbnail wp-post-image" alt="" /><a href='LINK URL'>Category name</a>

Is there a way to get the a tag wrapping the image?

5

Wow…that is really bizarre!?

Try breaking it up into separate echo statements, like this:


<?php $category = get_the_category(); 
	if($category[0]){
    $link = get_category_link($category[0]->term_id );
    $cat_name = $category[0]->cat_name;
    $thumbnail = the_post_thumbnail('thumbnail');

    echo "<a href='$link'>";
    	echo $cat_name;
    	echo $thumbnail;
    echo '</a>';
} ?>

If that doesn’t work, I don’t know what to tell ya :frowning:

6

Yeah this outputs the same code… link after the image.

Thanks very much for looking for me though :slight_smile:

7

It’s working with the code below, but it is repeating the categories for each post, so, say there are 5 categories - instead of just listing the 5 categories, with the latest post’s feature image, it is repeating each category depending on how many posts there are.

Not sure if I am explaining this well. Say we have 3 categories: dogs, cats and rabbits.
Then there are 6 posts, 3 in dogs, 1 in cats, 2 in rabbits.

The current code is outputting all 6 posts as categories.

Is there a way to just output the 3 categories, with the image from the most recent post? So in my above example, it would only output 3: dog cat, cat cat (lol) and rabbit cat.


<?php
$category = get_the_category();
if ( isset($category[0]) && !empty($category[0]) ) {
	$link = get_category_link($category[0]->term_id );
	$cat_name = $category[0]->cat_name;

	echo '<a href='.$link.'>'.$cat_name;
	the_post_thumbnail( 'thumbnail' );
	echo '</a>';
}
?>
8

OH RIGHT!

For all the examples above you should have been using “get_the_post_thumbnail”, and not “the_post_thumbnail”. The “the_post_thumbnail” echos the string out, the “get_the_post_thumbnail” returns the string. That’s why we were having that issue…

As for your new problem…Wow that’s really confusing haha. I’ll need to see the loop it’s in, I’m assuming its a foreach loop? In the meantimes:

  • get_the_category() will only get the category for the CURRENT page. Try get_the_category($id), where $id is that of the current post in your loop
  • same thing with the thumbnail, make sure to use [get_] the_post_thumbnail($id, ‘thumbnail’);
9

Haha sorry, hard one to explain!

The loop it is in is:


<?php if ( have_posts() ) while ( have_posts() ) : the_post(); ?>
<div class="thumb gThumb">
	<a href="<?php the_permalink(); ?>">
		<div class="captionContainer">
			<div class="caption">
				<h2><?php the_title(); ?></h2>
				<?php
					$customfields = get_post_custom();
					$shortdescript = $customfields['short_description'][0];
				?>
				<p><?php echo $shortdescript ?></p>
			</div><!--caption-->
		</div><!--captionContainer-->
		<?php 
			// check if the post has a Post Thumbnail assigned to it.
			if ( has_post_thumbnail() ) {
				the_post_thumbnail('thumbnail');
			}
		?> 
	</a>
</div><!--thumb-->
<?php endwhile; ?>