Do you use the WD_ theme? Want to know how to call ACF font color hex code only from the “Other Options” tab instead of it inserting “style=’color: #000000;'” into the element with the “container” class? Well, here’s how you do it.
To set up the field, add this code to your content block:
$other_options = get_sub_field( 'other_options' ) ? get_sub_field( 'other_options' ) : get_field( 'other_options' )['other_options'];
To call ACF font color hex code use this:
<?php echo esc_html( $other_options['font_color'] ); ?>
If you want to see how this code works you can look at the acf.php template under “Get other options.”. Then you’ll be able to see how their calling the font color and adding in the “style=’color: #. . . ;'”.
Here’s how it works:
(How the theme is calling acf font color hex codes)
Firstly the theme calls the fields from the content block “Group: Block Options — To Clone” in the acf.php file.
// Get block other options.
$other_options = get_sub_field( 'other_options' ) ? get_sub_field( 'other_options' ) : get_field( 'other_options' )['other_options'];
Next it passes these values into the default options for the Other tab:
// Setup defaults.
$defaults = array(
'background_type' => $background_options['background_type']['value'],
'font_color' => $other_options['font_color'],
'container' => 'section',
'class' => 'content-block',
'custom_css_class' => $other_options['custom_css_class'],
);
After that it adds the inline style attribute around the hex code variable:
// Set the custom font color.
if ( $args['font_color'] ) {
$inline_style .= 'color: ' . $args['font_color'] . '; ';
}
Finally it adds this inline style to any element with the class “container”.
// Print our block container with options.
printf( '<%s class="%s" style="%s">', esc_html( $args['container'] ), esc_attr( $args['class'] ), esc_attr( $inline_style ) );
Documentation Resources:
In addition you can use the same method to create your own custom fields attributes and add them to elements automatically with custom classes. Similarly this method is really useful if you want to use the same color picker field to style multiple items. For example matching a border color to the font color without having to create a new custom field.
Note: This may not work however if you’re using repeater fields. In addition ACF has known limitations when it comes to cloning field groups into repeaters.
Anyhow I hope at least one person finds this very specific code example useful! This theme can be a little daunting to customize for newer wordpress developers. For instance sometimes docs can leave out useful info if they assume too much prior knowledge.
Also if you liked this post you may want to check out some of our other tutorials like How to create a custom brush in photoshop CC & How to know if you need a Web Designer.
Lastly, Thank You for reading and have a wonderful day!