Change page hero background color with Advance Custom fields

[fredrik]

Hello!
Is it possible to change the the page hero background (Im using Elements) on page by page basis through Advanced Custom fields (or any other way)

Im using the current version of generatepress.

[David]

Hi there,

simplest way would be to echo out some CSS into the WP_head hook using the ACF field.
This article explains how to get the field value of the current post, use the Check if value exists code:

https://www.advancedcustomfields.com/resources/get_field/

Then you’re echo statement would look something like this:

echo '<style>.page-hero {background-color:' . $my_custom_field . ' !important;}</style>';

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[fredrik]

My php is knowledge very limited, with that code the echo ''; just shows up in the header.

[David]

It should look something like this:

<?php
$color = get_field( "my_custom_field" );

if( $color ) {
    echo '<style>.page-hero { background-color:' . $color . ' !important;}</style>';
}
?>

It needs to go in a Hook Element, select the WP_Head hook and make sure to check Execute PHP.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[fredrik]

thank you it worked nicely!

[David]

Awesome – glad to be of help.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts