Custom field color to change element background

Hi there,

Unfortunately that's not what custom field is for.

You'd need to create a header element/page hero for each category.

I have a custom field color pickers set already for each category - there surely must be a way to extract that information, in the form of a shortcode or something similar, to incorporate into GP header element?

Where did the color picker come from?

A third party plugin?

Yes, ACF custom fields - those are custom fields with shortcodes I can use.

You would need to output the Custom Fields value into your own CSS that can hooked into wp_head:

See this topic here for an example using regular Custom Fields:

https://generatepress.com/forums/topic/using-custom-field-page-values-in-element-header/#post-985694

The principles are exactly the same for ACF - you would just need to use ACF to get the variable in place of this:

$css = get_post_meta(get_the_ID(), 'css', true);

Thanks for this. So I think I've done the code with:

<?php
$css = get_field($selector, $category_id, true);
if (!empty($cssnew)) { ?>
    <style type="text/css">
        <?php echo '.page-hero {category_background_color: ' . $css .';}'; ?>
    </style>
    <?php }
?>

Do I change the background color in the header element on is this done with CSS for that element?

I would set your fallback color in the Header Element, so if the ACF field is empty it will still have a color.

Then that code you have just needs hooking into the wp_head. And it should grab the ACF colors from wherever you set them.

For this color, it will be used as the background color for a just the category archive pages header element (here), as well as the background of the letter in the header element on posts here.

I have this code at the moment and it does not seem to be working - I think it might be the get field line to calculate $css? I want it to retrieve the category_background_color custom field, either when on the category page or post page.

<?php
$css = get_field("category_background_color", $category_id);
if (!empty($css)) { ?>
    <style type="text/css">
        <?php echo '.page-hero {background_color: ' . $css .';}'; ?>
    </style>
    <?php }
?>

I want it to retrieve the category_background_color custom field, either when on the category page or post page.

In that case, you'll have to add in an if condition within your snippet.

Example:

<?php
$css = get_field("category_background_color", $category_id);
if( is_single() && in_category( $category_id ) ){
    if (!empty($css)) { ?>
        <style type="text/css">
            <?php echo '.page-hero {background_color: ' . $css .';}'; ?>
        </style>
        <?php }
    }
?>

The if( is_single() && in_category( $category_id ) ) condition basically checks if the page is a single post and is in the category specified by $category_id.

And as David mentioned, you should hook it to wp_head with the Hook Element or by adding it on your functions.php which will look something like this:

<?php
add_action( 'wp_head', function(){ 
$css = get_field("category_background_color", $category_id);
if( is_single() && in_category( $category_id ) ){
    if (!empty($css)) { ?>
        <style type="text/css">
            <?php echo '.page-hero {background_color: ' . $css .';}'; ?>
        </style>
        <?php }
    }
});
?>

Thank you for this - I don't see the colors working though as of yet.

For the CSS I have:

.cat-first-letter {
	font-size: 3rem;
	background: [category_background_color];

The post page isn't updating at the moment such as here.

For the category element such as on this page, I am unsure how to get the custom shortcode to show for each category?

For the above examples, the color I've made the custom field 'category_background_color' is a light blue.

Your original request was for changing the background color ? Did that work ?
If so then we can use the same method to output the CSS for the cat-first-letter element.

Let me know

Unfortunately I do not see a change in the background color here or the to the background of the first letter of the category here.

The only CSS I have is this at the moment:

.cat-first-letter {
	font-size: 3rem;
	background: [category_background_color];

So I am unsure what I need to add to actually get the category header element to change background now, and the category first letter to change background on the post header element.

Hi,

.cat-first-letter {
	font-size: 3rem;
	background: [category_background_color];

Since they're both within the Header element:

For the first link, you can add this within the Header Element's code area in this manner:

<style>
.cat-first-letter {
	font-size: 3rem;
	background: [category_background_color];
}
</style>

As for the second link, its basically the same procedure, except you just change the CSS selector to wps-dropcap as it is the selector the second link is using.

example:

<style>
.wps-dropcap {
	font-size: 3rem;
	background: [category_background_color];
}
</style>

Hello, I've added both pieces of code to each applicable element and the colors have not changed.