- This topic has 10 replies, 3 voices, and was last updated 2 years ago by David.
-
AuthorPosts
-
April 5, 2022 at 4:55 am #2178518Mike
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.April 5, 2022 at 5:02 am #2178524DavidStaffCustomer SupportHi 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?
April 5, 2022 at 11:28 am #2179080MikeI 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.April 5, 2022 at 12:04 pm #2179111MikeWell. 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.
ThanksApril 5, 2022 at 9:14 pm #2179346ElvinStaffCustomer SupportHi Mike,
This is actually fine but consider hooking it on
wp_head
instead hooks within the actual<body>
of the page for uniformity.April 6, 2022 at 1:06 am #2179489MikeI 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.April 6, 2022 at 1:40 am #2179524DavidStaffCustomer SupportIs it possible to access the site ? That login failed to recognise the user ?
April 6, 2022 at 3:09 am #2179607MikeHi 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 😉
ThanksApril 6, 2022 at 4:18 am #2179648DavidStaffCustomer SupportOk… 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 🙂
April 6, 2022 at 5:35 am #2179701MikeThis is beautifully done and works like a charm for archives and single… many thanks 🙂
April 6, 2022 at 8:45 am #2180071DavidStaffCustomer SupportAwesome – glad to hear that worked!!
-
AuthorPosts
- You must be logged in to reply to this topic.