Create Your Header with GenerateBlocks and Insert Your GeneratePress Menu

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.

Prerequisites

Make sure you have the following installed and activated:

• GeneratePress
• GenerateBlocks
• CodeSnippets

Step 1: Add the Code Snippet

1. Copy the code snippet:

   add_shortcode( 'gp_nav', 'tct_gp_nav' );
   function tct_gp_nav( $atts ) {
       ob_start();
       generate_navigation_position();
       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.