SCSS rule based on ACF field value

Tagged: 

Author Posts

studioosiris May 30, 2020 at 9:53 am

Heads up! this post was created when Microthemer was at version 6. The current version is 7. Some references to the interface may be out of date.

Hi,
I trying add scss rule based on ACF field value, but not sucess. How can I achieve code like This:

$option =  $the_field('povrch_upr_text');

.elementor-element-95910f6 .elementor-text-editor {
	if($option == "P01 – P06, barvy RAL"){ $color = "red";}
}

Its possible in Microthemer?

Sebastian May 30, 2020 at 5:55 pm

With ACF, you can get the value with PHP, but to incorporate that in your MT Sass code, you would need to use PHP to write some code to a Sass file e.g. wp-content/micro-themes/acf-variables.scss and then import that file at the top of the MT custom code editor using @import:

@import 'acf-variables.scss';

In order to write to the Sass code to a file you would need to use the PHP file system function e.g. file_put_contents.

The Sass code you write to the file might look like this:

$color = "red";

I hope that helps!

Cheers,
Sebastian

Sebastian May 31, 2020 at 5:22 pm

Having said that, if the color needs to be different on different pages, the above solution won’t work. A better approach would be to use CSS variables rather than Sass variables. You can add the CSS code to the page head dynamically using the following PHP code:

add_action('wp_head', 'my_custom_css');

function my_custom_css() {
  echo '<style>
    :root {
     --color: red;
    } 
  </style>';
}

(replacing red with the ACF PHP color variable)

And then in Microthemer you would enter the color variable in the VAR field of the color picker:

var(--color)

studioosiris June 2, 2020 at 8:29 pm

Hi,
Thank You for Your support. How can I use this code? Add it “as is” to function.php and only change red to “custom_field_slug_name”?

What I looking for is more complex rules, this is reason why I try it with SASS “if/else” conditions, there is more possibility. So not only for ACF, but if title is, or if post custom field, if sale_price is empty, …

I find another SASS code, but conditions there not work (still display only “red”), I do not know how to implement ACF field there.

 $type: audi;   //value you selected
p {
   @if $type == benz {
      color: red;
   } @else if $type == mahindra {
      color: blue;
   } @else if $type == audi {
      color: green;
   } @else {
      color: black;
   }
}

Its possible play with this code, or how modify it better?

Sebastian June 3, 2020 at 11:29 am

You could add the above code to your theme’s functions.php file, replacing ‘red’ with the ACF variable. But now that you’ve provided some more detail, I wonder if another method might be better. You could apply different classes to the body tag, depending on the ACF values. Then it’s simply a matter of referencing those classes to set different colors etc. You wouldn’t even need to use CSS or Sass variables.

The PHP code (for functions.php) would look like this (I use get_field from checking the ACF API):

// Add custom classes to the page based on ACF settings
add_filter( 'body_class', function( $classes ) {

    $my_custom_classes = array();

	$option = get_field('povrch_upr_text', false, false);

	// add red class
	if( $option === "P01 – P06, barvy RAL"){
		$my_custom_classes[] = "option-is-red";
	}

	// add another class
	elseif ( $option === "something else"){
		$my_custom_classes[] = "something-else";
	}

	// merge your custom classes with the usual classes added to the body element
	return array_merge( $classes, $my_custom_classes );

} );

And then in Microthemer, you would have the following CSS:

body.option-is-red .option-selector {
   background: red;
}

body.something-else .some-other-element {
   /* Enter custom styles here */
}

You would set whatever classes you like in the PHP code, and then references the same class in the CSS.

Does that make sense?

studioosiris June 7, 2020 at 12:39 am

Hi,
Thank You very much, it works great. For ACF. But what if I need custom taxonomy instead ACF?
I try something with $terms = get_terms


// Add custom classes to the page based on ACF settings
add_filter( 'body_class', function( $classes ) {

$my_custom_classes = array();

$terms = get_terms('my_tems_slug');

// add red class
if( $terms === "custom_category_1"){
$my_custom_classes[] = "is_red";
}

// add another class
elseif ( $terms === "custom_category_2"){
$my_custom_classes[] = "something_else";
}

// merge your custom classes with the usual classes added to the body element
return array_merge( $classes, $my_custom_classes );

} );

But not work.
And second question. This code add custom css to singl page, but its possible add All in one page too? For example when I list on one page this all taxonomy and need rule based on it like here:
https://prntscr.com/sv5ggs

Sebastian June 8, 2020 at 11:16 am

Hey,

1. It looks like the get_terms function returns an array of objects, rather than a single string like “custom_category_1”, so you would need to handle that with the relevant PHP code. For me to write this for you would be straying from the scope of support in this forum. If you are dabbling with custom PHP, I recommend seeking support on wordpress.org or stackoverflow.

2. You need to add the custom classes to the calendar entries, rather than the body tag. I’m not sure what you’re using to generate the calendar, but they might have an action hook you can tap into if you’re lucky. This would be a question for the author of the calendar, or its docs.

I hope that helps!

Cheers,
Sebastian

You must login or register to reply to this topic.