The generate_page_hero_post_author allows us to alter the HTML of the post author when using {{post_author}} template tag in header element.
Example
If we don』t want a link surrounding the post author:
add_filter( 'generate_page_hero_post_author', function() {
global $post;
$author_id = $post->post_author;
return sprintf( '',
esc_html( get_the_author_meta( 'display_name', $author_id ) )
);
} );
The Header element replaces our old Page Header module. This element has most of the same options as the old Page Headers. If you need help migrating from your old Page Header, see this article.
For examples of page heros, please see this article.
For a step by step guideline of creating a page hero, please see this article.
The Header element module is one of the most popular features of GP Premium and the amount of options available can definitely be overwhelming at the beginning. If you are struggling to make a page hero, the following steps should provide a quick guideline on how to get started.
For detailed explanation of each option, please see this article.
For examples of page heros, please see this article.
Step 1: Add the Content
First, decide whether if you want some content in the page hero or not.
If you only want to use the background image without adding any content, simply add some HTML comments:
If you do wish to add some content, the content box accepts any HTML (headings, paragraphs etc.), shortcodes (slider, contact forms etc.)
A common example for the front page would be a catch phrase to capture your audience:
For posts and pages, you can take advantage of our template tags to output the things like post title and entry meta:
{{post_author}} {{post_date}}
You can then use the color options to set the text, link and link hover colors of your content.
Step 2: Choose a Background
There are basically 3 choices for the background:
Solid Color: If you only want a solid color behind your content like this example, simply select the desired color in the background color option.
Featured Image: This option uses the Featured Image added in the pages or posts as the background image. A very common choice the page hero of posts.
Custom Image: This option allows you to upload a custom image specific for this page hero.
If you choose either the Featured Image or Custom Image option above, you will see the following additional options:
Background Image PositionParallaxDisable Featured ImageBackground Overlay
Step 3: Set the Width
The width property of the page hero is determined by the Container and Inner Container options.
Container
Full: The page hero will span the entire width of the screen.
Contained: The page hero will be the same width as the container.
Inner Container
Full: The content will span the entire width of the screen.
Contained: The content will be the same width as the container.
Step 4: Set the Height
The height property of the page hero, or how much the background or background image shows, is determined by the top and bottom padding options.
Step 5: Position the Content
The horizontal position of the page hero content is determined by the horizontal alignment option:
The horizontal position can also be fine tuned by using the left and right padding options:
Similarly, the vertical position can be fine tuned by using the top and bottom padding option:
Optional Step: Merge with Site Header
If you wish to merge the page hero with the site header and navigation like this:
Head to the Site Header tab and select either Merge or Merge on Desktop Only. Then the additional options will appear for further customization:
Full ScreenOffset Site Header HeightHeader BackgroundSite LogoNavigation LogoNavigation LocationNavigation Colors
Note: This option requires the Menu Plus add-on in GP Premium.
Starting in GP Premium 1.8, the former Slideout Navigation panel is replaced by the off canvas panel.
First, make sure there is a menu assigned to Off Canvas Menu under menu settings
You can choose to activate your off canvas panel on mobile, desktop, both or disable it completely.
Style
Slide – This is the typical slideout navigation. You can also choose the side it slides out and where the close button is positioned.
Overlay – This is the full-screen overlay style off canvas panel that has been increasingly popular nowadays. When activated, you can choose Set Overlay Defaults and let GP style it for you. These settings can also be changed in Colors > Off Canvas Panel and Typography > Off Canvas Panel.
Menu Item Height
Set the menu item height for the off canvas panel.
Off Canvas Panel Widget Area
The off canvas panel has a widget area, which you can add widgets to in Appearance > Widgets or Customize > Widgets.
You can simply use for widgets, and leave out the navigation completely if you like!
Use Off Canvas Menu Only
Some users wish to use off canvas menu only on desktop. This can be done with the simple method below:
First, create a menu with the desired items and assign it to Off Canvas Menu in theme locations.
Then create an empty menu and assign it to Primary Menu in theme locations
Then you can head to navigation location to adjust the position of the toggle.
Empty Off Canvas Navigation
If you have activated the off canvas navigation but the menu items aren』t showing up:
Then make sure you have a menu assigned to off canvas menu in Theme Location.
The generate_more_jump filter allows you to remove or change the #more-x anchor that』s added to your read more URLs when using the more tag.
Default (string): #more-PAGEID
Usage
To remove the more anchor, simply add this PHP:
add_filter( 'generate_more_jump', '__return_false' );
Note: This option no longer exists as of GP Premium 1.8. Please see our Navigation as Header option instead.
You can upload a logo inside your navigation by going to Customize > Layout > Primary Navigation.
See this article if you wish to display your site title instead of navigation logo.
Uploading a navigation logo will place it inside your navigation to the left of your menu items.
The Navigation Logo Position option has 3 choices:
Sticky – your navigation logo will only appear in the sticky navigationStatic – your navigation logo will only appear in your static navigation – meaning it』s not sticky.Sticky + Static – your navigation logo will appear in both your sticky and static navigation.
Float Navigation Logo Outside Container
Float logo outside container
The steps above show you how to use the navigation as header. In some cases, users would like to float the logo outside the container.
Activate Use Navigation as Header option.Add the following CSS:
.main-navigation .site-logo.navigation-logo {
position: absolute;
left: 0;
top: 0;
}
.main-navigation .site-logo.navigation-logo img {
height: auto; /* Set the image height of logo in px */
}
The generate_page_hero_location allows you to move a page hero to other available hooks.
For example, the following PHP snippet would move it to the generate_before_content hook:
add_filter( 'generate_page_hero_location', function() {
return 'generate_before_content';
} );
The generate_elements_show_object_ids filter allows you to activate the ID next to the title in the Display Rules.
To enable this, add the following PHP snippet:
add_filter( 'generate_elements_show_object_ids', '__return_true' );
WordPress has an awesome menu builder built in, allowing you to create awesome menus you can drag and drop to sort, and drag to indent items you wish to turn into a sub-menu.
This article goes over some of the functionality of the menu builder.
Create a new menu
How to add pages to your menu
Creating a drop down menu
Creating a drop down menu with custom links
Do you want your parent page to not link anywhere? Use custom links to achieve this!
Hint: If you don』t want your item to act like a link, remove the # once it』s added to the menu (the # is necessary to add it in the first place).
Setting a theme location
When Secondary Navigation Add-on is activated
When Menu Plus Add-on is activated
Adding Custom Classes
Opening in a New Window/Tab
Header Presets
Header Widths & Alignment
Navigation as a Header
Header Padding
Mobile Header
