skip to Main Content

I’m using WordPress with ACF, and I need to use a value of custom fields for CSS. For example, if the value of ACF ‘Name’ is YES, then CSS style just background around that field, if the value of the field is NO, then the background will be red.

2

Answers


  1. I think you can easily fix it by if condition. It has value then shows green color otherwise shows red color. you need to replace the CSS class name.

    <?php
    // Get field data
    $data = get_field('wifi');
    if( 'yes' == $data ){
        ?>
        <style>
            .entry-title{
                color: green;
            }   
        </style>
        <?php
    }else{
            ?>
        <style>
            .entry-title{
                color: red;
            }   
        </style>
        <?php
    }
    ?>
    

    Field: https://prnt.sc/cWvtiZia1KCm
    Green value: https://prnt.sc/ZO_4N_ob6J7h
    Red value: https://prnt.sc/ApikklLCEhhz

    Login or Signup to reply.
  2. I would do it via classes.

    Supposing "WiFi" is a "True/False" custom field:

    .no_wifi {
        background-color: red;
    }
    .wifi {
        background-color: green;
    }
    <?php
       $class_to_add = 'no_wifi';
       if (get_field('WiFi')) {
           $class_to_add = "wifi";
       }
    ?>
    
    <div class="<?php echo $class_to_add; ?>">
        ...
    </div>
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search