PHP as CSS with ACF field

• Jomar Lipon

• September 6, 2021 at 12:25 am

PHP as CSS with acf field

I created a PHP file(dynamic.php) that will read the CSS. In order to that..

I added this code:

<?php
    header('Content-Type: text/css');
?>

But inside the php file, I want to get the value from the field..

for_example

a {
    color: <?php the_field('a_href_color', $post->ID ); ?>;
    text-decoration: none;
}

and I got this error in the php file: (note I used the_field and get_field if one of the function works)

<b>Fatal error</b>: Uncaught Error: Call to undefined function get_field() or the_field()

• John Huebner

• September 16, 2021 at 2:01 pm

You cannot do this because nothing in WP is loaded for the CSS file.

You need to use admin_ajax.php to load a dynamic CSS file.

https://bappi-d-great.com/how-to-write-dynamic-css-in-a-php-file-in-wordpress/

• jarvis

• September 22, 2021 at 7:27 am

I’ve used the below which grabs values from an option page, then creates a CSS file and enqueues it:

###################################################
# Create Custom CSS
###################################################
function acf_generate_options_css() {
	$ss_dir = get_stylesheet_directory();
	ob_start(); // Capture all output into buffer
	require($ss_dir . '/inc/custom-styles.php'); // Grab the custom-style.php file
	$css = ob_get_clean(); // Store output in a variable, then flush the buffer
	file_put_contents($ss_dir . '/css/custom-styles.css', $css, LOCK_EX); // Save it as a css file
	
}
add_action( 'acf/save_post', 'acf_generate_options_css', 20 );

I then enqueue the script:

function acf_enqueue_scripts() {
    wp_enqueue_style( 'custom-theme-css', get_template_directory_uri() . '/css/custom-styles.css' );
}
add_action( 'wp_enqueue_scripts', 'acf_enqueue_scripts', 99 );

And custom-styles.php looks like this:

$colour_name = get_field('colour_name','option');
$select_colour = get_field('select_colour','option');
.bg-colour-<?php echo str_replace(" ","-",strtolower($colour_name)); ?> {
    background-color: <?php echo $select_colour; ?>;
}

Not sure if that helps at all?

• BrunoSeppia

• November 30, 2023 at 6:52 am

This answer worked for me!

Just a little edit: if you want to use an option page to control your “global” css values use this hook instead for the first add_action:

add_action( 'acf/options_page/save', 'acf_generate_options_css', 20 );

This is actually very nice because if I understand correctly the css is saved as a static css file and is only updated when the user edits the page that contains ACF fields to control its variables so the server doesn’t have to elaborate it every time it wants to load it. Thank you!

• elizabeth2weeds

• December 1, 2023 at 10:57 am

thanks, the answer works for me

• elizabeth2weeds

• December 4, 2023 at 11:41 am

Really helpful
Just a little edit: if you want to use an option page to control your “global” css values use this hook instead for the first add_action:

add_action( ‘acf/options_page/save’, ‘acf_generate_options_css’, 20 );

This is actually very nice because if I understand correctly the css is saved as a static css file and is only updated when the user edits the page that contains ACF fields to control its variables so the server doesn’t have to elaborate it every time it wants to load it.

• stevediaz

• December 8, 2023 at 9:21 am

It seems like the Advanced Custom Fields (ACF) functions (the_field and get_field) are not available in your PHP file because it’s not part of the WordPress loop. To use ACF functions outside the loop, you need to include the ACF functions file and initialize ACF.

Add the following lines at the beginning of your dynamic.php file to include the ACF functions and initialize ACF:
<?php
header(‘Content-Type: text/css’);

// Include ACF functions file
include_once($_SERVER[‘DOCUMENT_ROOT’] . ‘/path/to/your/wp-load.php’);

// Initialize ACF
acf()->initialize();
?>