How to Create a Dynamic Page Header with GeneratePress & GenerateBlocks

This tutorial walks you through the process of creating a dynamic page header using the GeneratePress theme and GenerateBlocks. The idea behind a dynamic page header is that it automatically updates the title based on the page you’re viewing, ensuring a consistent design while allowing for unique page titles.

Steps to Create a Dynamic Page Header:

1. Set Up the Header Element:

• In your WordPress dashboard, go to Appearance > Elements.
• Click on Add New Element and choose Block.
• Name your block element “Page Header.”
• Add a container block and then insert a headline block within it.

2. Add Dynamic Content:

• In the headline block, don’t type any text. Instead, click the dynamic content icon (⚙️).
• From the dropdown, choose Title. This will dynamically pull in the page title for each page that uses this header.
• Optionally, you can adjust other settings like before text or link type, but for this example, you can leave those blank.

3. Style the Header:

• Click on the container block and add padding (e.g., 120px on the top and bottom).
• Set a background color, such as light gray.
• Add a shape divider for a little extra flair (e.g., a triangle with white as the color).
• For the headline text, you can adjust the font size (e.g., 48.5px) and change the color to match your site’s branding.

4. Assign the Header to Pages:

• In the Display Rules section, set the header to appear on the entire site.
• Exclude the front page, as it typically has its own custom hero section.
• Choose the Page Hero element type so that the header displays at the top of each page.
• Set the hook to After Header and publish the element.

5. Merge the Header with Navigation:

• To make the page header merge with the navigation bar, create a new header element.
• Name it “Page Header Merge” and enable the Merge with Content option.
• Set the display rules to the entire site so that the header merges with the navigation on every page.
• Publish the element.

6. Adjust Padding:

• If the logo or site title feels cramped after merging the header with navigation, go back to the Page Header element and adjust the top padding (e.g., 160px).

7. Preview the Final Result:

• Visit different pages on your site to see the new dynamic page header in action. The design should be consistent across all pages, with the title updating dynamically based on the page content.

With this setup, you now have a dynamic page header that not only looks great but also adapts to each page on your site, making your content management more efficient.