using advanced custom field to control css hover color

Question

this is a bit challenging for me: I am using the great Advanced Custom Field plugin on my site to create different color scheme to each of my taxonomy.

I created a field called taxonomy_color and echoed out the color like so:

<h4 style="color: <?php the_field('taxonomy_color', 'magazine_'. $tax_term->term_id); ?>;">Hello</h4>

* magazine_ is the name of my taxonomy.

This is fairly easy and it works perfectly, however, everything becomes more complex when I want to change my hover and active class too.

since changing the hover and/or active state requires a reference to the stylesheet I was thinking about creating a dynamic stylesheet called: style.php and trying to pass the custom field onto that stylesheet and using this method will allow me to control the hover and active states too.

this is the code I generated for my style.php:

<?php
    header("Content-type: text/css; charset: UTF-8");
?>
.slider-mag-template .bottom .nav li.activeSlide a,.slider-mag-template .bottom .nav li a:hover { color: <?php the_field('taxonomy_color', 'magazine_'. $tax_term->term_id); ?>;}

I can see in the site that the page is connected to my dynamic style.php but it doesn't read the field taxonomy_color from there.

can anyone suggest? even using a different method?

Thanks a lot

Answer 1

style.php does not have access to the WP variables, loop and so on. If you'd want to do that, you would need to repeat at least some of the queries used on your main page, and you would also add a new request for the browser, as you'd have the separate file.

I would rather generate a class based on the colors, use it for the headings, then print the CSS in the same page, in a <style> markup:

<?php
$colors = array(
  0 =>  the_field('taxonomy_color', 'magazine_'. $tax_term->term_id),
  'hover' =>  the_field('taxonomy_hover', 'magazine_'. $tax_term->term_id),
  'active' =>  the_field('taxonomy_active', 'magazine_'. $tax_term->term_id),
);
//get an unique class name with the allowed syntax - eg: _0000FF_000099_FF0000
$class = '_' + str_replace('#','', implode('_', $colors));
//create the CSS code 
$style = '';
foreach ( $colors as $key => $color ) {
  $style .= 'a.' . $class;
  if ( $key > 0 ) { $style .= ':' . $key; }
  $style .= '{ color: ' . $color . ';}';
}
?>
<h4 class="<?= $class ?>">Hello</h4>
...
<!-- before the end of the page -->
<style><?= $style ?></style>

This code would work for named colors or hexa values. If you'd also like to use RGB and or RGBA, you should also eliminate / replace the following characters when computing the class name: "(", ")", "." and ",". If you're using a loop, you should also store each $style value in an array and print all the styles at the end, in a single <style>...</style> markup.

Answer 2

I think the the_field function will only get you so far. You could use the WordPress get_post_meta function to get just the taxonomy name, and use that for the stylesheet.

<?php if ( get_post_meta(get_the_ID(), 'term_id', true) ) : // I think the custom field is called Term ID ?>

    <link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/css/<?php echo( get_post_meta(get_the_ID(), 'term_id', true) ); ?>">

<?php endif; ?>