[Resolved] Custom field color to change element background

[Elvin]

Can we test the shortcode first if it works?

What happens if you place it outside of the css selector and <style></style> block? Does it output anything?

Let us know.

[William]

I’ve placed that code without the <style></style> as per the below image:

You can see on this page it appears the shortcode is not working.

Just to be clear up to now I have a hook to wp_head with the following code:

<?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 }
    }
?>

And a shortcode [category_background_color] which is a color picker for just categories.

[Elvin]

You can see on this page it appears the shortcode is not working.

Ah, there’s your issue.

Since you’re using ACF for the color, use ACF’s shortcodes.

Follow this format: [acf field="slug_of_the_css_acf_field"]

Example:

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

This works assuming your field slug for your the color’s ACF field is category_background_color.

But since the PHP isn’t also working, perhaps acf field slug category_background_color is wrong.

That said, can you re-check if we’re using the right slug for the category_background_color acf field?

[William]

The shortcode for ACF seems to be right:

I’ve updated without the script one of the elements to:

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

And nothing appears for that shortcode where it should go (see here).

[David]

Try this:

<style>
.cat-first-letter {
    font-size: 3rem;
    <?php echo 'background: {' . do_shortcode( '[acf field="category_background_color"]' ) . '};';
}
</style>

[William]

I’ve added that as so:

And nothing appears for the category letter background on this page.

[David]

That code i provided needs to be added using a Hook Element set to the wp_head, set it to display rules to match the header element. And make sure you check execute PHP and Shortcodes.

[William]

When I add `<style>
.cat-first-letter {
font-size: 3rem;
<?php echo ‘background: {‘ . do_shortcode( ‘[acf field=”category_background_color”]’ ) . ‘};’;
}
</style>`

As a hook element with PHP and shortcodes executed, with some display settings, the website goes down with a ‘There has been a critical error on this website.’?

[David]

If you add the shortcode to a page – what exactly does it output ? Is it just the #hexcolor ?

[William]

I’ve stuck [category_background_color] [acf field="category_background_color"]
On this post page and category page and I don’t see a hex appearing as of yet.

[David]

So the shortcode is not doing what it should do.
You may want to ask ACF support on how to resolve that.

[William]

I’ve spoken to ACF and they guided me to this page which, for me, is a little difficult to read as to what the shortcode needs to be on category and post pages.

Would it be easier to create a shortcode for a color picker for categories with snippets?

[Elvin]

I’ve spoken to ACF and they guided me to this page which, for me, is a little difficult to read as to what the shortcode needs to be on category and post pages.

This is actually the way to go. You only have to set the location rules as to where the field should appear.

In that particular page, its asking the user to add field’s location rule to Taxonomy of “category” so the color picker field appears when you edit the “category” details through Dashboard > Posts > Categories list.

This is done so ACF could associate a color field to the categories which you can then pull using the shortcode.

But one problem here is, this may be bugged. The color picker field assigned to taxonomies may not be saving correctly.

I’ve tried the same thing my self on taxonomies but it doesn’t output anything also. Even more weird is that after adding fields on the taxonomy, the dashboard doesn’t let me add more categories. But this only applies to the taxonomy fields. Pages and posts work fine.

That said, As David mentioned, you’d have to ask ACF support about this.

Would it be easier to create a shortcode for a color picker for categories with snippets?

It’s easier if you know your way around PHP and WordPress terms.

Alternatively, you can go the pure CSS route.

Example:

.category-carol-ann-duffy .cat-first-letter {
    font-size: 3rem;
    background-color: red;
}

You then do this for all the categories.

Note: This will also be tedious assuming you have 100+ categories.

[William]

Hi there,

So I think I’ve found a solution so happy to share it with you and the GeneratePress community freely.

I created a shortcode that was a color picker for categories using ACF plugin called ‘category_background_color’. I then used a snippet to create it into a shortcode:

add_shortcode( 'category_background_color', function() {
		
	$category_id = get_the_category(get_the_ID());
	$category = get_category($category_id[0]->term_id);
    
    $category_background_color = get_field( 'category_background_color', $category );

    return $category_background_color;
	
} );

From my understanding, this grabs the ACF field value from the color picker whether you are on the category OR on a post for that category.

For the header element here I have:

		<div class="meta-category">
    <a href="https://wordpress-425633-1630880.cloudwaysapps.com/claude-mckay/" rel="tag">
        <span class="cat-first-letter">[cat-first-letter]</span>  <p style="display:inline-block;"> - {{post_terms.category}}</p>
    </a>
</div>

<h1 class='post-title'>
	{{post_title}}
</h1>

<div class="post-excerpt">
	[post-excerpt]
</div>

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

And for the category page here, I have this header element:

<h1 class='page-title'>
	{{post_title}}
</h1>
    <div class="category_description_class">
        <p>[category_description]</p>
    </div>		

<style>
.page-hero {
background: [category_background_color];
}
</style>

Is this looking all good? the <style> for each element only appears on each page respectively, and there will only be ever one page hero, so it’s okay to have the CSS included for each?

With this, can you provide some CSS to finish to help get the area looking the same as this page?

I think it is mainly:

– Spacing of the ‘-‘
– Color of ‘-‘ and text
– Hover effect
= Font
– Making the ‘C’ blue background square

As well as making the div element clickable and not just the text/’C’ box

[Elvin]

Before we start, perhaps we could change a few things on its markup so it looks more neat?

Instead of having a structure like this:

<div class="meta-category">
    <a href="https://wordpress-425633-1630880.cloudwaysapps.com/claude-mckay/" rel="tag">
        <span class="cat-first-letter">C</span>  </a><p style="display:inline-block;"><a href="https://wordpress-425633-1630880.cloudwaysapps.com/claude-mckay/" rel="tag"> - </a><a href="https://wordpress-425633-1630880.cloudwaysapps.com/claude-mckay/" rel="tag">Claude McKay</a></p>
    
</div>

Can we change it into this?

<div class="meta-category">
<a class="category-style" href="https://wordpress-425633-1629918.cloudwaysapps.com/claude-mckay/">
<span style="background:#50514F" class="cat-first-letter">C</span>
<span class="label">Claude McKay</span></a>
</div>

As it doesn’t make any sense to add multiple anchor tags if you want all of them to have the same link target.

We’ll just add — on the pseudo element so it lines perfectly.

Let us know.

Note: You can provide us the whole code content of the Header Element if you need a bit more help w/ it.

[Author]

Posts