Author 诗语

Content Container

Starting in GeneratePress 3.0, the previous Page Builder Container option has been renamed to Content Container option.

Default

The default option means that the Content Padding option in the customizer would apply:

Full Width

The Full Width option set the content area to be 100% of the screen width and allows for full width sections using GenerateBlocks or page builders.

This option also remove the default content padding set in the customizer so GenerateBlocks or page builders can have complete control of the content padding.

Contained

The Contained option simply removes the content padding set in the customizer so GenerateBlocks or page builders can have complete control of the content padding.

Apply the Option to Multiple Pages or Globally

The Layout metabox shown in the first screenshot here allows you to choose the setting per page. You can also create a Layout Element to apply the setting to multiple pages/posts or globally.

Block Element Overview

Block Elements are available as of GP Premium 1.11.0.

Block Elements allow you to use the WordPress block editor to create hooks, site headers, site footers and sidebars.

Creating a Block Element

First, make sure the Elements module is activated in Appearance > GeneratePress.

Now, go to Appearance > Elements and click the Add New Element button at the top of the page.

Add New Element

Now you can choose the Block option from the dropdown, and click Create.

Create Block Element Type

This will open up the block editor, just like you』re creating a new post or page.

The cool thing here is the content we create in the block editor can be hooked into your website anywhere you want.

Block Element Options

After the editor, you』ll see we have some options.

Block Element Options

The first option is the Block Type.

As of right now, we have 5 block types.

Block type

Hook type

This type allows you to add your Block Element content to any hook inside GeneratePress. This is great for things like author boxes, CTAs, top bars, footer bars, or even page heroes. There is no limit to the number of things you can build and hook into your website.

Hook (Required) – Choose the hook where you want to insert the content.

Priority (optional) – Set the priority of this element. This is useful when there are multiple elements added to the same hook. Lower priorities display higher up on the page than lower priorities.

Site Header type

This type will replace your GeneratePress site header. This means you can use the block editor to build your very own custom header, and replace your default header with it.

Site Footer type

Just like the Site Header option, this will replace your site footer (widgets and footer bar) with a custom Site Footer you』ve created.

Site Footer Block Type

Right Sidebar type

This type will replace the entire right sidebar with what you build in the editor. This option requires a default right sidebar to exist on the page it』s applied to.

Right Sidebar Block Type

Left Sidebar type

Just like the Right Sidebar option but for the left sidebar.

Display Rules

Just like our other Element types, we have Display Rules.

Display Rules

In order for your Block Element to display anywhere on your website, you must set certain conditions within the Display Rules tab.

These settings allow you to display your element throughout your site. You can choose specific pages, posts, categories etc.. You can even tell the element to display across your entire site.

You can also exclude the element using the same conditions. For example, you can tell your element to display throughout your entire site, excluding the About page.

Location (required) – Choose when this element should display.

Exclude (optional) – Choose when this element should not display.

Users (optional) – Display element for specific user roles.

Using the Block Editor

Building a Block Element is exactly like using the block editor to build your pages and posts – all of the same blocks are available to you.

GenerateBlocks

We suggest our very own GenerateBlocks plugin to build your Block Elements. It』s free, and it』s integrated tightly with GeneratePress and Block Elements. There is no limit to the things you can build with this combination.

Third-party block plugins

Unfortunately, third-party block plugins likely will not style themselves properly when used as Block Elements. This is because these plugins scan the page content for their blocks and compile their CSS/styling based on what they find.

Block Elements are not within the page content. Therefore, these plugins will likely not recognize their blocks are in use unless they specifically integrate with Block Elements.

GenerateBlocks is aware of your Block Elements and will work perfectly with them.

Core blocks

Core WordPress blocks do not compile dynamic CSS, so they should work perfectly within Block Elements with no issues.

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 '>>';
} );

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);
}

Text too small to read and Clickable elements too close together

Two of the most common mobile usability alerts raised by Google search console or a Mobile Friendly test are: Text too small to read and Clickable elements too close together. However they are often a false negative and many users find themselves at a loss on how to fix the issue.

The reasons for this are:

Text is too small to read and or clickable elements are too close together.The Site needs optimizing to make it easier for Search Engines to perform a valid test.They are a false negative due to crawling and testing of sites when Google server resources are low. See point 2.

