[Resolved] Can I put individual links (with images) into the header?

[Michael]

Is there a way to put some links (with images) into the header? We’ll have a primary and secondary menu already in use, and the two image+links would to go to the left and the right of the header.

(We also would need to consider how to handle on mobile screens too).

A picture seems the best way to describe this:
see https://www.dropbox.com/s/dvi2o4u4vejigzo/Icons-in-header.jpg

[David]

Hi there,

You could use the new Block Element:

https://docs.generatepress.com/article/block-element-overview/

Select the generate_header hook from the list. And this will replace your Site Header with whatever you create in the block editor.

Make sure you set the Display Rules to Entire Site.

I would recommend installing our GenerateBlocks plugin as it has built in styling and responsive controls.

https://generateblocks.com

Add a Container Block, you can adjust its padding and set the Background image you have in your current site header.
Then insert a Grid Block – 3 columns. Selecting each column will allow you to adjust its width, spacing etc.
The outer two you columns add your new content with image blocks etc.
The inner column add your Site Title and Tag line using a Headline block.

[Michael]

Hi David

Thanks – that’s perfect, and I can now get something working.

Is there a way to add the Site Title and Tag such that they are still controlled by the WordPress settings and customizer (rather than hard-coding them)?

[David]

Awesome 🙂

Dynamic content will be added to GPP 1.12 ( and in the future GenerateBlocks Pro ).
Which may include the Blog info tags.

In the meantime this post i provide two PHP snippets that you can add to your site to create two shortcodes:

https://generatepress.com/forums/topic/page-hero-template-tags-tagline/#post-1321793

But you would have to add them inside a HTML widget and style them with CSS.

Simplest thing today is to just use the Headline Block, style it, highlight all the text and select the link to add your Home URL.

[Michael]

Thanks for the useful site-title/tagline info.

I’m working through various client requirements, one of which is related to making changes to the header area. I’ve got the Block Element working as suggested using the generate_header hook. However, on one particular section of the site it looks like we may need to have a different header. This section will be many pages alongside some custom post types.

Two queries.

1. Using a Layout Element I can simply “switch off” the header and nav elements, and this works except that there’s an over-ride happening with the custom Block Element (mentioned above) on the generate_header hook even though I’m switching it off. I spotted the documentation on conflicting display rules (https://docs.generatepress.com/article/conflicting-display-rules/) so is the same sort of thing?

Technically I can make this work by using display exceptions on the Block ELement, but that’s going to be horrendous to scale up to dozens of pages…

Might there be a better way?

2. This relates to some of the above. The section of the site that I need to be able to remove the header from could all be identifiable by being pages that all sit under a parent page. Is there a way to set a display filter to capture this whole set of the site in one display rule?

thanks

[David]

Display Rule Conflicts only affect the Header Element – as there can only be one per post.
Hooks are not affected by it as they can have unlimited functions added to them.

This article here explains how to overwrite the Display Rules, the second example shows it applying to a specific page and all of its children:

https://docs.generatepress.com/article/generate_hook_element_display/

That is for the generate_hook_element_display filter but you can swap it for generate_block_element_display

[Michael]

Thanks David – I’ve made a little more progress, but I’ve now got myself stuck!

I have successfully added the extra 2 links (with images) to what I’m calling the “main header with extra links” using your Block – Hook Element suggestion. This gives me two normal nav menus and in between is the 2 menu + website title etc. I have the display rules set to location = entire site.

I have successfully created another header which I’m calling “Readers Guide” (RG) using a Header Element. This produces the stripped down header -with no nav except for a single icon top left. No display rules set in the element.

I have combined this with Layout Element which uses Disable Elements to turn off the two nav menus and the Site Header. No display rules set in the element.

I am using the PHP filters to override/control the display conditions of these elements.

Basically in pseudo code I want:
1. if inside the RG (ID=21), turn off nav and “main header with links” and show the simple RG header.
2. if not inside the RG, just replace the standard site header with the custom “main header” element, keeping nav in place.

It almost works, except that I can’t make the (2) condition work on the RG pages – so they are showing the stripped down RG header as well as the main header with links .

I suspect that I’m mixing too many concepts together!

Here’s the PHP:

// remove the Main header using Layout Element 505 ("Disable Main Header") for RG pages

add_filter( 'generate_layout_element_display', function( $display, $element_id ) {
    global $post;

	if ( 505 === $element_id && ( is_page() && $post->post_parent == '21' ) ) {
        $display = true;
    }

    return $display;
}, 10, 2 );

// add the Readers Guide using Header Element 506 ("Readers Guide Header" ) for RG pages

add_filter( 'generate_header_element_display', function( $display, $element_id ) {
    global $post;

	if ( 506 === $element_id && ( is_page() && $post->post_parent == '21' ) ) {
        $display = true;
    }

    return $display;
}, 10, 2 );

// add extra header links (tales and poems)
// replaces the standard site-title and tagline block with the "Main Header with extra links" Block Hook ID: 430

add_filter( 'generate_hook_element_display', function( $display, $element_id ) {
    global $post;

	if ( 430 === $element_id && ( is_page() && $post->post_parent != '21' ) ) {
        $display = true;
    }

    return $display;
}, 10, 2 );

[David]

This filter in your last condition ie.:

add_filter( 'generate_hook_element_display', function( $display, $element_id ) {

It should be this:

add_filter( 'generate_block_element_display', function( $display, $element_id ) {

[Michael]

Ah – brilliant.

I had to remove the display rule I’d added for the Block ELement (set to location = entire site) to get this working, and I also amended the filter so that it wasn’t limited by is_page() as that was affecting the News section which is posts not pages.

Is the is_page() condition on the first two filters necessary for anything?

Thanks for your help – definitely making progress!

[Leo]

is_page() just targets only static pages:

https://codex.wordpress.org/Conditional_Tags#A_PAGE_Page

[Michael]

Thanks for the link, and all the help.

[Leo]

No problem 🙂

[Author]

Posts