[Resolved] Categories on Archive page

[Werner]

Hello,

Is it possible to display the categories of the blog posts on the archive page, instead of the individual posts? And can I attach featured images to those categories? Thanks!

[David]

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

[Werner]

Hi David,

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

[David]

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.

[Werner]

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.

[David]

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.

[Werner]

Done. This page is merely for testing that feature.

[David]

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%);
    }
}

[Werner]

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?

[David]

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.

[Werner]

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

[David]

You’re welcome

[Author]

Posts