September 28, 2023

Create Your Header with GenerateBlocks and Insert Your GeneratePress Menu

Play Video
Tutorial Walkthrough
This video tutorial provides an in-depth walkthrough, and we recommend following along with the video to grasp the concept fully. Below, you'll find a summary of the tutorial, but please note that it may leave out some detailed steps, so watching the video will give you the most comprehensive understanding.

Create your header with GenerateBlocks and a shortcode to unlock endless design possibilities. This tutorial is based on a video by The Admin Bar, where they demonstrate how to use a code snippet to integrate the GeneratePress menu into a GenerateBlocks element. This allows you to design your header using the WordPress block editor.


Make sure you have the following installed and activated:

Step 1: Add the Code Snippet

  1. Copy the code snippet:
    add_shortcode( 'gp_nav', 'tct_gp_nav' );
    function tct_gp_nav( $atts ) {
        return ob_get_clean();

    Source: Taylor Drayson

  2. Go to your WordPress dashboard and navigate to Snippets.
  3. Create a new snippet, paste the code snippet, and save it.

Tip: The code snippet allows you to use the shortcode GP_Nav to insert the GeneratePress menu into your GenerateBlocks element.

Step 2: Create a New Element

  1. Go to Appearance > Elements in your WordPress dashboard.
  2. Click Add New Element.
  3. Select Block Element and give it a title, e.g., “Header”.
  4. Under Element Type, select Site Header.
  5. Under Display Rules, select Entire Site.

Step 3: Build the Header Layout

  1. Add a container block and label it “Wrapper” (we will label the main container “Section”).
  2. Inside the wrapper, add two more containers and label them “Nav Left” and “Nav Right”.
  3. Set the wrapper’s display to Flex and justify the content as Space Between.

For the Left Navigation

  1. Add your site logo.
  2. Add a text block for a sale banner, e.g., “Labor Day Sale: Save 20% through September 5th”.
  3. Adjust the design to your liking.

For the Right Navigation

  1. Add a shortcode block and insert the GP_Nav shortcode.
  2. Add a container for buttons, e.g., “Log In” and “Get All Access”.

Note: Use flex display to align items horizontally and vertically.

Step 4: Style Responsively

  1. Use media queries to hide the sale banner and buttons at specific breakpoints.
  2. Add the buttons to the mobile menu when they are hidden from the desktop view.

Step 5: Test and Update

  1. Save your changes.
  2. Refresh your website to see the new header in action.
  3. Make any necessary adjustments.

Create Your Header with GenerateBlocks” Conclusion

Creating a custom header with GenerateBlocks and a shortcode offers you a flexible and efficient way to design your WordPress site. This method leverages the power of both GeneratePress and GenerateBlocks, allowing you to create a header that is both functional and aesthetically pleasing.

Required Resources

GeneratePress Logo
Free Options
GenerateBlocks Logo
Free Options
Code Snippets Logo
Free Options
Credit to The Admin Bar
The Admin Bar is a resourceful platform dedicated to WordPress. From insightful videos on optimizing your WordPress tech stack to creative hacks for faster web page creation, the channel is a treasure trove for both beginners and advanced WordPress users.
Create Your Header with GenerateBlocks and Insert Your GeneratePress Menu
Welcome back!
Enter your Helwp credentials to sign in.

No Account yet? Sign Up

My Account
Give Feedback
Describe your feedback *
Rate Helwp
Problem *
Describe the problem
Want us to reply?
Your E-Mail
Affiliate Disclosure

At Helwp, we’re committed to transparency and honesty. Therefore, we want to inform you that some of the links on our website are affiliate links. This means that, at no additional cost to you, we may earn a small commission if you click through and make a purchase.

We only promote products or services that we genuinely believe in. These affiliate commissions help us to maintain the website and continue to provide you with free, high-quality WordPress content.

If you are interested in how you can support us even further, check out our support page.