GeneratePress 文档

generate_before_secondary_navigation

The generate_before_secondary_navigation hook appears just before the #secondary-navigation element.

generate_previous_link_text

The generate_previous_link_text allows you to change the text in .paging-navigation element.

For example, if we want to use << instead of the default text Previous:

add_filter( 'generate_previous_link_text', function() {
return '<<';
} );

generate_next_link_text

The generate_previous_link_text allows you to change the text in .paging-navigation element.

For example, if we want to use >> instead of the default text Next:

add_filter( 'generate_next_link_text', function() {
return '>>';
} );

generate_after_header

Note: This hook is included in the GP Hooks add-on inside GP Premium.
The generate_after_header hook appears right after the closing

 element.
Usage
Please refer to the Using Hooks article to learn how to use this hook.

Navigation as a Header

Using navigation as a header as seen above is one of the most popular and requested layouts currently. Starting in GP Premium 1.8, you can find this option under Layout > Header:

Basic

Make sure there is a site title or/and a logo in added Site Identity.Check to activate Use Navigation as Header option above.Adjust the logo and navigation height by changing the Menu Item Height.

Sticky Navigation with Height Transition

To create transition effect above, first you need to complete the Basic steps above, then follow the additional steps below:

Set Sticky Navigation to Desktop only or Both.Set Transition to None.Set Sticky Navigation Height to a number smaller than step 3 above.

Merge with Header Elements

We also have the option to merge the header navigation with a page hero in our Header Element as seen above. Follow the Basic steps first, then the Height Transition steps if it』s desired, then we are ready to merge with the options detailed in the Transparent Header and Navigation article.

Different Logo and Navigation Colors

If you want to use a different logo and navigation colors to match a specific page hero, you can do so by uploading the logo in Navigation Logo and change the Navigation Colors under the Site Header tab for that specific page hero.

Adding the Site Tagline

The site tagline is removed by default when this option is activated as there typically isn』t enough space for it. However, you can add it back in using this PHP snippet:

add_filter( 'generate_site_title_output', function( $output ) {
$tagline = '

';

return $output . $tagline;
} );

cURL error 28: Connection timed out

This error can happen when trying to activate your license key, or while trying to update GP Premium.

WordPress uses something called cURL to communicate with other websites, specifically using this function: wp_remote_post()

This is a core WordPress function that we use to verify license keys and perform updates.

It』s necessary for your website to communicate with our website, as we need to know the license key you』ve input so we can validate it in our records, and then send a response back to your website to activate it.

When cURL times out, it typically means one of the two websites is blocking that communication. This can happen via firewalls or other means of server security.

The first thing to do is go through this list. Your hosting support should be able to help you with most of it.

Make sure your server is running a recent version of PHP and the cURL library.Try increasing your PHP memory limit.Try increasing your cURL timeout limit.Ask your host if there is some limitation with wp-cron, or if loopback is disabled.Ask your host if there are firewall or security modules (e.g. mod_security) that could block the outgoing cURL requests.Install the Query Monitor plugin and check the status of the HTTP API Calls in the admin page where the error is displayed.

If none of the above fixes the issue, you will need to ask your hosting support to confirm that your server can communicate with our server (generatepress.com) via cURL without any limitations.

If they are sure there are no limitations, you can contact us with your server IP (where the request is coming from), and we』ll make sure it isn』t banned on our server (this is very rarely the case). Our server processes hundreds of these cURL requests successfully every day.

This article also has some great information on this specific error and may help you/your hosting support team debug the issue.

Mobile Header

Note: This option requires the Menu Plus add-on in GP Premium.

The mobile header option is found in Appearance > Customize > Layout > Header.

This option disables the default website header on mobile devices:

and replaces it with a streamlined version:

The mobile header inherits your navigation colors set in Customize > Colors > Primary Navigation.

Breakpoint

Customize the px number when the mobile header kicks in. The default value is 768px.

Branding Type

Add the site title or a logo in the mobile header. It is recommended that the logo should be quite small – kind of like an icon for your website.

The height of the logo is determined by the menu item height option with mobile toggle activated.

If you want to adjust the logo size independently from the menu item height, then use this CSS :

.navigation-branding img,
.site-logo.mobile-header-logo img {
height: 130px;
}

There are also 10px of default top and bottom padding which can be removed with this CSS:

.site-logo.mobile-header-logo img {
padding: 0;
}

Sticky

Activate sticky mode for the mobile header.

Hide when scrolling down

Checking this option will hide the sticky mobile header unless you』re scrolling up towards the top of the site. This can save you valuable screen space.

Adding HTML Inside the Mobile Header

You may want to add more elements inside your mobile header like social icons, a phone number etc..

You can do so using the inside_mobile_header in the Hooks Element module.

Adjusting the Featured Images

Note: These options require the Blog add-on in GP Premium.

The featured images layout options are separated for Archives (blog index, categories, archives and tag pages), Posts (single posts) and Pages (static pages) by using the toggle button.

You can find these options under Customizer > Layout > Blog.

Display featured images – Show or remove the featured images.
Display padding around images – Show or remove the padding around featured images (only available when alignment is set to center).
Location – Set the location of featured images. The options are below title and above title (single only).
Alignment – Set the alignment of featured images. The options are center, left and right.
Media Attachment Size – Set the size of your featured images. These sizes are set in 「Settings > Media」, or you can add your own.
Width & Height – Set the width and height of the featured images. These options do not physically resize your images. They will attempt to find an existing image at your set size. If one does not exist, these options will use CSS to resize the image. For performance reasons, you』re better off using the Media Attachment Size option above.

