Author 詩語

Installing GP Premium

Install GeneratePress

The first step you need to do is installing GeneratePress. GeneratePress is the free theme which is required to be installed and activated in order to use GP Premium (plugin).

Download GP Premium

To find your download links, go to your account.

Click or right-click the download button (control + click for Mac users), then save the file to your computer. The file should save as gp-premium.zip.

Using Firefox or Chrome, the option you want to click is 「Save link as…」.In Safari, it』s 「Download linked file as…」.In Internet Explorer, it』s 「Save target as…」.

Note for Mac users who are using Safari: If your download appears as an ordinary folder instead of a zip file, go to 「Safari Preferences > General」 and uncheck 「Open 『safe』 files after downloading」. Then the download will remain a zip file and not be unpacked.

Add GP Premium to your website

From your Dashboard, go to Plugins > Add New.

Click  Upload Plugin at the top, browse and select the gp-premium.zip file.

Activate your modules

Now navigate to 「Appearance > GeneratePress」 and activate the individual modules you wish to use on your site.

Please note that WooCommerce plugin itself needs to be installed and activated before GP』s WooCommerce module can be activated.

Activating your license key for automatic updates

For instructions on activating your license key, please see this article.

Transparent Header and Navigation

Transparent header and navigation layout in the example above is very popular and can be achieve easily with our Header Element module. The steps are the same whether you are using a page builder or not. The key settings to achieve this are highlighted in blue below:

The settings highlighted in orange above are optional. It allows you to upload a custom Site Logo, Navigation Logo, Mobile Header Logo and set specific Navigation Location to match this specific page hero. Keep in mind that you will need to have existing logos uploaded in the customizer to use these options in header element.

Adding an SVG Logo

It』s possible to use an SVG file as your logo, but it requires a few steps.
It should be noted that uploading SVG files is disabled in WordPress by default due to security concerns. You can read more about that here.
Allowing WordPress to upload SVG files
The first step is to tell WordPress to allow SVG files to be uploaded.
The easiest way to do that is to use this plugin.
Uploading your SVG logo
Now that you have that plugin installed and activated, you can upload your SVG logo in Customize > Site Identity as you would any other logo.
Setting the size
SVG files are cool because you can size them up and down as you need without losing quality. Once your SVG logo is uploaded, you may or may not see it right away. If you don』t (and even if you do), you』ll want to set your preferred size for the logo with some simple CSS:
.site-logo img {
width: 100px;
height: 100px;
}
Learn how to add CSS here.
Of course, you can set the width and height to whatever works with your design.

Block Element – Post Meta Template

Starting in GP Premium 2.0, you can create a post meta template in the Block Element module with the help of Dynamic Blocks and Dynamic Data.

You can access it by creating a new block element, then select post meta template under the Element type dropdown menu:

Settings

Templates

Import a template.

Location

Choose the location to display this post meta.

Replace default primary post meta

Replace the default header entry meta with the template created.

Replace default secondary post meta

Replace the default footer entry meta with the template created.

GenerateBlocks Container Settings

Inline post meta items

Inline the items inside this container. This is useful when adding dynamic data items such as author, post date, categories etc.

Inline alignment

Set the alignment of the inline post meta items.

Disable the Block Editor in Widgets

Starting in WordPress 5.8, the block editor is enabled by default in widgets.

If you would like to disable it, please add the following PHP snippet:

add_filter( 'use_widgets_block_editor', '__return_false' );

Configuring Autoptimize

Reducing the amount of CSS and JS files being loaded on each page load will make a huge difference to your page speed.

Another perk with Autoptimize is it will bundle the CSS generated by your options in the Customizer into an external file, allowing your browser to cache it.

We suggest selecting these options:

Javascript Options

CSS Options

HTML Options

Extra Options

Removing Emojis

If you don』t use emojis on your site, then there』s really no point in loading the scripts for them.

Autoptimize also has an option for this, which you can find in the Extra tab within their settings. Check the box next to Remove emojis, and you』re good to go!

Removing Query Strings

While this won』t make a noticeable difference in your page speed, it will increase your ranking in speed tests.

One issue with this is it removes the version numbers from your static resources, like CSS and JS files. Those version numbers are there to tell browsers to stop caching the file if the version is updated.

Without the version numbers, browsers won』t release the cache when you update your theme or plugins, which can result in some weirdness until the cache is cleared.

If you』d like to remove query strings, you can use the same Autoptimize plugin we featured above. Click on the Extra tab within the Autoptimize settings, and check the Remove query strings from static resources checkbox.

Installing GeneratePress

Installing GeneratePress is super easy.

First, login to your WordPress Dashboard.

Next, go to 「Appearance > Themes」 in the menu on the left.

