[Resolved] Expanding Page Header with ACF

[Pablo]

Hi all,

Our team is currently loving GeneratePress, however we’re looking to extend it further by implementing ACF fields into the page headers. I’ve figured out a process for using shortcodes to display content, but we’re looking to go further than that. What we’re trying to do is use a shortcode to output an rgba value that we can insert into the background color selector for the page header. This would allow us a little bit easier edits on the pages itself rather than editing the page header individually for each page. Almost similar to how the featured images work hand-in-hand with the page headers. Something more dynamic than a hard-set value so we can re-use a single page header that fits all the pages needs. Please let me know if this is possible, and let me know how this can be best implemented.

GP Premium 1.7.2

[Pablo]

Bump

[Tom]

Hey Pablo,

So sorry we didn’t respond! This one slipped by somehow.

Are you using the old Pages Headers, or the new Header element in the Elements module?

Are you only trying to get the background color in your shortcode?

Let me know – and sorry again!

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Pablo]

Hi Tom, no worries! You are very busy but I appreciate you replying. Yes, I’m using the old Page Headers rather than the new Header element in the Elements module. Here’s my current setup:

ACF Field that allows for an RGBA color to be chosen (with opacity).

Page Header where I need the shortcode input.

Example of what I’m trying to do.

This is what the color picker looks like within the page using ACF

The primary reason I’m trying to do this is to setup a main page header that works stylistically with all my pages. You can already change the featured image within the page itself, so why not all the content/styles? The shortcode, I confirmed, outputs the correct content in rgba format that matches what is being input in the page header itself. If this is not possible, it’s not a big deal, just wanted to try to expand my use of the page headers further. Please let me know how else I can assist you. I currently have this up on a staging environment so I can even get you login credentials for the back-end of the site.

Thanks again as always for an absolutely amazing product.

[Tom]

Ah yea, that field only accepts color values.

You could filter the background color value though:

add_filter( 'generate_page_header_options', function( $options ) {
    $new_value = get_post_meta( get_the_ID(), 'your_meta_field', true );

    if ( $new_value ) {
        $options['background_color'] = $new_value;
    }

    return $options;
} );

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Author]

Posts