How to check if an element has a class using PHP in WordPress function.php file

I am trying to hide an element on the front-end and remember the user choice by creating a cookie in PHP.

Here is how I have it set up:

I have some HTML and JS scripts inside an HTML widget on the page on the front-end

<div id="training-banner"> training banner design here </div>
<button onclick="myFunction()" id="close-btn">X</button>

<script>
function myFunction() {
  var element = document.getElementById("training-alert");
  element.classList.add("hidebanner");
}
</script>

Then I have written the cookie function inside the function.php of the child theme:

add_action('init', function() {
    if (!isset($_COOKIE['training_banner_cookie'])) {
        setcookie('training_banner_cookie', 'showbanner', strtotime('+1 day'));
    }
    
    if (class_exists('hidebanner')){
        ?><style>#training-alert{display:none;}</style> <?php
        setcookie('training_banner_cookie', 'hidebanner', strtotime('+1 day'));
    }

    $cookieValue = $_COOKIE['training_banner_cookie'];
    if ($cookieValue == "hidebanner"){
        ?><style>#training-alert{display:none;}</style> <?php
    }
});

For some reason, the class_exists() PHP function does not work, any idea how this can be achieved?

Answer

With the help of @WillyLi’s answer, I was able to organize my thoughts and modify his code a bit here is what worked for me:

I modified the getCookie function declaration and simplified it to one parameter cname.
Then I also modified the setCookie and standardized it according to w3school
Finally, I wanted the banner to be hidden immediately as the user clicks the button so I added element.style.display = 'none'; to myFunction()

Here is what the final version looks like:

<button onclick="myFunction()" id="close-btn">X</button>

<script>
function getCookie(cname) {
  let name = cname + "=";
  let decodedCookie = decodeURIComponent(document.cookie);
  let ca = decodedCookie.split(';');
  for(let i = 0; i <ca.length; i++) {
    let c = ca[i];
    while (c.charAt(0) == ' ') {
      c = c.substring(1);
    }
    if (c.indexOf(name) == 0) {
      return c.substring(name.length, c.length);
    }
  }
  return "";
}

function setCookie(cname, cvalue, exdays) {
  const d = new Date();
  d.setTime(d.getTime() + (exdays*24*60*60*1000));
  let expires = "expires="+ d.toUTCString();
  document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}

function myFunction() {
    var element = document.getElementById("training-alert");
    element.style.display = 'none';
    setCookie('training_banner_cookie_hide', true, 1);
}

function init(){
    var shouldHideBanner = getCookie('training_banner_cookie_hide');
    if(shouldHideBanner){
        var element = document.getElementById("training-alert");
        element.style.display = 'none';
    }
}

init()
</script>

Advertisement

Answer