Genesis Tutorials

Show Popular Posts By Views Count Using Foodie Pro Featured Posts Widget

By default, the Foodie Pro featured posts widget does NOT include a option to display posts by the number of times a post has been viewed. However, you can add this option to the drop down menu so it does look like this :

Foodie Pro Featured Posts Popular Posts by Views

Note : The views count does not start until you load each post after installing the code.

Installation Steps

There’s 2 steps :

  1. # Upload the folder named featured-posts to the foodiepro > lib > widgets folder like this

  3. # Copy & paste the PHP code ( without the opening PHP tag ) from the functions.php file to the end of the Foodie Pro themes functions file

Download Folder

Related Tutorials

Free Tutorials Genesis Tutorials

Foodie Pro – Reposition Search Box Before Nav Menu

By default, the search form in Foodie Pro is added after the nav menu items like this.

This solution enables you to add the search box before the nav menu like this.

Code Installation #

There’s only 1 step :

Find the following PHP code in the Foodie Pro themes functions.php file located between lines 217 – 236 :

And replace the code with this :

Genesis Tutorials

Reduce Site Header Size When Header Image Decreases On Mobile Screens

This solution resizes the site header as the screen width reduces. In some themes like Foodie Pro, the header image is coded to using background-size: contain; ( Demo ) so the image isn’t cutoff when the screen width decreases to less than the width of the header image.

The only problem is the height of the site header is set so as the image decreases, the gap increases like you see in the following screenshot taken at a width of 700px:

On mobile phones, thats a significant chunk of the screen which is white space.

The solution in this tutorial, removes the gap so you get this :

Tested using the Foodie Pro child theme.

Here’s the demo video showing how your header looks at different screen widths. In this case the padding and margins are only removed after the screen width hits 750px width.

#Demo Video

Shows the header image and site header resizing so there’s no gaps.

Register or login to access the full solution :

Genesis Tutorials

Foodie Pro Full Width Site Header

This solution enables you to modify the site header in Foodie Pro.

  • Make the site header full width
  • Display the site title or header image ( logo ) inline with the header right widget elements. In this case, the nav menu width and search widget are displayed inline with the logo.
  • Display each site header element full width on smaller screens.
  • Re-order the header elements on mobiles so you can display the 1) title area containing the logo 2) search widget 3) menu toggle for the nav menu. The CSS also enables you to re-order these elements to display 1) search widget 2) menu 3) title area.

Watch the demo video to see 1 example of the stacking order of elements on mobiles.

#Demo Video

Shows the Foodie Pro site header modified to displays the site header full width with the title area to the left of the screen and the header right widgets floated right. Enables the reordering of elements on mobiles so the mobile menu icon displays after the header search form.

Register or login to access the download folder :

Free Tutorials Genesis Tutorials

Moving Post Info Above Title in Foodie Pro Featured Posts Widget

This tutorial shows you how to move the post info in the entry header above the entry title like this :

Go to foodie-pro > lib > widgets > featured-posts > views > display.php around line 75 and reposition the code for the post info so it executes before the entry title like you see in the following code :

Based on the following question from the Genesis community :

I am trying to move the post info above the post title which worked using the following actions:

remove_action( 'genesis_entry_header', 'genesis_post_info', 12);
add_action( 'genesis_entry_header', 'genesis_post_info', 9 );

But… nothing changes onto the homepage where the post info still shows below the title. I assume this is something to do with the foodie pro featured widget but I have no idea how to modify that. Any ideas how can I have post info showing up above the title even on homepage?

Genesis Tutorials

Change Logo On Mobiles When Genesis Responsive Menu Toggled

The code in this tutorial enables you to display a different header image when the responsive hamburger menu icon is toggled open.

Here’s the demo :

How It Works

The solution assumes you have added your logo to the header image setting in the customizer. This image is used as the default. You also need to add a different header image named custom.png to your child themes images folder.

The custom image is only displayed when the responsive menu icon is clicked and the menu expanded. The screen width is also set to less than 1023px so the default image is displayed when the width is greater than 1023px width.


The code has been tested using the Genesis Sample child theme by StudioPress. When using the code in Foodie Pro, the custom.png image should be 320px width x 170px height. For usage in Genesis Sample, make sure custom.png is 300 x 80.

Code Installation

There’s 3 steps :

Related Tutorials

Genesis Tutorials

Use Custom Image In Foodie Pro Featured Posts Widget For Recipe Index

