GeneratePress 文檔

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.

Dynamic Data

Starting in GP Premium 2.0, you can now add dynamic data to blocks inside our GenerateBlocks plugin when using the Block Elements module.

Dynamic Text Type

You can access these options by clicking the database icon when using the Headline or Buttons block.

Title

This option outputs the post/page/term title of the current page.

Optional:

Before text (headline only): Add prefix text before the title.

Post Date

This option outputs the published date of the current post.

Optional:

Replace with updated date: Replace the published date with the updated date if it exists.

Remove if updated date exists: Remove the published date if the updated date exists.

Before text (headline only): Add prefix text before the post date.

Updated Date

This option outputs the updated date of the current post.

Optional:

Before text (headline only): Add prefix text before the updated date.

Post Author Name

This option outputs the name of the post author.

Optional:

Before text (headline only): Add prefix text before the post author name.

List of Terms

This option outputs the post terms associated with your chosen taxonomy.

Optional:

Term separator (headline only): Set the separator when there are multiple terms.

Before text (headline only): Add prefix text before the post author name.

Comments Number

This option outputs the number of comments the post has.

Optional:

No comments text: Set the text or number when there is no comment.

Singular comments text: Set the text or number when there is one comment.

Plural comments text: Set the text or use % in place of the number of comments when there are multiple comments

Before text (headline only): Add prefix text before the comments number.

Post Meta

This option outputs the text value of the post custom field name.

Optional:

Before text (headline only): Add prefix text before the post meta.

Term Meta

This option outputs the text value of the value of a term custom field name.

Optional:

Before text (headline only): Add prefix text before the term meta.

User Meta

This option outputs the text value of the value of a user custom field name.

Optional:

Before text (headline only): Add prefix text before the user meta.

Dynamic Link Type

We can also apply a dynamic link

Single Post

This option links the block to the current single post. This is useful when using Title as the dynamic text type.

Author Archives

This option links the block to the archives for the current author. This is useful when using Post author name as the dynamic text type.

Comments Area

This option links the block to the comments are of the current post. This is useful when using Comments number as the dynamic text type.

Next Page of Posts

This option links the block to the next page of posts in the archive. This is useful for creating Archive Navigation element type.

Previous Page of Posts

This option links the block to the previous page of posts in the archive. This is useful for creating Archive Navigation element type.

Post Meta

This option links the block to the post meta custom field input.

Term Meta

This option links the block to the term meta custom field input.

User Meta

This option links the block to the user meta custom field input.

Dynamic Background

You can access this option by clicking the database icon when using the Container block.

Make sure to add a background image for the container first before you can access the dynamic background option.

Featured Image

This option uses the featured image as the background image.

Post Meta

This option uses the post meta value as the background image.

Term Meta

This option uses the term meta value as the background image.

User Meta

This option uses the user meta value as the background image.

Building a Simple Mega Menu

GeneratePress doesn』t have a mega menu by default, simply because not everyone would use it and it adds a decent amount of CSS.
However, creating a simple mega menu in GeneratePress isn』t very hard. You only need to add some CSS and then structure your menu correctly.
First, add the CSS:
@media (min-width: 769px) {
nav .main-nav .mega-menu {
position: static;
}

nav .main-nav .mega-menu > ul {
position: absolute;
width: 100%;
left: 0 !important;
display: flex;
flex-wrap: wrap;
}

nav .main-nav .mega-menu > ul > li > a {
font-weight: bold;
}

nav .main-nav .mega-menu>ul>li {
display: inline-block;
width: 25%;
vertical-align: top;
}

nav .main-nav .mega-menu.mega-menu-col-2>ul>li {
width: 50%;
}

nav .main-nav .mega-menu.mega-menu-col-3>ul>li {
width: 33.3333%;
}

nav .main-nav .mega-menu.mega-menu-col-5>ul>li {
width: 20%;
}

nav .main-nav .mega-menu > ul > li:hover > a,
nav .main-nav .mega-menu > ul > li:focus > a,
nav .main-nav .mega-menu > ul > li[class*="current-"] > a,
nav .main-nav .mega-menu ul ul {
background-color: transparent !important;
color: inherit;
}

nav .main-nav .mega-menu ul .sub-menu {
position: static;
display: block;
opacity: 1;
visibility: visible;
width: 100%;
box-shadow: 0 0 0;
left: 0;
height: auto;
pointer-events: auto;
transform: scale(1);
}

nav .main-nav .mega-menu ul.toggled-on .sub-menu {
pointer-events: auto;
}

nav .main-nav .mega-menu .sub-menu .menu-item-has-children .dropdown-menu-toggle {
display: none;
}
}
Learn how to add CSS here.
Over time, it』s important to check back here to make sure the CSS hasn』t been updated or improved.
Then we just need to structure the menu correctly.
Go into Appearance > Menus and create your new menu or use your existing menu.
You』re basically going to have your main parent item – the item that displays in your main navigation bar.
Then you』ll have a series of child items below this main parent item – those are your mega menu headings.
Then, your grandchild item under the child items are displayed as your links under each heading.
Here』s an example:
Mega Menu Structure
Now that our structure is built, open the main parent item, and give it the mega-menu class.
If you don』t see the CSS Classes input field as shown below, see this article.
Mega Menu Parent Item
Now when we save, this is our result:
Live Mega Menu
By default, we have 4 columns.
We can adjust this by adding another class to our parent item.
These are the available column classes:
mega-menu-col-2
mega-menu-col-3
mega-menu-col-4
mega-menu-col-5
So if we want two columns, our class would look like this:
Mega Menu Columns

