• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

WP SITES

2784

Original Genesis Tutorials & 6000+ Guaranteed Code

Snippets

  • Consultation
  • Full Access
  • Log in

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:

header

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

skip-cropping

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:

site-header

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.

site-identity

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.

Foodie Pro Theme

Reader Interactions

Comments

  1. Stefan Breton says

    June 28, 2018 at 9:53 pm

    Hello,

    I’m having an issue with the space between the header image and the menu tab in the mobile version.

    http://usemymindsaveyourtime.com/

    Log in to Reply
    • Brad Dalton says

      June 30, 2018 at 3:22 am

      You can modify these CSS rules, add more and wrap them in a media query so they render at specific screen widths.

      @media only screen and (max-width: 940px) {
      
          .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%;
          }
      
      }
      Log in to Reply
  2. Camilla Walley says

    December 19, 2017 at 2:18 pm

    I followed these steps and it worked thanks!
    But it doesn’t look quite right on the mobile version. Any advice? I’m a real beginner with all this!

    Log in to Reply
    • Brad Dalton says

      December 20, 2017 at 2:35 am

      You can modify the CSS for media queries depending on the size of your image.

      Log in to Reply
      • Camilla Walley says

        December 20, 2017 at 4:43 am

        Ok can you talk me thorough it?

        Log in to Reply
        • Brad Dalton says

          December 20, 2017 at 4:46 am

          Only paid members get support.

          Log in to Reply
  3. Marissa says

    October 2, 2017 at 8:32 pm

    I followed the steps exactly and my logo will not center… It’s sitting off to the left. Hard to explain but any insight?

    Log in to Reply
    • Brad Dalton says

      October 2, 2017 at 8:36 pm

      The screenshot shows my solution works perfectly so you must have missed something as it was taken when i tested the solution.

      I only offer support and troubleshooting for paid members. https://wpsites.net/registration/

      Log in to Reply

Leave a Reply Cancel reply

You must be logged in to post a comment.

Primary Sidebar

Code written by Brad Dalton specialist for Genesis, WooCommerce & WordPress theme customization. Read More…

Advertise · WPEngine · Genesis · Log in

  • Access Problems
  • Account Details
  • Consulting
  • Tags
 

Loading Comments...
 

You must be logged in to post a comment.