Having Issues With Navigation & Page Hero Goals

Hi there,

do you have the Menu Plus module enabled in Appearance > GeneratePress ?

Hi David and thanks for your response. No I don't actually. I was wondering if that had anything relevant needed.

Yeah, enable that as it will add a lot more functionality to the navigation, including that Navigation as Header option in Customizer > Layout > Header.

See if that works, then we can look at the next steps.

Ok, understood and I've done that. I see how to deal with the navigation menu now. But as far as the page hero goes, still not sure how to handle that.

Cool.
Ok, so we will handle the Hero in two parts.

1. The Hero section using a Block Element.
2. Merging the Hero with the Navigation.

1. The Hero section
In Appearance > GeneratePress make sure you have the Elements module enabled.

1.1 Appearance > Elements -> Add New --> Block Element.
1.2 In the element sidebar set the Element Type to: Page Hero

https://docs.generatepress.com/article/block-element-page-hero/

To start with you can select one of the Page Hero templates. Just to get a feel for how they work.

1.3 Set the Elements > Display Rules > Locations to where you want the hero displayed eg. Posts > All Posts.

Once thats done we can look at #2 to do the merge. Let me know.

Hi David. Ah, I assume I'll have to install Generate Blocks for that? I don't have those options in 1.1 above once a Block has been created. I currently don't use Generate Blocks or Gutenberg, either.

Thanks.

Yes, you will need GenerateBlocks, the Free version will do :)

Hi again. I don't use Gutenberg and I'm seeing another user saying GenerateBlocks requires it for installation, so that's a no-go I think.

What else can I do? Thank you.

Hi Marty,

If you don't use Gutenberg, you can use the header element which allows you to add HTML and the built-in template tags.

Just so you know, WP has already stopped supporting or updating the Classic editor, and all the themes and plugins are moving toward Gutenberg.

Hi, thanks. I tried using the Header element myself, however, was unable to accomplish much aside from getting full-width hero with the desired background color and a stretched featured image.

I'm also confused about the inclusion of the navigation options in the Header element since it's already present elsewhere (not sure what to use or not use in that case).

So if you could please assist me with using this I'd really appreciate it! :)

So a little more work but do this. First will get the hero built, then we'll do the merged header if required.

1. Create a new Header Element in Appearance > Elements.
2. Go to the Page Hero tab and add the following code to the Text Area:

{{custom_field._thumbnail_id}}
<h1>{{post_title}}</h1>
{{post_author}} • {{post_date}}

This is going to output the Featured Image, the post Title, followed by the author and date.

3. Set the Padding eg. 100px Top and Bottom, 40px Left and Right.

4. Set the Colors for the Background, Text, link etc.

5. Go to the Display Rules tab and set the Location to: Posts > All Posts.

Once thats done check one of your posts, and let me know

Hi, I have that done now. (Note: For some reason the featured image is appearing as 300x rather than full at 788x, by the way.)

Thanks. :)

by default we output the medium size thumbnail.
To change that you can add this PHP Snippet to your site:

add_filter( 'generate_hero_thumbnail_id_size', function() {
    return 'full';
} );