[Resolved] Grid/gallery of category images

[Callista]

Hi Tom and all,
I have been trying to figure out how to do this for days with plugins, etc. But maybe there is a simple solution? I want to display on a “Categories” page and a section on my homepage and “Start Here” pages, a grid or gallery view of my categories with their featured images or thumbnails, similar to what you can do for post archives using the blog module in GP Premium or with WP Show Posts. I’m not trying to show actual posts, but the category name, with an image, and maybe a description, that links to that category archive page. Can GP do this? Or am I better off just creating images for my categories, uploading them, creating a gallery, and linking them to the archive pages individually (ie doing it manually)?
Thanks so much!
Callista

[Tom]

Hey Callista,

This is something David has asked me to add to WP Show Posts for a while now, but I haven’t figured out a good way to do it.

It’s not something that GP can do by default either, unfortunately.

Have you considered just using the Columns block in Gutenberg and manually adding the categories? Or does that not work for you?

Let me know 🙂

[Callista]

Hi Tom,
Thanks for getting back to me so quickly! I suspected as much… I’m using the Classic Editor (don’t like Gutenberg), with Elementor on the homepage. I can do it manually. It seems like that’s going to be the simplest solution at this point in time. Thanks for confirming that for me! Let me know if you do ever figure it out.
Have a great day!
Best,
Callista

[Tom]

Let me think on it – there might be a simple way to build a shortcode that does it for you. I’ll update you tomorrow 🙂

[Callista]

Thanks so much, Tom! 🙂

[Tom]

Playing with this. How are you adding featured images for your categories? Are you using a specific plugin?

[Callista]

Hi Tom!
I’ve tried all 3 of these plugins, and I’m not sold on any one of them so far.

• Post Category Image With Grid and Slider is promising, but has less than 1k installs. Plus the grid output was not visually appealing and would need some CSS.
• Categories Images has the most installs at over 80k and seems to do the job well enough, but hasn’t been updated in a year and its support forum seems to go unanswered, so I am not sure I should be using it.
• I might go with Category and Taxonomy Image, which has 6k installs and was updated 3 months ago – although again, the support forum seems silent.

I suppose I could also add some code myself, but a plugin is just a simple way to do it. I fear I might break something if I start trying to write my own code.

I also tried Advanced Custom Fields, but that was overkill. And, although I could create an image field for the category, that field didn’t show up in the category table on the right side. I’m sure there’s a way to do it but I didn’t feel like investing the time to learn how to do it.

If you have any suggestions as to the best plugin (or other method) to add images to categories, I’m all ears! Something simple, lightweight, and trustworthy would be ideal.

I appreciate you looking into this for me (and for everyone else!).

Have a great day!
Callista

[Tom]

K, let me do some testing and I’ll post the solution ASAP 🙂

[Tom]

So here’s a shortcode you could use:

add_shortcode( 'category_grid', function() {
	$args = array(
		'orderby' => 'name',
		'order' => 'ASC',
		'hide_empty' => 1,
	);

	$categories = get_categories( $args );

	if ( $categories ) {
		ob_start();

		echo '<div class="category-grid">';

			foreach ( $categories as $category ) {
				echo '<div class="category-item">';
					echo '<a href="' . get_category_link( $category->term_id ) . '">';
						echo '<h3>' . $category->name . '</h3>';
					echo '</a>';

					if ( function_exists( 'z_taxonomy_image' ) ) {
						z_taxonomy_image( $category->term_id );
					}

					$description = term_description( $category->term_id );

					if ( $description ) {
						echo '<div class="category-description">';
							echo $description;
						echo '</div>';
					}
				echo '</div>';
			}

		echo '</div>';

		return ob_get_clean();
	}
} );

And this CSS will put it in a simple grid:

.category-grid {
    display: flex;
    flex-wrap: wrap;
}

.category-item {
    padding: 40px;
    width: 25%;
    box-sizing: border-box;
}

.category-item img {
    margin-bottom: 20px;
}

This is using this plugin for the image: https://wordpress.org/plugins/categories-images/

[Callista]

Again, this is amazing! Perfect and ready for styling!
I so appreciate all your hard work on this and the other questions I had.
Have a great day!
Callista

[Tom]

Glad I could help! 🙂

[Fergal]

Hey there,

I’m trying to do something similar, but want to display my top-level categories on my Blog page. I added images to categories using https://wordpress.org/plugins/categories-images/ and added the shortcode you typed out above to the “code snippets” plugin. I then tried to add the short code to the blog page using [category_grid id=”6″], but it isn’t working. Can you please tell me what I’m doing wrong?

Thanks,
Fergal

[Leo]

Any chance you can open a new topic for your question?

This topic is very old.

Thanks!

[Author]

Posts