The code in this premium tutorial for paid members enables you to use a custom image when using the Foodie featured Image widget in the Recipe index page. This way you can use a custom image in the widget which is different to whats shown on archives for the same post.

See the demo video for example.

Demo Video

The video shows how you can add 2 images. The default featured image and a custom image. If the custom image is added, it displays when using the featured posts widget otherwise the featured image displays.

The custom image only displays in the featured widget when added and never on archives which always uses the default featured image.

Code Modification

There’s 2 steps :

Genesis Tutorials

Add Foodie Pro Recipe Index Template To Genesis Sample Theme

This tutorial provides the code which enables you to add the recipe index template from the Foodie Pro theme to the Genesis sample child theme by StudioPress.

Here’s the finished product added to a page template in the Sample theme:

The solution adds a page template which you select from the Templates drop down menu in the Page Attributes meta box on any Edit Page screen.

The template enables you to display entries from the Genesis featured posts widget and display them using column classes in 2, 3, 4 & 6 columns exactly like you see in the Foodie Pro Recipe Index demo.

Demo Video – 57s

Shows you the mobile responsiveness of the entries displayed using the recipes index template in the Genesis Sample child theme.

Here’s the code for logged in members:

Genesis Tutorials

Foodie Pro Mobile Responsive Full Width Header Image

This tutorial provides the step by step instructions ( Fully Supported for members ) which enable you to add a mobile responsive, full width header image to the Foodie Pro child theme.

Foodie Pro by Shay Bocks has been the top selling Genesis child theme for several years now and is also included in the Pro Plus ( All Themes ) package by StudioPress.

Depending on the colors in your image, you may also want to change the colors of the site title and header menu links. Here’s the CSS to do that.

Change Background Color of Header Elements

The following CSS edits enable you to change the background color of the header right widget menu and site title.

Line 1629 in style.css, add the following declaration background-color: transparent; to the existing CSS rule so it now looks like this:

