Sharon on the Net

WordPress block themes have come a long way in just a short amount of time. It’s made for much easier in-site editing without need for programming. However, in some instances information might be needed for more advanced coding. Here’s a quick way to get info from your theme.json file.

A new function introduced in version 5.9.0 is wp_get_global_settings. This will pull the complete set of information from not only your user data and the core, but also your current theme.

Running this function (I added this to the functions.php file of the Twenty Twenty-Four theme) and returning it as an array will give you quite a large chunk of content:

function test_wp_head() {
	$settings = wp_get_global_settings();
	echo '<pre>' . print_r( $settings, true ) . '</pre>';
}
add_action( 'wp_head', 'test_wp_head' );

Here’s a snippet of the top of the results of that call:

Array
(
    [appearanceTools] => 
    [useRootPaddingAwareAlignments] => 1
    [border] => Array
        (
            [color] => 1
            [radius] => 1
            [style] => 1
            [width] => 1
        )

    [color] => Array
        (
            [background] => 1
            [button] => 1
            [caption] => 1
            [custom] => 1
            [customDuotone] => 1
            [customGradient] => 1
            [defaultDuotone] => 
            [defaultGradients] => 
            [defaultPalette] => 
            [duotone] => Array
                (
                    [default] => Array
                        (
                            [0] => Array
                                (
                                    [name] => Dark grayscale
                                    [colors] => Array
                                        (
                                            [0] => #000000
                                            [1] => #7f7f7f
                                        )

                                    [slug] => dark-grayscale
                                )

For almost every section under this array, there will be a “default” and “theme” option. This is helpful if you’d like to get WordPress’s default values, or if you want to pull specific information from the current theme’s theme.json file. In this instance, let’s say I want to pull just the theme’s colors and nothing else. Here’s how I would change that function from before:

function test_wp_head() {
	$settings = wp_get_global_settings( array( 'color' ) );
	$color = $settings['palette']['theme'];
	echo '<pre>' . print_r( $color, true ) . '</pre>';
}
add_action( 'wp_head', 'test_wp_head' );

With this change, my results are filtered down to just the colors from the theme.json file:

Array
(
    [0] => Array
        (
            [color] => #f9f9f9
            [name] => Base
            [slug] => base
        )

    [1] => Array
        (
            [color] => #ffffff
            [name] => Base / Two
            [slug] => base-2
        )

    [2] => Array
        (
            [color] => #111111
            [name] => Contrast
            [slug] => contrast
        )

    [3] => Array
        (
            [color] => #636363
            [name] => Contrast / Two
            [slug] => contrast-2
        )

    [4] => Array
        (
            [color] => #A4A4A4
            [name] => Contrast / Three
            [slug] => contrast-3
        )

    [5] => Array
        (
            [color] => #cfcabe
            [name] => Accent
            [slug] => accent
        )

    [6] => Array
        (
            [color] => #c2a990
            [name] => Accent / Two
            [slug] => accent-2
        )

    [7] => Array
        (
            [color] => #d8613c
            [name] => Accent / Three
            [slug] => accent-3
        )

    [8] => Array
        (
            [color] => #b1c5a4
            [name] => Accent / Four
            [slug] => accent-4
        )

    [9] => Array
        (
            [color] => #b5bdbc
            [name] => Accent / Five
            [slug] => accent-5
        )

)

Now, I can pull one particular color and use it in my code writing as needed:

function test_wp_head() {
	$settings = wp_get_global_settings( array( 'color' ) );
	$color = $settings['palette']['theme'];
	echo '<pre>' . print_r( $color[0], true ) . '</pre>';
}
add_action( 'wp_head', 'test_wp_head' );

Results:

Array
(
    [color] => #f9f9f9
    [name] => Base
    [slug] => base
)

And, here’s one final example on how to pull just the hex code:

function test_wp_head() {
	$settings = wp_get_global_settings( array( 'color' ) );
	$color = $settings['palette']['theme'][0]['color'];
	echo '<pre>' . print_r( $color, true) . '</pre>';
}
add_action( 'wp_head', 'test_wp_head' );

Results:

#f9f9f9