Categories on Archive page

Hi there,

so Tom provides a similar solution here that creates a shortcode for outputting a category grid on a static page:

https://generatepress.com/forums/topic/grid-gallery-of-category-images/#post-871841

Hi David,

Thanks, that is great. Where do I have to put the shortcode (not the CSS)?

The shortcode function is PHP - this article explains:

https://docs.generatepress.com/article/adding-php/

Once the function is added just add the shortcode [category_grid] to the page.

That is wonderful, thanks. How can I now customize the way this grid looks? I would like to change the font size of the category titles and the images should all be in the same size as well.

Could you link us to a page where you have added the shortcode i can then provide some CSS.
You can edit your original topic and use the Site URL to share the link privately.

Done. This page is merely for testing that feature.

Remove the CSS that was on the link as it was just the basic setup and has no responsive settings and use this:

/* Set Image size and force to fit */

.category-item img {
    min-height: 250px;
    object-fit: cover;
}

/* Style title */

.category-item h3 {
    font-size: 24px;
    color: #000000;
    font-weight: 500;
}

/* Create Grid Mobile */

.category-grid {
    display: grid;
    grid-template-columns: 100%;
    grid-gap: 1em;
    margin: 1em 0 !important;
}

/* Grid Tablet */
@media (max-width: 768px) and (min-width: 420px) {
    .category-grid {
        grid-template-columns: repeat(2, 50%);
    }
}

/* Grid Desktop */
@media (min-width: 769px) {
    .category-grid {
        grid-template-columns: repeat(4, 25%);
    }
}

Thank you so much, David! Hopefully my last questions:
(1) What would I have to do so that the images themselves link to the categories, just like the titles?
(2) How can I increase the gap between the images?
(3) How to center the grid?

So first off use this code for the shortcode, i simply moved the closing anchor tag to include the image:

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

					if ( function_exists( 'z_taxonomy_image' ) ) {
						z_taxonomy_image( $category->term_id );
					}
					echo '</a>';
					$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();
	}
} );

Then i can take a look at the CSS for the other things.

Thank you, I have worked out the CSS I needed.

You're welcome