I have got a couple of users asking how to display a grid of category thumbnails, each linking to their respective category pages. In this article I share a custom Page Template to show images set for categories in a grid on a static Page.
We are going to use Categories Images plugin to set image for each category and Column classes (built in Genesis) for the grid display.
Define a custom image size for the category images and set Post's featured image to be displayed on single Post pages. Add this in functions.php:
To view the full content, please sign up for the membership.
Already a member? Log in below or here.
Is that possible to show the above as a widget on the Hompeage? Something like “home top” let’s say…
Hi, Sridhar! As usual, thank you for this very helpful post. I have been playing around with it at a new site: http://www.bestplrcentral.com/category/families/ I used the code you have. I assume though that I should be uploading all hte same size of images though to make it look better?
2 more questions – and how do you keep the images from touching one another? Is there an optimal size? Thanks!
I have the same question as Bob… Would love to see a way to use this within a widget area.
Use the page template (create page, choose “Catagories Grid” template) then use the Genesis featured Page widget and select that page.
[…] http://www.sridharkatakam.com/category-images-grid-template-genesis/ […]
This has been the closest I’ve found to what I’m trying to do but not quite. I was looking simply for what you have in Step 6. The only problem I had was that in addition to showing me the featured image and title it was showing excerpts from my post. Is there anyway to increase the size of the image and nix the excerpt?
I currently am using the Lifestyle Theme on Genesis and am using the Genesis Featured Widget Amplified for my home page and not sure if that is over writing what I’m trying to do on the category page?
Thank you for your help!
I have been able to play with it to get it to look closer to how I would like it to look. Thank you for this great article!
We recently switched to Genesis and have tried your implementation and it totally hosed our site – nothing worked. Do you have any advice on how we can make it work? Please send me an email directly to [email protected] and hopefully you can help us. Thanks!
is it possible to create two or more category pages where you can specify which categories go to which page?
I am able to set it up the way you described. As soon as I assign the new page to be the home page or static page, it goes blank. Have you checked to see if changes need to be made with updated WordPress versions (currently 4.3.1) or if it’s possible to work as the front page?
Try the following:
1) Place the code from Step 3 in a file named
front-page.phpinstead of as page_categories_grid.php.
2) Instead of Step 4 do this: Create a blank Page named, say
Home. Go to Settings > Reading and set it as Front page. http://d.pr/i/1lPov
Ensure that category image has been set for at least one of the top level categories.
If I use Child categories, the featured images do not display.
Is it possible to pull the child categories so that either you could drill down from the parent category then select a child category then see posts in the child category or have the posts in Child Categories display in the parent category?
I am interested in that as well for a food blog I am working on, and know just enough PHP and Genesis to be dangerous! 🙂
I figured it out this far. You have to change this ilne (aorund line 45 in Sridhar’s example):
‘$args = array(
‘orderby’ => ‘name’,
‘parent’ => 0
‘$args = array(
‘orderby’ => ‘name’,
‘child’ => 0
Then you get second-level categories. See what I’ve done here: https://diabetic.kitchen/category-index/
Hi Sridhar, I would like to add this as a second loop to a static front page, after the default loop. Can you please tell me how to modify this? Thanks!
Hey David. Which theme are you using mate?
Tested and working in Genesis Sample 2.6.0:
Instead of steps 3 and 4, create a file named
front-page.phphaving the following:
Then in the code being added to style.css, replace
Fantastic! Thanks again Sridhar…
Just a thought Sridhar, can this also be used outside the loop if necessary, say in genesis_before_footer? Thanks…
Yes, it should work fine in any location.