advanced custom fields wordpress custom class

Question

I have a custom field in ACF which is a button that I need to change to a different colour based on what page they are on, so for example

Page 1 - Button needs to be blue
Page 2 - Button needs to be red

But they both use the same ACF button.

Is there a way to do this or do I need to create individual ones of each page?

Answer 1

Wordpress adds unique classes to the body element of each page/post - and this can help you achieve what you need.

First inspect the body element of your pages - Page 1 probably has a class page-1 and Page 2 probably has a class page-2.

Then you can use CSS rules to target your buttons:

/* Target Page 1 Button */
.page-1 .btn {
  background-color: red;
}
/* Target Page 2 Button */
.page-2 .btn {
  background-color: blue;
}

Alternatively, you could use the WordPress is_page() function to add a unique class to your buttons determined by page:

<?php
// e.g. in functions.php
function extraButtonClass() {
  // Target by page slug or ID
  if(is_page('page-1')) {
    return ' red';
  } elseif(is_page('page-2')) {
    return ' blue';
  } else {
    return null;
  }
}

// In template:
<button class="btn<?php echo extraButtonClass(); ?>">My Button</button>