Display categories as image blocks

  • 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 Code:

    <?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>';
} ?>

    This code outputs the following code:

    HTML Code:
    <img width="226" height="185" src="IMAGE URL" class="attachment-thumbnail wp-post-image" /><a href="CATEGORY URL">Category</a>
    Category Name
    What I wanted was the following output:

    HTML Code:
    <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

Viewing 5 replies - 1 through 5 (of 5 total)

  • the_post_thumbnail automatically prints the image tag…try something like:

    <?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>';
}
?>

    Thread Starter kokopellisk

    (@kokopellisk)

    Epic. If I knew you, I would kiss you.

    Thanks so much jkovis, really appreciate your help ??

    Thread Starter kokopellisk

    (@kokopellisk)

    Sorry one last question… is there a way to only output each categories once: displaying the featured image from the most recent post?

    Currently is it listing each post with a link to it’s category.

    Are you trying to display all categories on your site? For that, you should probably look at using get_the_category_list.

    Here is an updated version of the code from above that checks if the category has already been used:

    <?php
$used_categories = array();
$categories = get_the_category();
foreach ( $categories as $category ) {
	if ( !in_array($category->term_id, $used_categories) ) {
		$link = get_category_link($category->term_id );

		echo '<a href='.$link.'>'.$category->cat_name;
		the_post_thumbnail( 'thumbnail' );
		echo '</a>';
		$used_categories[] = $category->term_id;
		break;
	}
}
?>

    Thread Starter kokopellisk

    (@kokopellisk)

    Thank you very much for this.

    I tried the code you mentioned and it output the same as the previous code.

    However, I think I am doing it incorrectly, I am putting the above code inside:

    <?php if ( have_posts() ) while ( have_posts() ) : the_post(); ?>

<?php endwhile; ?>

    Is this the problem?

    I removed the if have posts code but then it only showed one category.

    Sorry about this ??

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Display categories as image blocks’ is closed to new replies.