Promo 1 - Get our lifetime membership, all themes, and updates forever for only 95 USD.
Promo 2 - Get a free pro theme when you host with us.

An introduction to the custom header

Technically the custom header feature is part of WordPress and only a theme can use it providing the designer codes in support for it. Equable supports the WordPress custom header, but with this theme, only the front page gets it. Here is an example of what it looks like as the default header for Matin when you install and activate the theme:

matin headers

You can find out more about the WP Custom Header HERE, but this theme offers a few changes which I will outline further below…

Change Your Header Style

You can use the WP Custom Header on every page, the front page, or hide it from all pages.

  1. Go to Appearance >> Header
  2. Look for the “Header Style” setting and make your choice from Style 1, 2, 3, or 4.
    matin header setting
  3. Click “Save & Publish” at the top of the customizer

Key Features of the Custom Header

  • The default image of the early morning sunrise you see above will load on all activations – you can disable it.
  • The WP Custom Header is available on the front page or all pages of your website
  • You can have 1 image or add more if you decide to enable the random feature.
  • The header image is responsive.

Disable or Set Your Custom Header 

  1. Go to Appearance >> Header Image
  2. To remove the default image, click on the “Hide image” button
    matin custom header current
  3. To add a new image, click on the “Add new image” button. When you do this, you will select a photo from your media library or upload a new one. You can add multiple header images and you can also click on the “Randomize uploaded headers” button so that every time the page is refreshed (or visited), a different image will show from your selection. NOTE: I recommend good quality (optimized) photos that are no less than 1920×550 pixels for best results. When uploading, you will be able to crop the image.
    matin custom header randomize
  4. To restore the default image, click on the “Suggested” image…which should be the default image.
  5. When you are finished with your header images, click on the “Save & Publish” button at the top of the settings column.

Change the Image Quality with Downsizing

By default, this theme has the custom header configured to crop your image “down” to 1920×550 pixels. This means your photo should be at least that size when uploading and should be of good quality (and optimized). However, if you decide this is too large and you want to manage the file size of the image, you can opt in for a smaller dimension by changing it…for example, you can make it 1600×500 pixels.

Please note that this only changes the physical dimensions of the image and not the height of the header container itself (the part that shows the image).

matin custom header image size

  1. Go to Appearance >> Header
  2. Look for the “Header Image Width” setting and change it to your preference.
  3. Look for the “Header Image Height” setting and change it to your preference (if you decide to change the height as well)
  4. Click “Save & Publish

 Change the Header Height

There are two height settings to choose from:

matin header height setting

The first one is if you are using the first or second header style, while the other one is if you choose the third style (with the top branding box). The setting “Header Style 1 & 2 Height” lets you change the height from 9 to 15 and then “Header Style 3 Height” is from 5 to 15. The values represents “rem” units instead of pixels where 1 rem = 16 pixels. So 9 rem = 144 pixels.

If you want to keep things simple, just keep the settings as they are.