Home › Forums › Pro Support › Set background colour with acf field value
- This topic has 9 replies, 2 voices, and was last updated 5 years ago by
Tom.
-
AuthorPosts
-
September 10, 2018 at 6:15 am #5882
Paul
ParticipantHi 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
PaulSeptember 10, 2018 at 8:14 pm #5888Tom
KeymasterHey 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 #5913Paul
ParticipantSorry 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
PaulSeptember 13, 2018 at 8:23 am #5917Paul
ParticipantHey 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
PaulSeptember 13, 2018 at 7:08 pm #5920Tom
KeymasterUnfortunately 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 #5956Paul
ParticipantHey 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
PaulSeptember 19, 2018 at 7:43 am #5957Paul
ParticipantBTW, 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 #5960Tom
KeymasterThat’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 #5961Paul
ParticipantSorry 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
PaulSeptember 20, 2018 at 11:20 pm #5965Tom
KeymasterAwesome! That looks great 🙂
-
AuthorPosts
- You must be logged in to reply to this topic.