A user wanted to know how Posts in a specific category archive page can be displayed in a grid of featured images and titles with all other category archives shown with titles and excerpts floating to right around featured images.
Ex.:
Recipes category archive page:
Any other category archive page:
While this tutorial has been written with Foodie Pro as the active theme, it should work in other Genesis child themes as well with minor changes in the suggested code to be added in style.css.
Step 1
Set featured images to be shown and floated left in Genesis theme settings:
Step 2
Create a file named say, template_category-grid.php in the child theme directory having the following:
This is great. Thanks, Sri.
What if you wanted to use it for ALL categories –not just recipes.
Robin
Would you just change
if ( is_category( ‘recipes’ ) ) {
to
if ( is_category() ) {
Steps 1, 3 and 4 are not needed.
In Step 2, place the code in a file named category.php.
I followed your steps to change all the categories to show the grid but my images are too small. How do I make the thumbnails larger? My theme settings are set to show images to 255×255.
If it helps Jessica, I changed the image size of mine on line 51
if ( $image = genesis_get_image( ‘format=url&size=category-thumbnail’ ) ) {
first, I added an image size to image sizes in functions.php and then put that image size on line 51 of the category.php
Hopefully, Sri can confirm that I did it correctly. It worked for me.
Robin
Thanks Robin.. I tried that but the images aren’t resizing. I’ve double checked everything.. and included an image size I already have set in the functions. I’ve also cleared my cache.
Any other ideas?
You’d need to regenerate thumbnails if you have registered the new custom size after you have uploaded the media.
https://wordpress.org/plugins/regenerate-thumbnails/
Yes, that’s correct.
Hello Sridhar!
I just switched from a ThemeForest theme built on the Valpress framework over to Foodie Pro and I’m trying to work out the kinks. When you say “create a new file” in Step 2, are you referring to copying that code in a text editor and then uploading it the a certain place via FTP? Where do I load the new .php file?
Also, if there elements that I really loved about my old theme (Cassia), how can I go about replicating them with Genesis? For example, I really like the section at the top displaying popular posts and a photo shown here: http://themeforest.net/item/cassia-a-responsive-wordpress-blog-theme/full_screen_preview/6088272
Is that possible to recreate in Genesis/Foodie Pro?
Thanks for your awesome tutorials – you have been a lifesaver!
Katie
Click on ‘view raw’ link near the bottom right of code, press Ctrl+S or Cmd+S, save the file on your desktop. Then use a FTP client and upload the file to wp-content/themes/foodiepro.
Yes, it’s possible to add a Popular Posts section below the header to any theme. If time permits, I shall write a tutorial on doing it in Foodie Pro.
Here you go: http://sridharkatakam.com/displaying-popular-posts-in-genesis-using-wordpress-popular-posts-plugin/
Thanks works perfect.
Now, how would I increase the amount of posts per archive category page from 4 to unlimited so that I can have all posts on a single page?
Cheers
For chosen category/categories or all of the category archives?
I’ve made the changes for all category archives.
Recipe index excluded as that is a widgetised page.
Hey great tutorial! I’ve mostly got this working on my site using Nameless Pro child theme as a base. The problem I’m facing is that the CSS for the theme is taking over the grid. Any tips for a novice to genesis on how to style? I can’t figure out how/what is injecting the title text and styling. Thanks!
Hi, Sri. I did Step 2 and saved it as category.php for this site – http://www.cookincanuck.com but it is showing the featured image twice on the category pages.
http://www.cookincanuck.com/category/appetizers/
If I disable featured image on archive page under genesis settings, then it does not show a featured image on the blog page – http://www.cookincanuck.com/blog
Thank you,
Robin
I added
.recipe-image {display: none; }
and it removed one of the images.
Please let me know if I should do it a different way.
Thanks,
Robin
This is one of my most-requested things from clients and probably one of the tutorials I have used the most from your site. Thank you! In case this helps others who might have a client who seems to be averse to categories (I will never understand this…), I wanted to mention that if you rename the category.php file to tag.php this will also work for tag archives. For conditional tag archive pages, the is_category conditional display can be adapted for is_tag.
Thanks for this tutorial!
Question for you: Chimnoy Paul has a plugin to modify this layout, but it only works with the Foodie Pro theme (http://genesisdeveloper.me/foodiepro-gfpc/default/). Would it be possible to create a similar layout / filtering option if I’m using your code on a different theme? I”m using Parallax.