WordPress is a little bit funny in that everything is a post type but not everything is called a post, only blog posts are called posts. But, in WordPress, a page is a post type too.
With the WPHubSite Theme Page Headers pro module, you can create standard page headers for any post type. That means you can create a standard header for pages, posts. etc.
It’s a bit easier to explain what this help article will help you do with an example. This image is what a page title looks like by default if you haven’t disabled it.
The text that says “A Short Page” is the page title and will always be connected with the page title on the back end. This could be for a blog post or a page.
After we create a page header in this article you can have the title look something like this.
In the example above even the header of the page was modified. You can choose to only customize the title section or customize the title section and site header.
Ready to get started customizing the page headers with the WPHubSite pro module?
The first thing you need to do is activate the Page Headers module in the WPHubSite Theme.
With that activated now you can move on to configure a custom page header and assign it to any (or all) post types in WordPress.
Step 1: Hover over or click on Appearance in the WordPress admin bar.
Step 2: Click on Page Headers.
Step 3: Click the Add New button.
Step 4: Name your page header something relevant and easy to remember. You may want to name it for the pages you are planning on showing this page header on (ie. All Pages Header, Page Header, Post Header, etc.)
Step 5: Choose your layout. Here is what each layout does.
- Center Aligned: The title is centered with the breadcrumbs (if turned on) are centered beneath the title.
- Inline: The title is aligned left and the breadcrumbs (if turned on) aligned right on the same line.
- No Page Header: The title is turned off. This is useful if you’d like to control the site header or have the default state for page headers to show nothing.
Option 6: Select this box if you’d like breadcrumbs to show in the page header.
Option 7: Choose a color for the page header text.
Option 8: Customise the colors for breadcrumb text and links.
Option 9: Set either full screen or custom and then set your own padding. Be sure to also type the units of measure if using a custom setting (px, %, em. vh, etc.)
Option 10: Choose a background color. If you’re also going to upload a background image this color can be used as an overlay in which case you’ll also want to select an alpha value.
Option 11: Select an image and additional customizations.
Option 12: Choose this option to make the image parallax if desired.
Step 13: Click the Site Header tab.
Option 14: Choose this option if you’d like to override settings from the WPHubSite Theme customizer site header and use these instead.
Option 15: Choose this option only if you’d like to override the WPHubSite Theme customizer settings for the site logo. If you select this option you’ll also need to upload the image for the logo.
Option 16: Choose colors and settings for the site header.
Option 17: Customize the primary menu with colors that differ from the rest of the site header.
Option 18: Choose the menu you’d like to use as the primary menu or select the default which uses the theme settings.
Option 19: Choose a custom menu item or customizer settings. You can choose the following.
- None
- Search
- Text/HTML
- Widget
Note: Some options have additional settings that you’re able to customize once selected.
Step 20: Click the Display Rules tab.
These next settings are extremely important. Without settings them this page header won’t show on any page nor to any visitor.
Step 21: Choose which pages to display this page header on. You can choose a specific post type (such as posts) or even a specific post category. Use the Add Display Rule and Add Exclusion Rule buttons to add more rules to show this page header on a specific segment of your website.
Step 22: Choose the user role(s) who should see this page header. You can choose logged in or out users only or specific user roles for logged in users.
Step 23: Click the Publish button.
That’s it!
The page headers we just set up looks like this for our demo site.
