Author 詩語

Merging the Header/Navigation & Content

One option our Page Header add-on has is the ability to merge your header & navigation with your page header content.
This works great if you』re using the Page Header add-on to add content, but doesn』t help if you』re using a page builder like Elementor or Beaver Builder to build your page and need to achieve the same effect.
Luckily, we can still use the Page Header to achieve this look, even without using the content area in the add-on.
Create a Page Header
The first thing we need to do is create a new Page Header. Go to Pages Headers > Add New and give your Page Header a name.
Enabling content options in the Page Header
Even though we』re not using the content area in the Page Header, we still need to enable all of the options that come with adding content. We can do this by adding an HTML comment into the content textarea like this:

Page Header with faux content
Note: Your Content settings should look exactly like the above. The only two things you need to do is add the empty element and set the container type to full width – nothing else.
Setting the container type
Now we want to set the Container type option (shown in the screenshot above) to Full Width.
Merging our header
Now navigate into the Advanced tab, and enable the merging of the header and your content.
Page Header Merged
The key here is the Place content behind header (sliders etc..) option. This is what will place our header on top of our page we』ve built using our favorite page builder.Then of course you can style your site title and navigation to look good with the design of your page.
Now publish your Page Header.
Applying it
Now that we have our Page Header built, we need to apply it to our pages. We can choose between applying it globally to all of our pages, or applying it to single pages.
To apply it to all of our pages globally, go to Pages Headers > Global Locations and use the dropdown next to Pages to choose our newly created Page Header.
Setting a Page Header for all pages
We can also choose to apply it to a single page. We just need to edit that specific page, and choose our Page Header to display.
Apply Page Header to single page

generate_dashboard_page_capability

Note: This is a new filter in GeneratePress 2.0
The generate_dashboard_page_capability filter allows you to set the required user role for viewing the Appearance > GeneratePress page in the Dashboard.
Default (string): edit_theme_options
Usage
Please refer to the Using Filters article to learn how to use this filter.

Menu Item Height & Width

Note: These options require the Spacing add-on in GP Premium.
We can adjust the width and height of our menu items, as well as the height of our sub-menu items in Customize > Layout > Primary Navigation.
Note that this can be adjusted separately for desktop and mobile by using the toggle buttons.
Menu item size options
 
Width
This option adds the value to the left and right of your menu item item text. 20 = 20px on either side of your text.
Height
This value determines the height of your menu items. 60 = 60px tall.
Sub-Menu Item Height
This value determines the height of your sub-menu items. 10 = 10px on top and bottom of the text.
Sub-Menu Item Width
The sub-menu item width is default at 200px. In some cases you may want to increase the width to keep the text in one line.
Here are a few methods using CSS:
Specify a width:
.main-navigation ul ul {
width: 250px;
}
Auto adjust width to match the longest sub-menu item:
.main-navigation ul ul {
width: auto;
white-space: nowrap;
}
Inherit parent menu item width:
.main-navigation ul ul {
width: 100%;
}

Back to Top Button

You can find the option to turn on the back to top button in Customize > Layout > Footer.
This option adds a button to the bottom of your website once you start scrolling that helps your visitor scroll back to the top of the page.
Moving the button
By default, the button appears at the bottom right of your page. We can move it around using some CSS:
.generate-back-to-top,
.generate-back-to-top:visited {
bottom: 30px; /* 30px from the bottom of your screen */
left: 30px; /* 30px from the left of your screen */
}

In the above example, we replace the default right: 30px; with left: 30px;.
Learn how to add CSS here.
Changing the color
If you have GP Premium, you can change the color in the Customizer by going to Customize > Colors > Footer.
Otherwise, we can change the background color and other styles using some CSS:
.generate-back-to-top,
.generate-back-to-top:visited {
background-color: rgba( 0, 0, 0, 0.4 ); /* rgba or hex */
color: #FFFFFF;
}

/* the button when you hover/click it */

.generate-back-to-top:hover,
.generate-back-to-top:focus {
background-color: rgba( 0, 0, 0, 0.6 ); /* rgba or hex */
color: #FFFFFF;
}

Learn how to add CSS here.
Other styles
Many other styles can be added to the button using CSS:
.generate-back-to-top,
.generate-back-to-top:visited {
border-radius: 3px; /* how round the button is */
line-height: 40px; /* how tall it is */
width: 40px; /* how wide it is */
}

Learn how to add CSS here.
Change how fast it scrolls you to the top
We can change how long it takes to scroll back to the top of the page with a simple filter:
add_filter( 'generate_back_to_top_scroll_speed', 'tu_back_to_top_scroll_speed' );
function tu_back_to_top_scroll_speed() {
return 400; // milliseconds
}

Learn how to add PHP here.
Change how far from the top it appears
By default, it will show up once you hit 300px from the top of the page. We can adjust this with a filter:
add_filter( 'generate_back_to_top_start_scroll', 'tu_back_to_top_start_scroll' );
function tu_back_to_top_start_scroll() {
return 300; // 300px from the top
}

Learn how to add PHP here.

generate_page_header_parallax_speed

The generate_page_header_parallax_speed filter allows you to adjust the speed at which the page header parallax script moves your background image.
The default speed is 2, and I wouldn』t suggest going much lower than 1.5. The level of effect is dependent on the height of your image, as well.
Usage
add_filter( 'generate_page_header_parallax_speed', 'tu_adjust_page_header_parallax' );
function tu_adjust_page_header_parallax() {
return 2;
}

generate_fontawesome_essentials

By default, GeneratePress includes the entire Font Awesome library for you to use.
While this is super useful, it』s a pretty big library.
If you don』t need to use Font Awesome, you can use the generate_fontawesome_essentials filter to make it so only the essential icons for the theme are loaded.
Usage
add_filter( 'generate_fontawesome_essentials', '__return_true' );

generate_inside_mobile_header

Note: This hook is included in GP Premium.
The generate_inside_mobile_header hook appears inside the #mobile-header element.
Usage
Please refer to the Using Hooks article to learn how to use this hook.

generate_logo_title

The generate_logo_title filter allows you to change the ALT tag of your logo.
Default (string): Your Site Title set in Customizer > Site Identity
Examples
add_filter( 'generate_logo_title', 'tu_change_logo_alt' );
function tu_change_logo_alt() {
return 'Your alt title';
}
Usage
Please refer to the Using Filters article to learn how to use this filter.

Header Widths & Alignment

Header layout options for GP can be found in 「Appearance > Customize > Layout > Header」.
Header Width
The 「Header Width」 option is the outer container of your header. This outer container is what your header background color or image is applied to.
Setting this to 「Full」 will make your background color/image span the entire width of your screen.
Setting it to 「Contained」 will contain it to the width of your container, set in 「Appearance > Customize > Container」.
Inner Header Width
The 「Inner Header Width」 option refers to the inner container which holds the content of your header (site title, logo, widget etc..).
Setting this to 「Full」 will make your header content span the entire width of your screen.
Setting it to 「Contained」 will contain your header content to the width of your container.
Header Alignment
You can choose to align your header content to the left, center or right.

generate_sidebars

Note: This hook has been removed starting in GeneratePress 2.0 as it was causing a PHP bottleneck and hurting performance.
If you』re using a child theme with custom page templates, you will need to replace this hook with the new generate_after_primary_content_area hook, and add the sidebars function. You can see these new elements by viewing the page.php file in 2.0.
Of course, we kept backward compatibility so your sidebars won』t disappear when you update.