[Resolved] CPT archive with dynamic colours

Home Forums Support [Resolved] CPT archive with dynamic colours

Home Forums Support CPT archive with dynamic colours

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #2178518
    Mike

    Hi – I have a CPT and would like to have an archive page with a different background colour for each post – based on taxonomy.
    So Books = green, Documents = Blue, Cards = Red
    I’ve created a colour-picker, and store the category colour in term-meta ‘cat_color’.
    Is there a way with a Block Template (or any way) to set the background colour of each container (article) to the value of ‘cat_color’.
    In other words – to create a CPT archive, with different colour background for each post. e.g.
    [Books article (grn background]
    [Books article (grn background]
    [Cards article (red background] etc.
    Hope that’s clear.

    #2178524
    David
    Staff
    Customer Support

    Hi there,

    on a standard post the taxonomy-term gets added as a post_class to the article container.

    https://developer.wordpress.org/reference/functions/post_class/

    This should apply, or could be applied to a CPT.

    Do you have the CPT archive setup so i can take a look?

    #2179080
    Mike

    I can’t use fixed css – because the client might add categories later, or choose a new colour… so I need to enable the colour to be added dynamically.
    You can sniff around on the site. As I say, a CPT taxonomy ‘resource_type’ – which allows you to save a colour to the term meta ‘cat_color’.
    It’s a test-site so you can do whatever you need.

    #2179111
    Mike

    Well. I have achieved it by using a HOOK – generate_before_entry_title – targeting the cpt archives, with this code:

    <?php
      $post_con = get_the_ID();
    	if ( $terms = get_the_terms( $post_con, 'resource_type' ) ) {
        $term_ids = wp_list_pluck( $terms, 'term_id' );
    	}
    	$term_one = $term_ids[0];
      $cat_color = get_term_meta($term_one, 'cat_color', true);
    ?>
    <style>
    	#post-<?php echo $post_con; ?> .inside-article {background-color: <?php echo $cat_color; ?>}
    </style>

    This retrieves the cat_color and dynamically adds in-line styles… but the whole thing feels like a crime against code! So if you know of a neater way, I’d really appreciate it – especially as I’d like to use BLOCKS template to style the archive.
    Thanks

    #2179346
    Elvin
    Staff
    Customer Support

    Hi Mike,

    This is actually fine but consider hooking it on wp_head instead hooks within the actual <body> of the page for uniformity.

    #2179489
    Mike

    I don’t think this would work? Or am I misunderstanding?
    If I hook to the HEAD I’d have to iterate over IDs from the loop and create a stylesheet. But if I have infinite scroll, I’d potentially have to make a style-sheet for 1000’s of posts which would get silly.
    A better way would be to modify the archive.php and add the style in-line. However – I am hopeless at code. Looking at your archive.php all it does is generate_do_template_part( ‘archive’ );
    I understand this is a custom function. But could you help me out by giving an idiots guide to creating the right file structure so that I have (is it content.php?) the right files in my child-theme to edit the output of the loop. Let’s call my CPT ‘resources’. I know I need something like resources-content.php (copied from content.php) and resources-archive.php (copied from archive) – is this right? and where do i put the copies.
    I’d really appreciate it. thanks.

    #2179524
    David
    Staff
    Customer Support

    Is it possible to access the site ? That login failed to recognise the user ?

    #2179607
    Mike

    Hi David,
    Sorry to mess about – I removed the user. I’ve created archive-(slug) and content-(slug) in my child theme and now have the background style applied there, which should solve things. I’m sure you have enough to do – but if you want to have a look please do – I’ve added the user back. If you have an inspiration for the ‘least effort’ and ‘most bullet-proof against future theme changes’ way of doing this – that will apply to the archives and the single-posts… – or can modify the code to be more efficient – I will have a little wee of joy 😉
    Thanks

    #2179648
    David
    Staff
    Customer Support

    Ok… so my thoughts would be to loop through the taxonomy terms, get the term meta and print out some CSS variables.
    Something to play with:

    add_action('wp_head', 'db_term_colors');
    
    function db_term_colors(){
        $termArgs = array(
    	// add term args if necessary
        );
        $taxonomy = 'your_tax_slug';
        $taxterms = get_terms( $taxonomy, $termArgs );
        $css = '<style>';
        foreach ($taxterms as $term) {
            $term_color = get_term_meta( $term->term_id, 'color', true);
            $css .= '.' . $taxonomy . '-' . $term->slug . '{--term-bg:' . $term_color . ';}'; 
        }
        $css .= '</style>';
        echo $css;
    }

    You need to set the $taxonomy = 'your_tax_slug';

    What this will do is print out a bunch of style like this:

    .your_tax_slug-entertainment {
        --term-bg: #dd3333;
    }
    .your_tax_slug-food {
        --term-bg: #eeee22;
    }
    .your_tax_slug-technology {
        --term-bg: #ef32ef;
    }
    .your_tax_slug-travel {
        --term-bg: #72160c;
    }

    Now you can do this:

    .element-selector {
        background-color: var(--term-bg);
    }

    The beauty of using CSS Variables also means you can set a default color at the root:

    :root {
        --term-bg: #ffoooo;
    }

    or just add that color variable in the GP Customizer > Colors and that will do it for you.

    What the dynamic CSS function is doing is updating the CSS Variable at the local post_class level. So theres no need to address and post-classes in your CSS 🙂

    #2179701
    Mike

    This is beautifully done and works like a charm for archives and single… many thanks 🙂

    #2180071
    David
    Staff
    Customer Support

    Awesome – glad to hear that worked!!

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