Content Separator

This option requires the Spacing module in GP Premium.

You can adjust the content separating space in Appearance > Customize > Layout > Container.

This option allows you to adjust the space between the featured image, title, content and entry meta.

The value you see is in EM.

Site Library Templates Developers

Mike Oliver Design

Search

Shop

Realtor

Dev

Donate

Cloud

Stream

Health

Portfolio

Mason

Vinyasa

Coach

Ethos

Landing

Avery

Wired

Read

Agency

Java

Service

Access

Abstract

Trade

Pivot

Pixel

Wordsmith

Artisan

Catalyst

LH Consulting

Flow

Emerald

Idea

Decor

Studio 7

Feather

Aroma

Dance

Vacation

Charge

Grill

Broadcast

Rumour

Prime

Target

Flint Skin

Niche

Imprint

Digital Creative

Mentor

LearnEd

Volume

Merch

Bold

Vibe

Liberte

Dispatch

Uno

Navigator

Import / Export Overview

Starting in GP Premium 1.6, the Import/Export module has been re-written from the ground up. It now allows you to export all of your GP options into one file, instead of one for each individual module.

You can still choose to only export individual modules if need be.

NOTE: Customizer > Additional CSS is not part of the themes import/export settings. This should be manually copied and pasted between sites.

Exporting your Settings

Importing your Settings

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

Grouping Widgets

Starting in WordPress 5.8 you will be able to use blocks in the widget area to build your widgets.

Each block you add to a widget area will actually create a separate widget. For example:

To get these blocks inside the same widget, all we need to do is 「Group」 them inside the core Group block. Doing this will result in the following:

Adding Breadcrumbs

GeneratePress doesn』t have built-in breadcrumbs. However, it is easy to add breadcrumbs from a third party plugin using hooks.

We will use Yoast SEO for the examples below but the method should apply to any breadcrumb plugins.

Using Hooks Element

If you have GP Premium, the easiest method is to use our Hooks Element.

Go to Appearance > Elements. Click Add New and select Hook to create a new hook element.Add the shortcode provided by Yoast.In the Hook dropdown list, select the desire location for the breadcrumbs to show using the visual guide. The usual option is the generate_before_entry_title hook.Make sure Execute Shortcodes checkbox is checked.Go to Display Rules tab and select Post under the Location dropdown list.

After this hook element is published, the breadcrumbs should now display in posts.

Using Functions

If you don』t have GP Premium, then the PHP snippet below is required to display breadcrumbs.

add_action( 'generate_after_header', function() {
if ( function_exists('yoast_breadcrumb') ) {
yoast_breadcrumb( '

' );
}
} );

You can move the breadcrumbs by replacing generate_after_header with the desired hook using this visual guide.

generate_svg_icon

The generate_svg_icon filter allows you to overwrite the entire HTML output of the icon, including the surrounding gp_icon element.

For example, if you want to change the default menu cart icon to a custom icon, then this snippet can be used:

add_filter( 'generate_svg_icon', function( $output, $icon ) {
if ( 'shopping-cart' === $icon ) {
$svg = '

';

return sprintf(
'
%2$s
',
$icon,
$svg
);
}

return $output;
}, 15, 2 );