—
by
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:
You can use either content sidebar or full width layout with this code:
Includes 1 CSS rule for Media Queries:
Here’s the template code for logged in members:
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
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/
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.
In this line in the code you can change the name of the image size
[code]
if ( $image = genesis_get_image( ‘format=url&size=recipe’ ) ) {
[/code]
See
[code]
size=recipe
[/code]
Or add this:
[code]
add_image_size( ‘recipe, 200, 200, TRUE );
[/code]
Perfect! I totally missed that in the code but now I know what to look for – thank you!
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
[code]
add_filter( ‘template_include’, ‘use_for_archives’, 99 );
function use_for_archives( $template ) {
if ( is_archive() or is_search() or is_tax() ) {
$new_template = locate_template( array( ‘grid.php’ ) );
if ( ” != $new_template ) {
return $new_template ;
}
}
return $template;
}
[/code]
(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?
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!
Hi Brad. I only want this to show up on one category, and not all category archive pages. How would I filter this?
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
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
I’ll keep tinkering with it. I like this gallery method, it works on all of my other sites, just not with this one.
Got it working.
Good Stuff! What was the problem?
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!
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.
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
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/
Thanks for sharing Kris.
Get The Latest Free & Premium Tutorials Delivered The Second They’re Published.
Leave a Reply
You must be logged in to post a comment.