I recently implemented the Foodie Pro theme on Elizabeth’s Kitchen Diary website. It is a lovely minimalist theme, designed with food bloggers in mind, and has quite a few options for the display of your content.
In particular, we like the Foodie Pro grid you can use on your category archive pages such as this archive for all Elizabeth’s cake recipes. You can choose how many columns and what content you want to be displayed in the Appearance -> Customize -> Content Archives.
However, Elizabeth soon contacted me to say that the search results page didn’t look so good. It was not using the grid layout but the layout specified in the settings in the Genesis -> Theme Settings -> Content Archives.
Fortunately to get the search results pages to use the grid layout took two minor edits to the theme files.
As always please ensure you have a backup of your files before you edit them! And remember that if you update your theme in the future these changes will be lost.
First up in the theme folder, find the helper-functions.php file, it is in the includes folder, then change the foodie_pro_is_blog function to:
/**
* Helper function to determine if we're on a blog section of a Genesis site.
*
* @since 2.0.0
*
* @param $archives_only set to false to return true on singular posts
* @return bool True if we're on any section of the blog.
*/
function foodie_pro_is_blog( $archives_only = true ) {
$is_blog = array(
'blog_template' => genesis_is_blog_template(),
'single_post' => $archives_only ? false : is_singular( 'post' ),
'archive' => is_archive() && ! is_post_type_archive(),
'home' => is_home() && ! is_front_page(),
'search' => is_search(), // Add this line to enable the grid on the search pages too
);
if ( in_array( true, $is_blog ) ) {
return true;
}
return false;
}Next up we want to edit the style.css so that the titles are a little smaller for the search results page. Around line 732 you’ll see the styling set for the archive entry title selectors, and we want to add the same for the search entry titles, please see below.
.archive .one-third .entry-title,
.archive .one-fourth .entry-title,
.archive .one-sixth .entry-title,
.search .one-third .entry-title,
.search .one-fourth .entry-title,
.search .one-sixth .entry-title {
font-size: 18px;
text-align: center;
}I contacted the Foodie Pro support team about the search results page, so this edit may or may not make it into a future release.
Fix the images in your RSS emails
Hi, thanks for tip! I came across your post while looking for “how to increase the number of posts on the archive page of Foodie Pro theme”. I wonder if you can help. Where should I edit to increase the number of posts in my archive page? Currently, I only get 4 per page but I want to increase to more.
Hi Sesame, in your dashboard go to Settings -> Reading and change the “Blog pages show at most” number. Make sure you make it a number divisible by the number of columns you have, so if you choose the “one third” grid make the number 15, or if you choose the “one fourth” grid make the number 16. Good luck. Cheers Jo
I was trying to figure this out and this worked perfectly. Thank you!!
Oh, yay! Thank you sooo much. This was one of the many little tweaks I was trying to figure out with the Foodie theme. I’m glad I found you and this post!
I have been trying to find out how to change my content archives grid from 10 to 12 for a long time and am so grateful I came across this comment! I’m a year behind everyone else, haha. Thank you so much!!
Jo- Thank you so much for posting this. I contacted Foodie’s support team and they just sent me to you. I was so frustrated that the pictures were huge but your directions to fix it worked perfectly! Thanks again!
Hi Melanie. Great, I’m glad you’ve been able to fix it. I’ve had a quick look at your site and you might want to increase the number of posts to show on your content archive pages to something more than 6, see my previous comment on how to do that. Also, you have a little Google+ link at the very top of your site, not sure why? Cheers Jo
Hi,
I figured out how to create a recipe index page with different categories such as pancakes, waffles, oatmeal, etc. Now when I click on the pancakes button, I want it to take me to a grid archive of all my pancake recipes. I am a bit confused on how to do this.
Your page has been so helpful and I am sure I will have more questions!
Thanks again for all your help,
Spencer Miller
Hi Spencer, take a look at the Foodie Pro tutorials, in particular the How to configure the content archives
Oh my gosh! This is so wonderful! Thank you so much! I’ve been pulling my hair out trying to fix this!
I have also been struggling to get the search grid to work with Foodie Pro and just today I was told them that there is an update that will fix that with version 2.0.4. Please check it out the fix is very slick!
Good luck 🙂
Thanks for your tips, looking forward to your updates. I had been wondering why only 10 posts showed up in my grid.. it’s fixed now 🙂
Hello!
Thank you for your tutorial, it helped me a lot. But I am facing another problem. I adjusted the setting ‘content limit’ in the widget to 125 characters. The homepage looks great! But that setting doesn’t apply on ‘page 2’ and so on. What do I have to change to make those pages look a like?
Thanks in advance!
Hi Titus
Without a link to your site to see, it is difficult to say but have you configured your content archives correctly? See this Foodie Pro tutorial How to configure the content archives
Jo
Hello Joanne,
I am new to this whole web design thing but happy with my progress so far. I would like to add a new category on my page, maybe (blog) and to write about other things not recipes. Something like you can see on this link https://sridharkatakam.com/grid-template-for-category-archives-in-foodie-pro/#comments
Yes they start giving instructions but on step 2 you have to pay to find out more.
Can you please help me with this ?
Thank you
Gordana
Hi Gordana
I’m not quite sure I follow. Do you just want to add another category for your non-recipe posts? To what page do you want to add this new category?
That tutorial by Sridhar is for having the category pages display differently depending on what category the visitor is viewing. I’m not sure it is relevant to what you are wanting to achieve?
Kind regards
Jo
Hi!
I see this thread is a few years old but I’m hoping someone can still help. I just purchased the latest foodie pro theme and sadly the above code doesn’t work in that version.
However here’s my conundrum – If I add pagination to the home page and then set the /2 page design to be more of a full width display when I add my recipe index for each category, when the user clicks “See More” they see the full width page layout for all items in that category. This is not what I want. What I want is the “See More” link to take you to a page that shows the 4-column grid view like shown in the recipe-index.
I’m looking for how you did it on Elizabeth’s page. The only thing I can think of is because you didn’t use pagination on the home page.
Should I create additional recipe.php files and adjust the CSS for this? Thanks 🙂
Hi Lori
If you have the latest version of this theme you shouldn’t need the above code change as it was implemented in one of their updates.
I’m not sure I follow your issue without seeing your site where the theme is installed. How have you added pagination?
I doubt that creating a recipe.php will solve your issue.
Hi Jo 🙂
I’d be more than happy to email you my staging site to see what I’m talking about.
Right now if I do not have pagination on my home page (meaning do not use the Home Page Top/Middle/Bottom) widgets I can get the recipe index to display in a grid when they click “see more” however that’s even limited by the settings set in Genesis on how many posts to show.
On the home page it looks like you show a single post in the home page top, 2 recipes in the middle and so forth. Yet on the Recipe Index page (when you go into the category (All things sweet) you display 20 items) then if you drill say into Cake you display 20 (with pagination).
That’s what I want and for the life of me I can’t figure it out at all.
If you wish, my email is lori@thekitchenwhisperer.net
Thanks and Merry Christmas!
Hi Lori I’m emailing you now and we can follow up that way. Jo
Hi Jo,
Same as Lori, I’m running the current version of FoodiePro and Genesis but can’t figure out how to make the search results (or the “Read More” results) display in a grid pattern.
Were you able to figure out a solution for the updated versions?
Thanks in advance,
Mandy
Hi Mandy
Have you followed these instructions? https://feastdesignco.com/configure-recipe-index-content-archives/
Hi Jo,
I am using the current version of foodie pro. I would like to use multiple recipe index pages but the template only allows for one.
I am currently using it for my Destinations page, but I would like to add a page for Travel Tips which include: Itineraries, packing guides, etc.
https://worldtravelduo.com/
Thank you,
Lisa
Hi Lisa, you are correct the recipe index can only be used on one page (unless you want the same content on more than one page!). If you can code, then you can create another set of widgets, duplicate the recipe index template, edit it to use the new widgets and then use that. Do contact us if you need assistance with this.