Title: WP_Theme_JSON::convert_variables_to_value
Published: August 8, 2023
Last modified: February 24, 2026

---

# WP_Theme_JSON::convert_variables_to_value( array $styles, array $values ): array

## In this article

 * [Parameters](https://developer.wordpress.org/reference/classes/wp_theme_json/convert_variables_to_value/?output_format=md#parameters)
 * [Return](https://developer.wordpress.org/reference/classes/wp_theme_json/convert_variables_to_value/?output_format=md#return)
 * [Source](https://developer.wordpress.org/reference/classes/wp_theme_json/convert_variables_to_value/?output_format=md#source)
 * [Related](https://developer.wordpress.org/reference/classes/wp_theme_json/convert_variables_to_value/?output_format=md#related)
 * [Changelog](https://developer.wordpress.org/reference/classes/wp_theme_json/convert_variables_to_value/?output_format=md#changelog)

[ Back to top](https://developer.wordpress.org/reference/classes/wp_theme_json/convert_variables_to_value/?output_format=md#wp--skip-link--target)

This function’s access is marked private. This means it is not intended for use 
by plugin or theme developers, only by core. It is listed here for completeness.

Replaces CSS variables with their values in place.

## 󠀁[Parameters](https://developer.wordpress.org/reference/classes/wp_theme_json/convert_variables_to_value/?output_format=md#parameters)󠁿

 `$styles`arrayrequired

CSS declarations to convert.

`$values`arrayrequired

key => value pairs to use for replacement.

## 󠀁[Return](https://developer.wordpress.org/reference/classes/wp_theme_json/convert_variables_to_value/?output_format=md#return)󠁿

 array

## 󠀁[Source](https://developer.wordpress.org/reference/classes/wp_theme_json/convert_variables_to_value/?output_format=md#source)󠁿

    ```php
    private static function convert_variables_to_value( $styles, $values ) {
    	foreach ( $styles as $key => $style ) {
    		if ( empty( $style ) ) {
    			continue;
    		}

    		if ( is_array( $style ) ) {
    			$styles[ $key ] = self::convert_variables_to_value( $style, $values );
    			continue;
    		}

    		if ( 0 <= strpos( $style, 'var(' ) ) {
    			// find all the variables in the string in the form of var(--variable-name, fallback), with fallback in the second capture group.

    			$has_matches = preg_match_all( '/var\(([^),]+)?,?\s?(\S+)?\)/', $style, $var_parts );

    			if ( $has_matches ) {
    				$resolved_style = $styles[ $key ];
    				foreach ( $var_parts[1] as $index => $var_part ) {
    					$key_in_values   = 'var(' . $var_part . ')';
    					$rule_to_replace = $var_parts[0][ $index ]; // the css rule to replace e.g. var(--wp--preset--color--vivid-green-cyan).
    					$fallback        = $var_parts[2][ $index ]; // the fallback value.
    					$resolved_style  = str_replace(
    						array(
    							$rule_to_replace,
    							$fallback,
    						),
    						array(
    							isset( $values[ $key_in_values ] ) ? $values[ $key_in_values ] : $rule_to_replace,
    							isset( $values[ $fallback ] ) ? $values[ $fallback ] : $fallback,
    						),
    						$resolved_style
    					);
    				}
    				$styles[ $key ] = $resolved_style;
    			}
    		}
    	}

    	return $styles;
    }
    ```

[View all references](https://developer.wordpress.org/reference/files/wp-includes/class-wp-theme-json.php/)
[View on Trac](https://core.trac.wordpress.org/browser/tags/6.9.4/src/wp-includes/class-wp-theme-json.php#L4507)
[View on GitHub](https://github.com/WordPress/wordpress-develop/blob/6.9.4/src/wp-includes/class-wp-theme-json.php#L4507-L4547)

## 󠀁[Related](https://developer.wordpress.org/reference/classes/wp_theme_json/convert_variables_to_value/?output_format=md#related)󠁿

| Uses | Description | 
| [WP_Theme_JSON::convert_variables_to_value()](https://developer.wordpress.org/reference/classes/wp_theme_json/convert_variables_to_value/)`wp-includes/class-wp-theme-json.php` |

Replaces CSS variables with their values in place.

  |

| Used by | Description | 
| [WP_Theme_JSON::convert_variables_to_value()](https://developer.wordpress.org/reference/classes/wp_theme_json/convert_variables_to_value/)`wp-includes/class-wp-theme-json.php` |

Replaces CSS variables with their values in place.

  | 
| [WP_Theme_JSON::resolve_variables()](https://developer.wordpress.org/reference/classes/wp_theme_json/resolve_variables/)`wp-includes/class-wp-theme-json.php` |

Resolves the values of CSS variables in the given styles.

  |

## 󠀁[Changelog](https://developer.wordpress.org/reference/classes/wp_theme_json/convert_variables_to_value/?output_format=md#changelog)󠁿

| Version | Description | 
| [6.5.0](https://developer.wordpress.org/reference/since/6.5.0/) | Check for empty style before processing its value. | 
| [6.3.0](https://developer.wordpress.org/reference/since/6.3.0/) | Introduced. |

## User Contributed Notes

You must [log in](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fdeveloper.wordpress.org%2Freference%2Fclasses%2Fwp_theme_json%2Fconvert_variables_to_value%2F)
before being able to contribute a note or feedback.