Black Friday sale! Get 25% off WPSP Pro! Discount automatically applied at checkout.

[Resolved] Set background colour with acf field value

Please login to receive premium support.

Support for the free plugin can be found here.

Home Forums Pro Support Set background colour with acf field value

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #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

    #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 🙂

    #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

    #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

    #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

    #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

    #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.

    #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;
    } );
    #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

    #5965
    Tom
    Keymaster

    Awesome! That looks great 🙂

Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.