.site-header .widget-area,
.site-header .widget-area .genesis-nav-menu {
float: right;
	text-align: right;
	max-width: 710px;
	background-color: transparent;

The following CSS enables you to change the color of the site title.

.site-title a {
    color: white;

Use the following CSS to change the nav menu link color in the header right widget area:

.site-header .widget-area .genesis-nav-menu a {
    float: right;
	text-align: right;
	max-width: 710px;
	color: white;

Full Width Header Image – Installation

Here’s the 3 steps you need to take to install the code after downloading the folder below:

Step 1 : Copy & paste the PHP code from the functions.php file in the download folder ( minus the opening php tag ) to the end of the Foodie Pro themes functions.php file.

Free Tutorials Genesis Tutorials

Resize Foodie Pro Header Image

This beginners tutorial, enables you to change the code in Foodie Pro so it displays your header image or logo perfectly.

You’ll need to change both the PHP code & CSS which are located in different files.

If you don’t modify the PHP code in the Foodie Pro themes functions.php file, WordPress will crop your image based on the default image dimensions coded into the Foodie Pro’s functions.php file.

Step 1 : In the Foodie Pro theme folder, open the functions.php file using a code editor and change the values on lines 81 & 82 to match your images width and height.

Change the size in the following PHP code to 800px width by 150px height.

add_theme_support( 'genesis-custom-header', array(
	'width'  => 800,
	'height' => 150,

Note: For retina images, you need to modify the PHP code so the values are twice that of your image. If your image is 800 x 150, you’ll need to use a width of 1600px and a height of 300px. The width and height in the CSS should match your image 800 x 150 regardless.

Step 2 : Save the changes to the file and go to Appearance > Header in your WordPress dashboard where you’ll see this:


Step 3 : You can now upload your new image and skip cropping so your full size image is displayed in your header.


Step 4 : In the Foodie Pro themes style.css file, go to line 1666 where you’ll find the following 2 CSS rules.

.header-image .site-header {
	background-position: center !important;
	background-size: 800px 150px !important;

.header-image .site-title a {
	float: none;
	min-height: 150px;
	width: 100%;

The above CSS rules have been modified to match the exact width and height of the header image which is 800 by 150.

Final Result:


The actual size of your image is determined by the values in the CSS regardless of the values in the PHP code.

Note: You can move the image to the left simply by changing the value for the background-position property from center to left in the 1st CSS rule above.

Site Title & Tagline

You can add, remove or modify your site title and tagline using these settings.

In your WordPress dashboard, go to Appearance > Header > Site Identity and you’ll see the following settings for your title and tagline.


This tutorial has been written based on the following questions from a member of the StudioPress community forums.

1) The first is that I’d like to resize the header image placeholder to accommodate our current logo size which is 850 x 150.

2) I tried to add the image in and crop (which didn’t work) but, when I did the text header didn’t disappear.

Free Tutorials Genesis Tutorials

Add Pagination to Home Page In Foodie Pro

This tutorial includes 3 ways to add pagination to the front page of any Genesis child theme.

The code is tested in the Foodie Pro child theme.

By default, posts are removed from the front page of Foodie Pro so there’s nothing to paginate. To add pagination, you’ll need to add the loop back after the front page widgets so you have something to paginate.


Demo Video

Method 1

Add the following code to your child themes functions file.

Genesis Tutorials

Foodie Pro Remove Grid

Foodie Pro includes a custom grid function which you can use to display posts in columns. Via the Content Archive settings in the WordPress customizer, you can set any blog listings page, including archive, author, blog, category, search, and tag pages to display in 1,2,3,4 and 6 columns.


The only problem is, all your archive pages are affected.

What if you want to exclude your blog page or any other archives?

You could use CSS like this:

.page-template-page_blog .one-fourth {
    width: 100%;

CSS will work however it’s not the best solution.

If you use PHP code, you can control which archives use the special grid columns function and which don’t which is more efficient.

Here’s the code which enables you to add or remove grid from any type of archive listings set using the Content Archive settings in the Customizer:

Related Tutorials

Genesis Tutorials

Foodie Pro Featured Posts Widget – Manually Add Which Posts You Want Featured

The code in this solution is based on this question from a member of the StudioPress Community Forums:

I’m wondering if there’s a way to edit the ‘Foodie – Pro Featured Post’ widget so that I can manually add which posts we want featured… In other words, right now I have the option to choose by ‘Category’, but I would like to be able to manually add by post id or even title.


There’s no setting enabling you to select one or more single posts to include in the featured posts widget. To add a setting to do this would require a significant amount of code and understanding of all the code in the default widget which is a custom version of the Genesis featured posts widget.

The solution in this tutorial is very simple and requires the addition of a tiny amount of code to one of the Foodie Pro child themes files.

Note: You can also use this solution in any other Genesis child theme by using the Genesis Featured Posts Pro widget.

Here’s the exact location you need to edit in the file:

Genesis Tutorials

Foodie Pro Archive Page Template With Columns

This template can be used in any genesis child theme. It has been tested on the Foodie Pro child theme by Shay Bocks in response to the following support request by a member of WP Sites:

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.

Here’s what this 2nd solution produces:


  • The template only displays the featured image and title which you can position before or after the image.
  • You can add a excerpt as well if needed
  • You can also remove the sidebar so the columns display full width of the content sidebar wrap.
  • And you can use the template to display your entries in 2, 3, 4 or 6 columns

Here’s the code you can add to the template to display full width:

//* Force full width content layout
add_filter( 'genesis_site_layout', '__genesis_return_full_width_content' );

And here’s the full width result:


Examples of 2, 3 or 6 columns:

And here’s the code you can add to a new file in your child themes root directory. Name the file using the WordPress Template Hierarchy to control which archives its executed on. In this case, category.php.

Download template code for members:

Related Template Code

Genesis Tutorials

Foodie Pro Responsive Header Right Nav Menu Modification

This tutorial for Foodie Pro theme owners shows you how to make the header right nav menu display at the very bottom of the site header without any margin or padding and without adding space below the header image like this.


Includes CSS for Media Queries so all nav menus and logo align center on smaller screens like this:


And this:


Note: The menu in the site header is added using a custom menu in the header right widget area.

Demo Video

Here’s the demo Video

Here’s the CSS and modification instructions for members:

Genesis Tutorials

Full Screen Width Header in Foodie Pro

This tutorial shows you how to make the site header span the full width of the screen like this:


Update : Here’s the tutorial for the new version of Foodie Pro.

Tested on the most popular 3rd party Genesis child theme to date, Foodie Pro by Shay Bocks.

Here’s what the header looks like by default:


Note: This solution should also work in some other ( but not all ) Genesis child themes.

Here’s the complete solution for logged in members:

Related Tutorials

Genesis Tutorials

4 Column Archive Recipes Template – Featured Image & Title Only

I was hired recently to create category archives for a recipe website like this:

4 column layout

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:

category archive columns

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:

Related Page Templates