The Adding Buttons article shows you how to add buttons in content using some simple HTML and CSS.
Adding a call to action button in the navigation is also achievable with some CSS.
1. Add a custom class to your menu item, for example nav-button
2. Add the CSS:
For primary navigation:
@media (min-width:769px) {
.main-navigation .main-nav ul li.nav-button a {
background-color: #ffffff;
border: 2px solid #000000;
color: #000000; line-height: 35px; /*this number will likely need to be adjusted*/
}
}
For secondary navigation:
@media (min-width:769px) {
.secondary-navigation .main-nav ul li.nav-button a {
background-color: #ffffff;
border: 2px solid #000000;
color: #000000; line-height: 35px; /*this number will likely need to be adjusted*/
}
}
Author 诗语
Show Sticky Navigation Only
Some users would like to hide the static navigation and show the sticky navigation only. This can be done with the CSS snippet below:
#site-navigation:not(.navigation-stick) {
visibility: hidden;
height: 0;
overflow: hidden;
}
#sticky-placeholder {
display: none !important;
}
Remove the GP Dashboard for non super admins
If you want to remove the GP Dashboard for non super admins, use the PHP below:
add_filter( 'generate_dashboard_page_capability', 'tu_super_admin_dashboard' );
function tu_super_admin_dashboard() {
return 'manage_sites';
}
The snippet can also be modify for other Roles and Capabilities as you prefer.
Plugin Install Failed
Receiving this error?:
The package could not be installed. No valid plugins were found.
Plugin install failed.
You』re most likely trying to install the free theme (generatepress.zip) as a plugin.
Instead, head over to your account and download GP Premium (gp-premium.zip), then install it as a plugin.
Check out this article to learn more on how to install GP Premium.
Show the 「Updated」 Post Date
In some cases, you may wish to show the date your post was last updated instead of the published date.
We can do this with a little CSS:
.posted-on .updated {
display: inline-block;
}
.posted-on .updated + .entry-date {
display: none;
}
If you wish to display some text before the date, you can do this:
.posted-on .updated:before {
content: "Last Updated ";
}
Show the 「Updated」 Post Date in Header Element
To show the updated post date in Header Element, add the PHP snippet below to create the shortcode:
function post_modified_date() {
return get_the_modified_date();
}
add_shortcode( 'modified_date', 'post_modified_date' );
Then add [modified_date] to the Header Element content.
generate_smooth_scroll_elements
The generate_smooth_scroll_elements allow you to initiate smooth scroll on other element classes instead of just ones with the smooth-scroll class.
Use the following PHP snippet to apply smooth scroll to all hash links:
add_filter( 'generate_smooth_scroll_elements', function( $elements ) {
$elements[] = 'a[href*="#"]';
return $elements;
} );
Page Hero Background Video
Adding a background video to our Page Hero is super easy. We just need to add some HTML into the content area, and add some CSS to our site.
The first thing we need to do is structure our HTML within our Element content. Here』s an example:
In the HTML above, you』ll notice a couple different options we』ve added:
loop – This will make the video loop infinitely.
muted – This will mute any sound the video might have.
autoplay – This will make the video start playing as soon as the page loads.
poster – This is the URL to a fallback image that will show while the video loads.
You』ll also notice we have three different videos within our video element. Only one is required.
Now that our HTML is set up, we can add the CSS:
.background-video {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
opacity: 0.5;
}
.page-hero {
position: relative;
overflow: hidden;
}
.background-video-content {
position: relative;
z-index: 1;
}
video[poster] {
object-fit: cover;
width: 100%;
height: 100%;
}
All of the above is plug-and-play, except for the opacity option. Adding the opacity will allow your background color to overlay the video element.
generate_layout_element_display
The generate_layout_element_display allows us to bypass the Display Rules, so we can enable or disable an Element under our own conditions.
For example, if we want to assign a specific layout to Author Tom only:
add_filter( 'generate_layout_element_display', function( $display, $element_id ) {
if ( 10 === $element_id && is_author( 'Tom' ) ) {
$display = true;
}
return $display;
}, 10, 2 );
Remove all GP Customizer options
If for some reason you would like to remove all GP customizer options, use the PHP snippet below:
add_action( 'after_setup_theme','tu_remove_customizer_options', 1000 );
function tu_remove_customizer_options( $wp_customize ) {
remove_action( 'customize_register', 'generate_customize_register' );
remove_action( 'customize_register', 'generate_default_fonts_customize_register' );
remove_action( 'customize_register', 'generate_backgrounds_customize', 999 );
remove_action( 'customize_register', 'generate_backgrounds_secondary_nav_customizer', 1000 );
remove_action( 'customize_register', 'generate_blog_customize_register', 99 );
remove_action( 'customize_register', 'generate_colors_customize_register' );
remove_action( 'customize_register', 'generate_colors_secondary_nav_customizer', 1000 );
remove_action( 'customize_register', 'generate_colors_wc_customizer', 100 );
remove_action( 'customize_register', 'generate_copyright_customize_register' );
remove_action( 'customize_register', 'generate_menu_plus_customize_register', 100 );
remove_action( 'customize_register', 'generate_page_header_blog_customizer', 99 );
remove_action( 'customize_register', 'generate_secondary_nav_customize_register', 100 );
remove_action( 'customize_register', 'generate_spacing_customize_register', 99 );
remove_action( 'customize_register', 'generate_fonts_customize_register' );
}
generate_end_widget_title
The generate_end_widget_title filter allows you to change the end of the widget title markup.
Default (string):
Usage
Please refer to the Using Filters article to learn how to use this filter.