How to change theme header size

The recommended logo size for most of our themes is around 800x200px. If you want to use a larger or smaller logo, follow the below instructions.

Before making any edits to your Functions.php file, please make sure that you have access to the File Manager in your cPanel or FTP. The Functions.php file is incredibly sensitive and if a mistake is made, it can cause the "white screen of death" on your site. Having easy access to your File Manager means you can easily upload a fresh copy of the Functions.php file if the need arises.

1. Open your header image in an image editing program and size your logo however you want. Write down or memorize what the new dimensions of your header image are (example: 400px width by 100px height).

2. In your Wordpress dashboard, go to Appearance > Editor > Functions.php.

3. Find the "Custom Header" section. If you can't find it, press Command/Ctrl + F to search.

4. Change the width and height values to match your new dimensions from step 1. Update File.

5. Go to Appearance > Editor > Style.css. Press Command/Ctrl + F and search  .header-image .site-header

6. Under background-size, replace the first number with your new WIDTH. Replace the second number with your new HEIGHT.

7. In  .header-image .site-title a, replace the min-height value with your new HEIGHT. Update File. Your header should now look much better on mobile!

Considerations for Retina-Friendly Themes

Our two most recent themes, Amelia and Eleanor, feature retina-friendly headers. This means the theme requires you upload header images at 2x the normal size for optimal display on retina devices.

Follow the same instructions as above, but with two modifications:

  • Whatever size you want your logo to display at, save it at double that size. It'll look quite large, but it'll be resized by the theme once uploaded. Use your new "doubled" dimensions in the Functions.php in step 4.
  • In steps 5-7, use the original dimensions (or half of what you used in the Functions.php).

An example: You want your header to display on your site at 400x100px. You would save your logo at 800x200px and use those dimensions in the Functions.php. You would use the 400x100 dimensions in the style.css.