Set background colour with acf field value

This topic has 9 replies, 2 voices, and was last updated 5 years ago by Tom.

Viewing 10 posts - 1 through 10 (of 10 total)

Author

Posts
September 10, 2018 at 6:15 am #5882

Paul
Participant

Hi Tom

Please can you show me how to set the background colour of each grid item to the hex value of an ACF field in the post.

IE: Each post has a custom field called ‘background_colour’ which outputs a hex value.
I would like to set the background colour of each item in the WPSP grid to this value, so every item in the grid has its own (different) background colour.

Appreciate any help

Thanks
Paul

September 10, 2018 at 8:14 pm #5888
Tom
Keymaster
Hey Paul,

You could try something like this:
```
add_filter( 'wpsp_settings', function( $settings ) {
    $color = get_post_meta( get_the_ID(), '_my_color', true );
    
    if ( $color ) {
        $settings['inner_wrapper_style'][] = 'background-color:' . $color;
    }

    return $settings;
} );
```
Let me know 🙂
September 13, 2018 at 3:34 am #5913

Paul
Participant

Sorry Tom, that snippet didn’t work. I substituted my actual acf field name ‘background-colour’ for ‘_my_color’. I then tried setting $color = ‘#666’ to see if a hard-coded hex value would work in case acf wasn’t being set — this added a background colour to the whole wpsp wrapper, not behind each individual item (wp-show-posts-inner).

Is there another way to dynamically set the background colour of each wp-show-posts-inner element to an acf value from the post?

Thanks
Paul

September 13, 2018 at 8:23 am #5917

Paul
Participant

Hey Tom — alternate idea:

I can solve this if you can show me how to add the class “.news” to the wp-show-posts-inner element.

Please let me know.
Thanks
Paul

September 13, 2018 at 7:08 pm #5920

Tom
Keymaster

Unfortunately we don’t have a filter for that class.

I just made an adjustment above though – maybe it will help?: https://wpshowposts.com/support/topic/set-background-colour-with-acf-field-value/#post-5888

September 19, 2018 at 6:53 am #5956
Paul
Participant
Hey Tom

Still trying to get a custom background colour behind each WPSP item. The adjustment above didn’t work, unfortunately.

As an alternative, I’m trying to insert a div with a custom colour background behind each block using the wpsp_before_wrapper hook like this:
```
add_action( 'wpsp_before_wrapper','wpsp_add_custom_meta' );
function wpsp_add_custom_meta()
{
    $meta = get_post_meta( get_the_ID(), 'background_colour', true );
    if ( isset( $meta ) && '' !== $meta )
	echo '<div style="background-color:' . $meta . '">';
}

add_action( 'wpsp_after_wrapper','wpsp_close_div' );
function wpsp_close_div()
{
	echo '</div>';
}
```
This doesn’t work – nothing gets inserted. However, replacing wpsp_before_wrapper with wpsp_before_header and wpsp_after_wrapper with wpsp_after_content DOES insert a div with a custom background colour behind the header and content. Not quite what I want, but proves the custom field is working. Just need to target the right element.

The staging page is here: https://actondemo47.com/news-list/
Any ideas?

Thanks
Paul
September 19, 2018 at 7:43 am #5957

Paul
Participant

BTW, I assumed the hook ‘wpsp_before_wrapper’ refers to the wrapper element around each individual post block, but I guess I’m wrong. I’ve set the news page: https://actondemo47.com/news-list/ to insert a div with a custom colour behind the header and content temporarily so you can see that the code works, but doesn’t make the whole block a custom background colour.

September 19, 2018 at 10:23 pm #5960
Tom
Keymaster
That’s likely happening because wpsp_before_wrapper appears before the post loop is initiated.

I assume your custom field is in each post being displayed? If so, it would need to be hooked into wpsp_before_header as you found out.

What if you added the class to the post itself?:
```
add_filter( 'post_class', function( $classes ) {
    $color = get_post_meta( get_the_ID(), '_my_color', true );
    
    if ( $color ) {
        $classes[] = $color;
    }

    return $classes;
} );
```
September 20, 2018 at 2:42 am #5961

Paul
Participant

Sorry mate, that didn’t work either. No worries though, solved by creating a new div inside wp-show-posts-inner with the custom background colour and adjusting styles of both containers.
This is what I wanted the blocks to look like:
https://actondemo47.com/news-list/

Cheers
Paul

September 20, 2018 at 11:20 pm #5965

Tom
Keymaster

Awesome! That looks great 🙂
Author

Posts

Viewing 10 posts - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.

[Resolved] Set background colour with acf field value