GeneratePress loads the child theme stylesheet by default if a child theme is active.
The generate_load_child_theme_stylesheet filter allows you to disable that so you can add your own child theme stylesheet.
add_filter( 'generate_load_child_theme_stylesheet', '__return_false' );
By default, the HTML for the published date and updated date (if it exists) is added to your site. The updated date is hidden with CSS.
If you only want the updated date HTML to display use the generate_post_date_show_updated_only below:
add_filter( 'generate_post_date_show_updated_only', '__return_true' );
The generate_before_do_template_part hook appears at the start of generate_do_template_part() function.
The generate_footer_entry_meta_items allows us to re-order or add footer meta items.
Example
If we want to move the date from header entry meta to the footer entry meta and before categories and comments link, we can use this PHP snippet:
add_filter( 'generate_footer_entry_meta_items', function() {
return array(
'date',
'categories',
'comments-link',
'post-navigation',
);
} );
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
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.
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.
Note: This option requires the Spacing add-on in GP Premium.
You can adjust the width of your sidebars in Customize > Layout > Sidebars.
The widths are percentage based, and the width of the content area is determined by the width of the sidebars.
Fixed Width
If you prefer to use a fixed width sidebar on desktop, try using the following CSS:
@media (min-width: 769px) {
#right-sidebar {
width: 300px;
}
.inside-right-sidebar {
padding-right: 20px;
}
body:not(.no-sidebar) #primary {
width: calc(100% - 300px);
}
}
Using a filter
In some cases you might want to set the width of your sidebar(s) differently than the global setting.
For this, we can use some PHP. For example, the right sidebar:
add_filter( 'generate_right_sidebar_width','tu_custom_right_sidebar_width' );
function tu_custom_right_sidebar_width( $width ) {
// If we're on the home page
if ( is_front_page() ) {
return 40;
}
// Return the default
return $width;
}
add_filter( 'generate_left_sidebar_width','tu_custom_left_sidebar_width' );
function tu_custom_left_sidebar_width( $width ) {
// If we're on a category
if ( category() ) {
return 40;
}
// Return the default
return $width;
}
Learn how to add PHP here.
When setting your custom value, set it as an integer while remember it represents a percentage. The above example is assuming we want a 40% wide sidebar.
You can use any of the available WordPress conditionals.
The header widget area allows you to put any kind of widget in it and it will show up on the right side of the header area.
This leaves some space in the center of the header. If you would like to use this area by splitting the header in three, try the following steps:
1. Create a new Hook Element:
2. Set the hook to header and check the 「Disable Site Header」 checkbox.
3. Add the following HTML in the content area:
4. Add the CSS below:
.header-section {
display: flex;
flex-wrap: wrap;
}
.header-section > div {
width: calc(100% / 3);
}
@media (max-width: 768px) {
.header-section > div {
width: 100%;
text-align: center;
}
}
5. This is the basic result:
Depending on your browser requirements, you might want to run that code through this tool: https://autoprefixer.github.io/
If you want to insert widgets in those sections, we recommend trying a plugin like Widget Shortcode.
The generate_after_secondary_navigation hook appears just after the #secondary-navigation element.
