Author 詩語

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

Block Element – Page Hero

Starting in GP Premium 2.0, you can create a page hero 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 Page Hero under the Element type dropdown menu:

Settings

Templates

Import a template.

Quick hook select

Select one of the three common hooks to insert the page hero.

Hook name

Select other hooks that are not listed under quick hook select.

Priority

Set the priority of the page hero. This is useful when there are multiple elements added within the same hook.

Disable title

Remove the default page/post title. This is useful if a title is added using the dynamic data.

Disable featured image

Remove the default featured image on pages/posts with this page hero. This is useful if the featured image is added using the dynamic image block or as a dynamic background image.

Disable primary post meta

Remove the default post meta on pages/posts with this page hero. This is useful if the post meta is added using the dynamic data.

Background image

Set a static background image for the page hero.

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.

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.

AMP Compatibility

If you』re looking to use GeneratePress with the official WordPress AMP plugin, you』ll want to install our simple AMP + GeneratePress companion plugin to ensure full compatibility.

Download AMP + GeneratePress

To install this plugin, save the .zip file to your computer and upload it inside your Dashboard in the 「Plugins > Add New > Upload」 area.

This is a feature plugin, meaning it will eventually find it』s way into the theme once it』s stable and we』re confident that AMP is sticking around long-term.

Updating GP Premium

GP Premium updates contain bug fixes and new features. You can check what version you』re running in Appearance > GeneratePress or in the Plugins area of your Dashboard.

In order to receive updates through your Dashboard, you need to activate your license key.

Finding Your License Key

To find your license key, go to your account and locate your download.

Copy your license key and move onto the next step.

Activating Updates

Now that we have our license key copied, we can navigate to 「Appearance > GeneratePress」 in our Dashboards.

Paste your license key into the license key field, and click the 「Save」 button.

Problem activating? See this article.

Manually Updating

Sometimes the update process through your Dashboard won』t work due to server restrictions. In that case, you can manually update.

Download a fresh copy of your add-on through your account.Upload and activate the fresh copy you downloaded in step 1.

Using the Site Library

GeneratePress Sites are importable sites that are built to give you a head start when building new websites.

These sites include GeneratePress options and demo content. If you already have content, you can choose to only import the GeneratePress options. The demo content should only ever be imported on fresh website with no content.

Importing a Site

Importing a site is super easy. First make sure you have GP Premium 1.6 or newer installed and the site library module activated, then head to Appearance > GeneratePress > Site Library. The filters on top of the page allow you to sort through sites by category and page builder:

You can click on the site you are interested in to see the details such as plugins required and responsive views:

If you have important data on your site already, please consider using a plugin like Duplicator to do a full backup of your site.

After you decided on a site that you would like to use, click Get Started to begin importing.

The second page shows the plugin(s) that will be installed and the plugins that are already installed.

There are two import options:

Import Theme Options: This option will import the customizer options only and skip all the demo content and page content.Import Demo Content: This option will import the demo content.

If you want your site to look exactly like the template, then importing both theme options and demo content are required.

Once you read the Confirm Import message, toggle the I understand button then click Begin Import.

After the importing process is completed, click the View Site button to start editing.

Removing an Imported Site

If you install a Site and decide you don』t want it, or you want to install a different one, head back into the main Site Library page and you』ll see the below message.

When you import a site, we take a quick backup of your existing settings first. If you decide to remove the imported site, we will restore those settings we took a backup of.

The removal process does make changes to your database, so if you have data you don』t want to risk losing, please take a site backup before doing this process.

It is possible to click the 「No thanks」 link and install another site on top of the site you already imported. However, remember that the backup is taken as you import a site, so if you import on top of another import, you will be taking a backup of the previously imported site. This means you won』t be able to go back to how your site was before the first site import.

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.

Block Element – Content Template

Starting in GP Premium 2.0, you can create a Content 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 Content Template under the Element type dropdown menu:

Settings

Templates

Import a template.

Tag name

Select the tag names to apply to the content template.

Apply to

Set the condition which the content template is applied to.

Keep default post container

Keep the default post container so that styles such as content padding set in the customizer would apply.

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.

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:

generate_after_mobile_menu_button

The generate_after_mobile_menu_button hook appears right after the menu-toggle element.

Usage

Please refer to the Using Hooks article to learn how to use this hook.