I was hired recently to create category archives for a recipe website like this:
The client wanted to keep the primary sidebar and squeeze in 4 featured images with titles only on all category archive pages.
Here’s the result the code in this post produces:
Layout Option
You can use either content sidebar or full width layout with this code:
Demo Video
Includes 1 CSS rule for Media Queries:
Here’s the template code for logged in members:
thriftycouple says
Greetings Brad!
Thank you for the simple and easily understood directions. I have this mostly implemented, but am not having my categories showing 4 columns; rather its only showing a full-sized featured image with linked title underneath.
I do apologize for leaving my link, but here’s an example with default template:
http://thethriftycouple.com/category/diy-projects/gardening-diy-projects/
And here’s an example with full width:
http://thethriftycouple.com/category/finance/dropping-debt/
I am using the Foodie theme but expect I might have some other conflict in my theme?
Thank you so much!
Alex
Brad Dalton says
It seems you may need to clear caching as the CSS displays each entry in columns using width: 25%. If the new CSS you add to your style.css file isn’t being rendered ( Due to an old version of the style sheet being rendered by the browser caching ), only the new PHP will execute.
or
You can use another solution http://wpsites.net/web-design/foodie-pro-archive-page-template-for-columns/
homemadehooplah says
Thank you so much for this!
I have two questions π
1 – How would I display a specific thumbnail size? I’ve already generated it and have it selected in the archive settings in Genesis (it’s a square, 200×200), but it looks like it’s currently pulling a resized version of the featured image (a rectangle shape).
2 – How could I get this same style to work for archive.php (so all category, taxonomy, and date archives) and search results? I saved this setup in archive.php and it’s currently works on category, but when I view taxonomy archive pages it says there are no posts to display.
Brad Dalton says
In this line in the code you can change the name of the image size
See
Or add this:
homemadehooplah says
Perfect! I totally missed that in the code but now I know what to look for – thank you!
Brad Dalton says
2. You could do this several ways.
(a) Rename the file something like grid.php rather than archive.php and use template_include in your functions file with conditional tags to display on multiple archive types
(b) Or add the PHP code directly to your taxonomy template for your CPT. I assume your theme folder includes a taxonomy-cpt-type.php file, where CPT is the name of your custom post type?
homemadehooplah says
I went with option A, since I’m coding this theme from scratch (or, trying to) so I only have the files I’ve made and the custom post type is handled by a plugin. Easier for me to code around it π
This solution worked perfectly. Thanks again!
Kristie Hill says
Hi Brad. I only want this to show up on one category, and not all category archive pages. How would I filter this?
Brad Dalton says
Hello Kristie
The WordPress template hierarchy works like this. WordPress looks for category files in this order:
1. category-{slug}.php – If the category’s slug were news, WordPress would look for category-news.php
2. category-{id}.php – If the category’s ID were 6, WordPress would look for category-6.php
All you need to do is name the file category-slug.php
Where slug is the name of your category
Kristie Hill says
Thanks for explaining the hierarchy to me Brad! That part worked beautifully, any ideas why the images aren’t taking on the 25% display? http://184.154.247.31/~fashi562/category/style-file
Brad Dalton says
There’s another method.
Use the 2nd snippet and change the 3 to 4.
Kristie Hill says
I’ll keep tinkering with it. I like this gallery method, it works on all of my other sites, just not with this one.
Kristie Hill says
Got it working.
Brad Dalton says
Good Stuff! What was the problem?
Lisa says
Hi,
Thanks for the tutorial! Is there any way to make each post appear with a thumbnail of the featured image, instead of the actual featured image? Some of my featured images are different sizes, which makes the grid look messy – is there a way to get them to all appear the same size?
Thanks!
Brad Dalton says
Hello Lisa
Add a custom size to the code in the file and regenerate thumbnails. https://wordpress.org/plugins/regenerate-thumbnails/
Or crop the images and re-upload each featured image manually.
Kris says
Wonderful tutorial Brad!
Just one thing I can’t figure out. I have enabled Jetpack sharing buttons to show on homepage, but when removing post content, buttons are also removed. Any tips to place these buttons under or next to the title?
Cheers,
Kris
Brad Dalton says
Hello Kris
I think you would need to add them before or after the content using a different hook like genesis_entry_footer
http://wpsites.net/best-plugins/moving-jetpack-sharing-buttons-above-post-content/
Kris says
Got it working!
https://gist.github.com/anonymous/128f09ce5a4962e1d6a8
Thanks π
Brad Dalton says
Thanks for sharing Kris.