Author 诗语

Top Bar Widget Area

The top bar widget area sits on top of your header, and can hold as many widgets as you like.
You can find the widget area in Appearance > Widgets or Customize > Widgets.
In order for the below Customizer settings to appear, you must have at least one widget in the area.
Adjusting the layout
The top bar has a few layout settings which you can find in Customize > Layout > Top Bar.
Top Bar Width
Choose whether the outer container is full width or contained.
Top Bar Inner Width
Choose whether the inner container is full width or contained.
Top Bar Alignment
The initial alignment of your widgets. The widgets try to even themselves out for you.
If the alignment is set to left, the first widget you add will be on the left, the second widget you add will be on the right, the third widget you add will align back to the left and so on.
Spacing
The Spacing add-on adds four padding options to the widget area so you can choose the top, right, bottom and left padding. These options are also found in Customize > Layout > Top Bar.
Colors
The Colors add-on adds all of the color options you need for your widget area in Customize > Colors > Top Bar.
Background Images
The Backgrounds add-on adds all of the background image options you need in Customize > Background Images > Top Bar.
Secondary Navigation
If your secondary navigation is also set to be above the header, an option to merge the top bar widget area and secondary navigation is added in Customize > Layout > Top Bar.

Merging the Page Header & Site Header

Note: This section requires content to the added in the Content section of the Page Header meta box.
The Advanced section in the Page Header meta box allows us to merge our Page Header Content and our site header/navigation.
Page Header Advanced
Merge with site header
Enable the section by enabling the Merge with site header option.
Place content behind header (sliders etc..)
This option is useful if your page header background has been added to the Content section (a slider shortcode for example), and isn』t the default image or background video set in the meta box.
Site title
Change your site title color.
Site tagline
Change your site tagline color.
Custom Navigation Colors
Adjust the colors of your navigation so they match your page header. Enabling this option will make more options appear.
Page Header Custom Navigation Colors

generate_inside_comments

The generate_inside_comments hook appears inside the #comments element.
Usage
Please refer to the Using Hooks article to learn how to use this hook.

generate_inside_slideout_navigation

The generate_inside_slideout_navigation hook appears inside the .inside-navigation element within your Slide-out Navigation.
Usage
Please refer to the Using Hooks article to learn how to use this hook.

Page Header Template Tags

Page Headers have a list of dynamic template tags which you can add to your content.
These tags will pick up elements based on the page you』re currently viewing.
{{post_title}}
Will pick up the title of the page or post you』re currently viewing. It will also pick up the current taxonomy title if the Page Header is applied to a taxonomy (category, tag etc..).
{{post_date}}
Will print the published date of the post you』re currently viewing.
{{post_author}}
Will print the author of the post you』re currently viewing.
{{post_terms.taxonomy}}
This template tag will list the associated terms of the post you』re viewing. For example, if you want to display the categories the current post is added to, you would do this:
{{post_terms.category}}
If you wanted to display the product categories, you would do this:
{{post_terms.product_cat}}
For tags, you would do this:
{{post_terms.post_tag}}
As you can see, this template tag can be used to display terms from any taxonomy you want.
{{custom_field.name}}
This template tag allows you to display custom fields from the currently viewed post. This is one of the most powerful template tags, as it can be used to display nearly anything you like.
So we if we add a custom field and name it something like description, and give it a value:

We can then print this custom field inside our Page Header like this:
{{custom_field.description}}
If you want to print your featured image in your Page Header, you can do this:
{{custom_field._thumbnail_id}}
This will generate the full HTML for your featured image.

generate_typography_default_fonts

The generate_typography_default_fonts filter allows you to add font families to the system/default list in the Customizer.
Usage
Please refer to the Using Filters article to learn how to use this filter.
Example
add_filter( 'generate_typography_default_fonts','tu_add_system_fonts' );
function tu_add_system_fonts( $fonts ) {
$fonts[] = 'My Font Name';
return $fonts;
}

generate_sections_sidebars

Note: This filter is included in GP Premium.
The generate_sections_sidebars filter allows you to use sidebars with Sections add-on.
Learn how to use this filter here.
Usage
Please refer to the Using Filters article to learn how to use this filter.

generate_page_header_default_size

The generate_page_header_default_size filter allows you to change the default size of your featured images.
Default (string): full
The default available sizes are: full, large, medium and thumbnail.
You can create more sizes using the add_image_size() function.
Usage
Please refer to the Using Filters article to learn how to use this filter.

Page Header Content

When no Page Header content is added, only your image (if set) will be displayed on the page.
Once we add content, the image is removed in favor of our content and the page header options will work.
Page Header Content
Automatically add paragraphs
Similar to the option you see in Text widgets, this option will add paragraph tags to your content automatically.
Adding padding
This option will add padding to your page header content. The padding value is taken from your content.
Add background image
Enabling this option will use the image you have set in your Image section (custom image or featured image) and apply it as the background image for your page header area.
Enabling this option will also make the Use background color as overlay and Parallax effect options appear.
Add background image
Use background color as overlay
Requires the Add background image option to be enabled.
Enabling this option will apply the background color you have chosen on top of your background image.
Parallax effect
Requires the Add background image option to be enabled.
Enabling this option will apply a parallax effect (moves as you scroll) to your background image.
Container
Choose whether your page header outer container will be contained or full width.
If you choose full width, the Fullscreen option will be available to you.
Page header container
Inner container
Choose whether your page header inner container will be contained or full width.
Fullscreen
Requires the container type to be set to Full width.
This option will force your page header to take up the entire viewport of your page. If your header is displayed and not merged, the page header will calculate the remaining height below the header and will take up that remaining space.
Vertical center content
Requires the Fullscreen option to be enabled.
This option will align your page header content to the middle of your page header.
Text alignment
Align your page header content to the left, center or right.
Top/bottom & Left/right padding
Set the padding (inner spacing) of your page header element in pixels or percentage.
Colors
Set the background color, text color and link colors for your page header content.

Centering Your Logo in the Mobile Header

If you』re using the Mobile Header option along with a logo and search icon, you might want to change the layout a bit and place your mobile header logo in the center, and your mobile menu button on the left.
We can do this using a small snippet of CSS:
#mobile-header .site-logo {
position: absolute;
left: calc( 50% - 90px); /* 50% from the left - half your image width */
}

#mobile-header button.menu-toggle {
position: absolute;
left: 0;
}
The only part you need to tweak is the 90px. Adjust that value to exactly half the width of your mobile header logo.