Near the top, you』ll see a 「Add New」 button, click that button.

In the 「Search themes」 bar, type: generatepress

You』ll see GeneratePress and some of our child themes appear.

Click 「Install」, and then activate.

Sections Overview

This feature is deprecated and no longer supported as of GeneratePress Premium 2.0. Instead, we suggest checking out our GenerateBlocks plugin.

Sections is our own very simple page builder.

If you』re already using a more advanced page builder, you won』t need to activate Sections.

Please note that Sections cannot be used with Gutenberg editor.

Turning on Sections

By default, Sections can only be used on Pages and Posts.

Enabling Sections on the page will remove the default editor, and will also remove the sidebars from your page.

To turn them on, open your page/create a new page, and click the Use Sections toggle which should be at the top right.

Use Sections

Adding a Section

Once you』ve turned Sections on, the default editor will disappear, you』ll see the Add Section button.

Add Section

Clicking the Add Section button will add a new Section to the page.

Adding Content

You can click the Section title or the pencil icon to open the content area of your Section.

The Section content editor is an exact copy of the default WordPress editor, with all of the same options.

Section Content

Opening the Section Settings

If your Section is already open, you can just click on the Settings tab on the left of your content.

If not, you can open the settings directly by clicking on the cog icon in your Section bar.

Section Settings

Section Settings

Sections have the following settings.

Layout

Box type – whether your outer section container is full width or contained.Inner box type – whether your inner section container is full width or contained.Custom ID – Add a custom ID to your section – useful when linking to specific sections.Custom Classes – Add custom CSS classes to the section container.Top padding – Set the amount of padding (inner spacing) at the top of your section. Choose pixels or percentage.Bottom padding – Set the amount of padding at the bottom of your section. Choose pixels or percentage.

Colors

Background colorText colorLink colorLink color on hover

Background Image

Background image – Upload a background image for you sectionParallax effect – Add a parallax (slight movement) to your background image on scroll

Video Overview

Deprecated

As of GeneratePress Premium 2.0, this feature is officially deprecated and no longer supported.

If you absolutely must activate it, you can use the following filter. However, please be aware that this feature may break with future WordPress versions, so it』s highly recommended you go with an alternative like GenerateBlocks.

add_filter( 'generate_premium_deprecated_modules', function( $modules ) {
return array_diff( $modules, [ 'Sections' ] );
} );

generate_header_element_display

The generate_header_element_display allows us to bypass the Display Rules, so we can enable or disable an Element under our own conditions.

Examples

For example, if we want to assign a specific header to Author Tom only:

add_filter( 'generate_header_element_display', function( $display, $element_id ) {
if ( 10 === $element_id && is_author( 'Tom' ) ) {
$display = true;
}

return $display;
}, 10, 2 );

Another request that we get from time to time is to only show page hero on first archive or posts page and turn off for 2nd and subsequent pages of posts. This can be done with the snippet below:

add_filter( 'generate_header_element_display', function( $display ) {
if ( is_paged() ) {
$display = false;
}

return $display;
} );

Or we can disable the header element if no featured image is added:

add_filter( 'generate_header_element_display', function( $display, $element_id ) {
if ( 123 === $element_id ) { // Only target specific Element
if ( ! has_post_thumbnail() ) {
$display = false;
}
}

return $display;
}, 10, 2 );

Similarly, we can disable the header element if no featured image is added or if featured image is disabled using the disable element metabox:

add_filter( 'generate_header_element_display', function( $display, $element_id ) {
if ( 123 === $element_id ) { // Only target specific Element
if ( !has_post_thumbnail($post->ID) || get_post_meta( get_the_ID(), '_generate-disable-post-image', true ) === 'true' ) {
$display = false;
}
}
return $display;
}, 10, 2 );

Replicating the Screenshot

Replicating our theme screenshot using the free version of GeneratePress is super easy. This article will go through the necessary steps.

The Content

We used the block editor along with our very own free block plugin, GenerateBlocks, to build our content. However, you can achieve the same look with the core blocks if you want.

If you want to use GenerateBlocks (highly suggested), you should install it and then download the content file below.

Download Demo Homepage

This will import a page named 「Home」 to your website. You can now see it in the 「Pages」 area of your website.

Set the Front Page

The first thing we need to do is set a static front page. By default, WordPress will use the posts page (blog) as your front page.

Using the page we imported above (or your own custom page if you want), go to 「Settings > Reading」 and set the 「Front page displays」 option to 「A static page」, and choose the page you imported/created.

Adding the Logo

Next, we』ll add the logo to our site. You can learn how to add your logo to GeneratePress in this article.

Creating the Menu

We created our menu inside WordPress (see these instructions), and then activated the navigation search option in Customize > Layout > Primary Navigation.