Using the WordPress Header feature

February 21, 2014| Sushil Adhikari

This is actually a big tutorial when you combine the WordPress Header feature and the Custom Header feature that I added to Circumferencce. You basically have a few options when it comes to managing headers for each page:

  1. Use the WordPress Header feature to keep a consistent header background through every page (default)
  2. Use the WordPress Header feature to have a random rotating header background throughout your site
  3. Use custom fields to set a custom background on a per page basis
  4. Use custom fields to set a custom background, with header captions (see the orange banner screenshot below)
  5. Or you can use custom fields to create custom header captions without changing the header background.

I will show you how to create custom headers for pages that include the option to add different backgrounds in the next tutorial, but for this one, we will tackle the WordPress Header feature first. By default, your header background will look like this:

default-header

When I show you in the next tutorial how to use custom fields, you can change the header to be something like this:

custom-header

To give you an idea of what these headers look like, check out the demo website, and look to the banner area near the top on the other pages but for the Widgets Layout page, you can see the caption option:

Custom Headers

 

Change or Add a Custom Header Image

As mentioned, you get a nice muli-coloured blue header image which you can keep, remove, or add more images to create a random rotating function when using the WordPress header feature. 

I should also mention that if you want to accommodate the largest monitors that have 2560px resolutions, you will want to use images that are that size in width. However, if you cannot make that size, try for 1920px. The height can be any height you want, but if you plan to use this header background with sliders or any other content within the banner area, I recommend making the height big enough such as 500px. If you plan to only use the header background for custom header captions (like you see in the orange banner screenshot above), then you only need on that is around 100px in height.

  1. Go to Appearance >> Header
  2. Choose to remove it and upload your own or you can add more and select the random setting
  3. Click Save

Screenshot Tutorial


Categories: Setup Tutorials for Circumference

Leave a Reply

Black Friday Sale - 50% Off Discount on ALL PRO THEMES AND MEMBERSHIPS Use discount code BFRI2020