[Resolved] How to show a random page header?

[J]

Hi there,

We created multiple page headers. Super easy with GeneratePress. Thanks!

Now we want a random selection of a page header each time a page is visited. Please note: random selection of the complete page header, not a random selection of the background picture in a certain page header. I read posts in this forum that talk about randomizing the pictures shown in a page header, but could not find any about randomizing complete page headers.

What would be the right approach to realize that?

• Use a plugin-in. If so, any suggestions?
• Write some code to do the job. If so, any starting points?
• Other directions?

Guidance is appreciated. Thank you!

J

[David]

Hi There, i think this is a question for Tom. Ill pass it his way.

[Tom]

That’s a tough one!

You might be able to do this..

add_filter( 'generate_page_header_id', 'tu_random_page_header' );
function tu_random_page_header( $id ) {
    if ( is_page( 'your-page' ) ) {
        // Your list of page header IDs.
        $ids = array(
            '10',
            '12',
            '200'
        );

        $id = array_rand( $ids, 1 );
    }

    return $id;
}

Not sure if this will work, but it’s worth a try 🙂

[J]

David, Tom,

Thanks for answering me. A minor modification made it work.

By changing $id into $ids[$id] a random selected page header ID is returned.

add_filter( 'generate_page_header_id', 'tu_random_page_header' );
function tu_random_page_header( $id ) {
    if ( is_page( 'your-page' ) ) {
        // Your list of page header IDs.
        $ids = array(
            '10',
            '12',
            '200'
        );

        $id = array_rand( $ids, 1 );

    }

    // Return random selected element of the array
    return $ids[$id];
}

J

[Tom]

Interesting – thanks for sharing the working code! 🙂

[chris]

HI Tom, I am wondering if you can help.

I have no idea about inserting code etc… but I would like to have random images/pictures again in my header, above the menu, below the logo, like I did when I had pico light installed.

It looks like this code above could help… but I don’t even know how to go about this. Please can you point me in the right direction?

Thanks,

Chris

[Tom]

Hey Chris,

Would this just be a static image? If so, you can add a new Hook Element into the After Header Content hook.

Then do this:

<?php
$headers = array(
    'URL to logo 1',
    'URL to logo 2',
    'URL to logo 3',
    'URL to logo 4',
);

$random = $headers[ rand( 0, count( $headers ) -1 ) ];

echo '<img src="' . $random . '" alt="" />';
?>

Then check “Execute PHP”, and set your Display Rules.

[jens]

I tried the code with two images, but it stays static and never changes.

Do I need to change anything in Appearance > Customize > Site Identity ?

That is set to the image that is now always shown.

Ok, I did work it out:

In Appearance > Customize > Site Identity the logo need to be removed.

In Elements > Hooks the setting need to be after_header_content

[Author]

Posts