Get all themes with lifetime updates for 95 USD. View all promotions

Set up PureBlog Pro

An introduction to the front page 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. PureBlog 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 PureBlog when you install and activate the theme:

pureblog custom header

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

Key Features of the Custom Header

  • The default image you see above will load on all activations – you can disable it.
  • Only available on the front page
  • You can have 1 image or add more if you decide to enable the random feature.
  • You can adjust the height of the header from 25% the height of the window to 100% height (much like the Twenty Seventeen theme has).
  • The Header will collapse with a dark background colour for inside pages.
  • The header also includes a sticky menu bar as well, for both front and inside pages
  • The header has a transparent to dark gradient overlay (darker on the bottom).
  • The Site Description (tagline) only shows on the front page
  • 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
    pureblog hide custom header image
  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 1600×850 pixels for best results. When uploading, you will be able to crop the image.
    pureblog randomize headers
  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 Header Height

By default, PureBlog has the header at 80% the height of your browser window. This will be responsive, so 80% will be inherited whether you are on a desktop screen or a phone.

  1. Go to Appearance >> Header Image
  2. Look for the setting “Front Page Header Image Height” and either type in your percent value (without the % symbol) or use the up/down arrows when you mouseover the field. NOTE: You can only change the height by 5% increments.
    pureblog header height setting
  3. As you make your changes, you can see the preview window change based on the height you enter in.
  4. Once done, click on the “Save & Publish” button at the top.