Perform a visual check

When you receive an alert the first thing is to check the affected pages on a real mobile device.  It is advisable to use an Incognito / Private Browser as this will eliminate you seeing a cached version of the page instead of the latest version. Note: some routers and ISPs also cache pages so you may want to check on a different network. If in doubt ask a friend to check.

My page looks a mess

If your site looks like it is missing styles then these alerts are just symptoms of a bigger issue. It is most likely related to caching or the server not being able to complete the necessary requests resulting in 404 or 500 errors visible in the the browser developer tools console. The first step in diagnosing an issue is to temporarily disable any cache or optimization plugins. Then review the site again.

Text legibility

If you』re finding you need to pinch zoom in order to read the text easily then the odds are your text is too small to conform to legibility guidelines. Whether Google alerted you or not. Increase your font-sizes and line-heights if necessary to remedy that issue. We recommend a minimum body font size of 16px. This ensure elements that are displayed as a % of the body size do not fall below the recommended 12px minimum.

Click elements

You should be able to click an element without your finger tip overlapping a neighbouring clickable element. If thats not the case then look at increasing its size. The size of an element can be controlled by many means. For example a buttons size may be defined by its font size and padding. Social icons may be visually small but you can add more padding to increase the tap target size. Lists of links may need an increased line-height to separate them.

Lighthouse report

If your having difficulty identifying an issue then run a Chrome developer tools Lighthouse report:https://developers.google.com/web/tools/lighthouse

These two articles will help:Text too small to read: https://web.dev/font-size/

Clickable elements too close together: https://web.dev/tap-targets/

My site passed all of the tests, so why am i receiving these alerts?

What you see and what Googlebot sees maybe two different things. Correctly displayed sites rely on all of the necessary stylesheets and javascript files to be loaded. Receiving these alerts when your site looks correct means that googles servers were not able to load all of them. There are two main reasons for this:

Blocked by Robots.txtOther error

To find out which ones are the cause run a mobile friendly test:

https://search.google.com/test/mobile-friendly

Click the Page Loading Issues links to see if any Stylesheets or Javascript files are reported.

Blocked by Robots.txt

Edit your robots.txt to ensure the relevant resources including /wp-admin/ are not disallowed. The bottom line is; do not block CSS and JS files.

Most SEO plugins provide tools for editing your robots.txt file or your hosting company should be able to help you access the file via FTP or a server console file editor.

Other Error

This rather ambiguous error simply means Googles server resource limit was exceeded by the number of network requests your site required or the time it took to complete them.

There are lots of factors in how the Google resource limit is calculated when it crawls and fetches your site. But it also varies considerably depending on how busy its servers are at the time.

To eliminate the possibility that Google is extremely busy, take a break and come back later and perform another Mobile Friendly Test. Remember running continuous tests of your site will just place more strain on their servers resources and increase the chances of more failed tests.

Continual mobile usability alerts or Mobile Friendly test Fails

If your site continues to fail its test due to the Other issue than your Site could probably do with some optimization.  The better your site performs the less likely it will exceed Googles available resources.

Optimization

We don』t go into depth here on optimization as this is a complex task that varies from site to site. However one of the main issues we see is Sites making a large number of network requests. You can get a quick summary of this by using many of the online testing tools such as GT Metrix.

To put network requests into perspective, a clean install of the GeneratePress theme makes only 3 requests ( in GP 3.0 there will only be 2 ) in addition to the 3 default WordPress requests. The generatepress.com site makes around 36 which considers premium functions, fonts and images. 

If your site is making 50 or more requests, we have seen cases of 300+,  then you need to reconsider what is important and look at trimming back on those plugins, fonts, images or adverts.

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 '<<';
} );

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 );

Elements Overview

The Elements module requires GP Premium 1.7 or newer.

This new powerful module replaces the Page Header and GP Hooks modules. Of course, those modules will still exist and function as they do now if you』re using them. When and if you』re ready, you』ll be able to manually migrate your old Page Headers and Hooks to Elements.

Once you』re done migrating, you can deactivate the old modules, and they will disappear from the list.

New installations will no longer be able to activate Page Header or GP Hooks.

Header Element Overview

Hooks Element Overview

Layout Element Overview

Block Element Overview

generate_before_secondary_navigation

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

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.