Custom page headers with backgrounds and captions

I will show you how to create custom page headers for pages that include the option to add different backgrounds, as well publishing nice page captions to help make a page stand out. To give you an idea of what these are, check out the demo website, and look to the banner area near the top:

Custom Headers

Having this capability allowed you to create nice backgrounds with a descriptive page header with caption text that looks like this:

You do not have to create titles and captions, you can simply change the background image to something different for select pages. This lets you have the capability of each page having its own background and caption.

Get Started With Custom Fields

To acheive this, we need to use a plugin called Advanced Custom Fields. This plugin is a big one and can do a LOT of things, but for Circumference, we will use it to create our nice headers that you see, along with a page heading and caption. This is also a plugin that does have some learning curve, but once you have this in your site, you can use it for many things. Check out its documentation for reference and “how to” instructions. The benefit here is that you can use this with any theme, not just Circumference…but that’s a whole new topic.

1. Go to Plugins >> Add New
2. Search for Advanced Custom Fields
3. Install and Activate

Create a Custom Field Group

Take the next few steps slow and one step at a time and you will be fine. Once these fields are created, you’re done. We first need to create a custom field group because in this group we will be adding two custom fields for it when we click on a button that is labeled +Add Field. First, we need our group:

1. Go to Custom Fields
2. Under Field Groups, click Add New
3. Name this group as “Custom Header Group” and click “Publish“
4. Under LOCATION, set the Rules as “Page Type” “is equal to” and then “Parent Page(has children“
5. Under OPTIONS, set to “Normal (after content” and Style as “Standard (WP Metabox)“
6. Click the “Update” button

Create a Custom Field – Header Background

1. Look for the button +Add Field and click on it
2. For the Field Label, type in Header Background
3. For the Field Name, make sure it shows as header_background
4. Select Field Type as “Image“
5. Required set as “No“
6. Return Value as “Image Url“
7. Preview Size as “Full“
8. Library as “All“
9. Conditional Logic as “No“
10. Stay on this Custom Header Group page for the next custom field that we need to make…

Create Another Custom Field – Header Caption

1. Look for the button +Add Field and click on it
2. For the Field Label, type in Header Caption
3. For the Field Name, make sure it shows as header_caption
4. Select Field Type as “Textarea“
5. Required set as “No“
6. Formatting as “Convert HTML into tags“
7. Conditional Logic as “No“
8. Click the “Update” button

How to Add a New Custom Header Background

Just like the screenshot above shows, we are going to add a custom background to a page header. First thing we need to do is make sure you have your header background image created, because we need to upload this to our Media Library.

Upload Your Image

1. Upload your header (banner) background image to your media library
2. Click on the “Edit” text link
3. Select the File Url and copy the link (save this somewhere like a text file because you will need this in a moment)
   

 Create Your Page Header

1. Open a page or create a new page that you want a new header background for.
2. Make sure the Custom Fields meta box is showing on the editor’s page. If not, at the top of the screen, click on Screen Options and then put a checkmark next to Custom Fields. Now it should show further below the editor.
3. Click on the text link in the Custom Fields box, labeled as “Enter New“.
4. The Name field, type in header_background
5. In the Value Field, paste in the File Url of the image you uploaded
   
6. Click on the “Add Custom Field” button.
7. Click Publish or Update for your page.
8. Now you should be able to view the page and see your new header background.

 How to Add a Header Caption

You have the choice of adding a header background if you want a different one from the default style, or you can keep the current one. This part of the tutorial will show you how to add a page header caption like the screenshot at the top of this tutorial page.

1. Open a page or create a new page that you want a new header background for.
2. Make sure the Custom Fields meta box is showing on the editor’s page. If not, at the top of the screen, click on Screen Options and then put a checkmark next to Custom Fields. Now it should show further below the editor.
3. Click on the text link in the Custom Fields box, labeled as “Enter New“.
4. The Name field, type in header_caption
5. In your original theme download, go to the HTML Snippets folder and open the custom-fields.txt file and copy the last line which is a sample header caption.
6. In the Value Field, paste that snippet
   
7. Click on the “Add Custom Field” button.
8. Click Publish or Update for your page.
9. Now you should be able to view the page and see your new header caption.

Screencast Tutorial