Changing the featured image sizes using a filter

In some cases, you might need to adjust the featured image sizes based on different conditions. For this, we can use the following filter:

add_filter( 'generate_blog_image_attributes', function( $atts ) {
// Set up our conditional
if ( is_post_type_archive( 'portfolio' ) ) {
$atts[ 'width' ] = 300;
$atts[ 'height' ] = 300;
$atts[ 'crop' ] = true;
}

// Return our options
return $atts;
} );

You can use this filter under any conditions you need by using the WordPress conditional tags.

Learn how to add PHP here.

Changing the featured image size for a featured post

First, create two new image sizes – one for the main posts and one for the featured post using the instruction here.

Then, regenerate your thumbnails and set your Media Attachment Size option to the size for your main posts using the instruction here.

Then add this PHP snippet:

add_filter( 'generate_page_header_default_size', function( $size ) {
$classes = get_post_class();

if ( in_array( 'featured-column', $classes ) ) {
return 'your-featured-image-size-name';
}

return $size;
}, 20 );

Navigation Dropdown

The Navigation Dropdown option can be found in Appearance > Customize > Layout > Primary Navigation.

This option allows you to choose how your navigation dropdown menu is initiated.

Hover

The hover option makes it so your dropdown menu appears when you hover over the parent menu item.

Click – Menu Item

This option makes it so you have to click the entire menu item in order for the dropdown menu to appear. This disables the parent menu item link, as clicking only opens the dropdown menu.

Click – Arrow

This option makes it so you have to click the dropdown menu arrow in order to open the dropdown menu. This option is good if you want to keep the parent menu item link.

Dropdown Direction

Starting in GeneratePress 2.2, you can now change the direction of the sub-menu when you』re using a regular hover dropdown type.

Changing the opening speed/transition of the hover dropdown menu

It』s possible to change the speed and transition of the dropdown menu when you hover over the parent menu item.

.main-navigation:not(.toggled) ul ul {
transition: opacity 0ms linear;
}

.dropdown-hover .main-navigation:not(.toggled) ul li:hover > ul {
transition-delay: 0ms;
}

Opening the 「click」 dropdown items to the right

By default, sub-menus that appear on hover are opened to the right. However, sub-menus that appear on click open vertically.

To make them open to the right just like the hover dropdowns, you can use this CSS:

.dropdown-click .main-navigation ul ul ul,
.dropdown-click .secondary-navigation ul ul ul {
left: 100%;
top: 0;
position: absolute;
}

.dropdown-click .main-navigation ul ul .dropdown-menu-toggle:before,
.dropdown-click .secondary-navigation ul ul .dropdown-menu-toggle:before,
.dropdown-click .main-navigation ul ul .menu-item-has-children.sfHover>a .dropdown-menu-toggle:before {
content: "f105";
}

Open sub-menus to the left

In some cases you might need the dropdown menu to open to the left, especially if your navigation is floating right and you don』t have enough space at the right side of the screen for them to open.

You can do this with some CSS:

.main-navigation:not(.toggled) ul ul {
left: auto;
right: 0;
}

.dropdown-hover .main-navigation:not(.toggled) ul ul li:hover>ul {
left: auto;
right: 100%;
}

.main-navigation .main-nav ul ul li.menu-item-has-children > a {
padding-left: 0;
padding-right: 20px;
}

.main-navigation ul ul .menu-item-has-children .dropdown-menu-toggle {
float: left;
padding-left: 20px;
padding-right: 15px;
}

.main-navigation .children .dropdown-menu-toggle:before,
.main-navigation .sub-menu .dropdown-menu-toggle:before {
content: "f104";
}

Opening specific sub-menus to the left

If you don』t want to open all sub-menus to the left (above), you can apply this to specific sub-menus only.

First add open-left to the Custom Classes field for the far right menu item.

Then add this CSS:

.dropdown-hover .main-navigation:not(.toggled) ul .open-left ul {
left: auto;
right: 0;
}

.dropdown-hover .main-navigation:not(.toggled) ul .open-left li:hover>ul {
left: auto;
right: 100%;
}

.main-navigation .main-nav ul .open-left ul li.menu-item-has-children > a {
padding-left: 0;
padding-right: 20px;
}

.main-navigation ul .open-left ul .menu-item-has-children .dropdown-menu-toggle {
float: left;
padding-left: 20px;
padding-right: 15px;
}

.main-navigation .open-left .children .dropdown-menu-toggle:before,
.main-navigation .open-left .sub-menu .dropdown-menu-toggle:before {
content: "f104";
}

If you are using the SVG icon type, then this CSS is also needed:

.dropdown-hover .open-left .sub-menu .dropdown-menu-toggle .gp-icon svg {
transform: rotate(90deg);
}

generate_logo

The generate_logo filter allows you to change your logo.

Default (URL): Your logo set in Customize > Site Identity.

Usage

Please refer to the Using Filters article to learn how to use this filter.

Examples

If you want to show a different logo inside categories, you could do this:

add_filter( 'generate_logo', function( $logo ) {
// Return our category logo URL
if ( is_category() ) {
return 'URL TO YOUR CATEGORY LOGO';
}

// Otherwise, return our default logo
return $logo;
} );

If you want to show a different logo for different languages, you could do this:

add_filter( 'generate_logo', function( $logo ) {
if ( ICL_LANGUAGE_CODE == 'en' ) {
return 'URL TO ENGLISH LOGO';
}

return $logo;
} );