Can I set up a hover animation in CSS depending on a PHP conditional?

I created a 'Light' theme and 'Dark' theme in the WP dashboard (via Advanced Custom Fields) that will determine how a series of buttons will look, depending on which theme is selected:

                <?php 
                $learn_more = get_field('learn_more_button');

                if( $learn_more == 'Light' ) {
                    $btn_background = '#E0EFF8';
                    $btn_text = '#007BC1';
                    $back_btn_link = '#E0EFF8';

                } else {
                    $btn_background = '#007BC1';
                    $btn_text = '#E0EFF8';
                    $back_btn_link = '#0C4F70';
                }
                ?>

So far, the text and background color render correctly for both themes:

<div class="layout center"><a style="background-color:<?php echo $btn_background ?>; color:<?php echo $btn_text ?>" class="button coe-button" href="<?php echo get_field('coe_external_link'); ?>" target="_blank">Learn More</a></div>

...but I also want to set up a hover animation on the buttons that will reverse the text and background color - whatever they are - when hovered on:

With the following CSS, only the 'Light' themed buttons complete the animation, while the buttons with the 'Dark' theme do nothing:

<style>
.coe-button:hover {
    color:<?php echo $btn_background ?>!important;
    background-color:<?php echo $btn_text ?>!important;
}    
</style>

Is there a way to make this work? Not sure if I'm doing something wrong or if this is just a limitation of the languages but I could use some guidance. Thanks!

I created a 'Light' theme and 'Dark' theme in the WP dashboard (via Advanced Custom Fields) that will determine how a series of buttons will look, depending on which theme is selected:

                <?php 
                $learn_more = get_field('learn_more_button');

                if( $learn_more == 'Light' ) {
                    $btn_background = '#E0EFF8';
                    $btn_text = '#007BC1';
                    $back_btn_link = '#E0EFF8';

                } else {
                    $btn_background = '#007BC1';
                    $btn_text = '#E0EFF8';
                    $back_btn_link = '#0C4F70';
                }
                ?>

So far, the text and background color render correctly for both themes:

<div class="layout center"><a style="background-color:<?php echo $btn_background ?>; color:<?php echo $btn_text ?>" class="button coe-button" href="<?php echo get_field('coe_external_link'); ?>" target="_blank">Learn More</a></div>

...but I also want to set up a hover animation on the buttons that will reverse the text and background color - whatever they are - when hovered on:

With the following CSS, only the 'Light' themed buttons complete the animation, while the buttons with the 'Dark' theme do nothing:

<style>
.coe-button:hover {
    color:<?php echo $btn_background ?>!important;
    background-color:<?php echo $btn_text ?>!important;
}    
</style>

Is there a way to make this work? Not sure if I'm doing something wrong or if this is just a limitation of the languages but I could use some guidance. Thanks!

• php
• css
• advanced-custom-fields
• conditional-content

Share Improve this question asked Nov 7, 2019 at 18:11 aubsauceaubsauce 311 bronze badge

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 1

No, not like that, hovering is something that happens in the browser, long after PHP has generated the page and shutdown.

Fundamentally, you need to take a different more CSS based approach. Instead of providing static styles manually controlling the colours in PHP, you should instead only track wether it's dark or light, and specify a HTML class based on that value. Then all styling can be written in CSS, and you can use hover pseudoclasses.

E.g:

$style = get_field( 'learn_more_button_style' );
$url = get_field( 'coe_external_link' );
?>
<div class="layout center <?php echo esc_attr( 'style-'.$style ); ?>">
  <a class="button coe-button" href="<?php echo esc_url( $url ); ?>" target="_blank">Learn More</a>
</div>

Notice I did several things:

• I fetched all the fields in a single place, don't mix displaying and retrieving data, it makes things harder to read, your code uglier, and causes problems down the line. For example, what if we needed to check the value of the URL field? We would need to mess around with inline conditionals and ternary operators inside the HTML, but not, we have a nice place we can do it cleanly, and our HTML looks the same
• I escaped your URL using esc_url, always escape on output for security reasons
• I renamed the field to learn_more_button_style. By using _style I eliminated any assumptions about what kind of style, so you could have light, dark, jazzy, neon, subdued, high contrast, etc
• I added a style- class, now you'll see style-light, which you can use with CSS
• All the inline style attributes are gone, they're not necessary

This way, you can style your button like this:

.style-light .button {
  background: white;
  border: 1px solid black;
  color: black;
}

.style-dark .button {
  background: black;
  border: 1px solid white;
  color: white;
}
.style-light .button:hover {
  background: black;
  border: 1px solid white;
  color: white;
}

.style-dark .button:hover {
  background: white;
  border: 1px solid black;
  color: black;
}

At this point, it becomes a pure CSS frontend question, and you don't need any knowledge of PHP or WordPress to style the buttons further