Page Headers in GeneratePress: a tutorial

If you don’t know what page headers are see my “Page headers, what are they” post.

Making a page header

Go to Dashboard > Page Headers > Add New

Go to Dashboard Page Headers Add New
Go to Dashboard Page Headers Add New

The Page Header dialogue box

The most important settings are…

  1. Add a title for your page header
  2. Select the Content tab
  3. Type your content, you can use HTML and shortcodes
  4. If you want your page header to span the full browser width choose Container: Full Width
  5. If you want your page header to have a background image, make sure to toggle that option on
The Page Header settings dialogue box
The Page Header settings dialogue box

For the page header’s background image you have two choices…

You can choose a background image via the Page Header’s image tab.

Page Header choose an image
Page Header choose an image

What happens if you don’t select a specific image?

In that case the featured image you’ve selected for the page or post, where this page header displays, will be used as the page header’s background image. And remember, you can also choose to use a background color instead of a background image.

Selecting a page header for the individual post you are editing

  • Scroll down the page you are editing and find the Layout dialogue box.
  • Select the Page Header tab.
  • From the drop down list, choose any page header you have previously made.
 Choosing a page header for an individual post or page
Choosing a page header for an individual post or page

Setting a page header for a single post is fine. But what do you do if you want to use the same page header on every post in your blog, or every page on your site? The answer is, you use global locations…

Global Locations: combining featured images and template tags

If you let WordPress draw in the featured image to use as the page header background image. And you draw in the page title automatically using a template tag. You can make a single page header that looks uniform across your whole blog. And the best part is that once you’ve set up the page header, WordPress will automatically use it in all of the instances you’ve specified.

All you need to learn is how to use template tags and Global Locations…

Template Tags

If you’re happy to use a small piece of code, you can automatically draw in the post title etc.

1.) You need the Template tags dialogue box to do this.

Two useful options are…

2.) post_title
3.) custom_field.name

The page header template tags
The page header template tags

What are Global Locations?

First you make a page header that automatically draws in the post title using a template tag (see image above).

Then set that page header to be used on all blog posts via the Global Locations tab in the Dashboard.

Global Locations for posts and pages
Global Locations for posts and pages

These are just the basics

What I’ve explained on this page covers just the basics of page headers and global locations but it should help you get started.

Once you understand these basic principles you can move on to build really good looking page headers for any or all of the pages on your site.