wp_get_global_stylesheet() │ WP 5.9.0

Gets the ready CSS code from the merged data of theme.json, style variations, and custom user settings.

The function collects presets (palettes, scales, borders, etc.), variables, and other declarations from theme.json, takes into account custom modifications in the "Global Styles" panel, and then turns them into a CSS string.

The result is cached in object-cache (group theme_json) and is not cached when dev mode theme is enabled.

By default, global variables will be included via wp_enqueue_global_styles_css_custom_properties() on the hook:

// add wp_get_global_stylesheet( [ 'variables' ] )
add_action( 'enqueue_block_editor_assets', 'wp_enqueue_global_styles_css_custom_properties' );

Use wp_clean_theme_json_cache() to clear the cache if you need to immediately get updated styles.

Uses: WP_Theme_JSON::get_stylesheet(), wp_theme_has_theme_json()

No Hooks.

Returns

String. CSS string of the global styles of the theme.

Usage

wp_get_global_stylesheet( $types );

$types(array)

An array of segments to include in the output. By passing the required segments, you can reduce the volume of styles if only part is needed.

Possible segments:

variables — only CSS variables (Custom Properties) for presets and custom values.
styles — only the content of the styles section in theme.json.
presets — only CSS classes for presets.
base-layout-styles — only base layout styles.
custom-css — only custom CSS.

If an empty array is specified (by default), the following segments will be obtained:

For themes without theme.json: variables, presets, base-layout-styles.
For themes with theme.json: variables, presets, styles.

Allowed values match the first argument of the method WP_Theme_JSON::get_stylesheet().

By default: []

Examples

#1 Demo

The result depends on the parameters of theme.json and style settings.

variables:

echo wp_get_global_stylesheet( [ 'variables' ] );

:root {
	--wp--preset--aspect-ratio--square: 1;
	--wp--preset--aspect-ratio--4-3: 4/3;
	--wp--preset--color--white: #ffffff;
	--wp--preset--color--light-green-cyan: #7bdcb5;
	--wp--preset--color--vivid-green-cyan: #00d084;
	--wp--preset--font-size--small: 13px;
	--wp--preset--font-size--medium: 20px;
	--wp--preset--spacing--20: 0.44rem;
	--wp--preset--spacing--30: 0.67rem;
	//...
}

presets:

echo wp_get_global_stylesheet( [ 'presets' ] );

.has-black-color {
	color: var(--wp--preset--color--black) !important;
}

.has-cyan-bluish-gray-color {
	color: var(--wp--preset--color--cyan-bluish-gray) !important;
}

//...

styles:

echo wp_get_global_stylesheet( [ 'styles' ] );

:root {
	--wp--style--global--content-size: var(--layout-content-width);
	--wp--style--global--wide-size: var(--layout-wide-content-width);
}

:where(body) {
	margin: 0;
}

:root :where(.is-layout-flex) {
	gap: var(--space-lg);
}

:root :where(.is-layout-grid) {
	gap: var(--space-lg);
}

.wp-site-blocks {
	padding-top: var(--wp--style--root--padding-top);
	padding-bottom: var(--wp--style--root--padding-bottom);
}

.is-layout-flow > .alignleft {
	float: left;
	margin-inline-start: 0;
	margin-inline-end: 2em;
}

.is-layout-flow > .alignright {
	float: right;
	margin-inline-start: 2em;
	margin-inline-end: 0;
}

.is-layout-flow > .aligncenter {
	margin-left: auto !important;
	margin-right: auto !important;
}

.is-layout-constrained > .alignleft {
	float: left;
	margin-inline-start: 0;
	margin-inline-end: 2em;
}

.is-layout-constrained > .alignright {
	float: right;
	margin-inline-start: 2em;
	margin-inline-end: 0;
}

.is-layout-constrained > .aligncenter {
	margin-left: auto !important;
	margin-right: auto !important;
}

.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
	max-width: var(--wp--style--global--content-size);
	margin-left: auto !important;
	margin-right: auto !important;
}

.is-layout-constrained > .alignwide {
	max-width: var(--wp--style--global--wide-size);
}

body .is-layout-flex {
	display: flex;
}

.is-layout-flex {
	flex-wrap: wrap;
	align-items: center;
}

.is-layout-flex > :is(*, div) {
	margin: 0;
}

body .is-layout-grid {
	display: grid;
}

.is-layout-grid > :is(*, div) {
	margin: 0;
}

body {
	background-color: var(--color-surface-primary);
	color: var(--color-content-primary);
	font-family: var(--font-family-basic);
	font-size: var(--font-size-lg);
	font-weight: 400;
	letter-spacing: var(--letter-spacing-normal);
	line-height: var(--line-height-normal);
	--wp--style--root--padding-top: 0px;
	--wp--style--root--padding-right: var(--space-2xl);
	--wp--style--root--padding-bottom: 0px;
	--wp--style--root--padding-left: var(--space-2xl);
}

a:where(:not(.wp-element-button)) {
	color: currentColor;
	text-decoration: underline;
}

:root :where(a:where(:not(.wp-element-button)):hover) {
	text-decoration: none;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-family-headers);
	font-weight: 500;
	letter-spacing: var(--letter-spacing-normal);
	line-height: var(--line-height-tight);
}

h1 {
	font-size: var(--font-size-7xl);
}

:root :where(.wp-element-button, .wp-block-button__link) {
	background-color: #32373c;
	border-width: 0;
	color: #fff;
	font-family: inherit;
	font-size: inherit;
	line-height: inherit;
	padding: calc(0.667em + 2px) calc(1.333em + 2px);
	text-decoration: none;
}

// ...

Changelog

Since 5.9.0	Introduced.
Since 6.1.0	Added `'base-layout-styles'` support.
Since 6.6.0	Resolves relative paths in theme.json styles to theme absolute paths.
Since 7.0.0	Deprecated `'base-layout-styles'` type; classic themes now receive full styles with layout-specific alignment rules skipped via `base_layout_styles` option.

`wp_get_global_stylesheet() wp get global stylesheet` code ^{WP 7.1}

wp-includes/global-styles-and-settings.php

function wp_get_global_stylesheet( $types = array() ) {
	/*
	 * Ignore cache when the development mode is set to 'theme', so it doesn't interfere with the theme
	 * developer's workflow.
	 */
	$can_use_cached = empty( $types ) && ! wp_is_development_mode( 'theme' );

	/*
	 * By using the 'theme_json' group, this data is marked to be non-persistent across requests.
	 * @see `wp_cache_add_non_persistent_groups()`.
	 *
	 * The rationale for this is to make sure derived data from theme.json
	 * is always fresh from the potential modifications done via hooks
	 * that can use dynamic data (modify the stylesheet depending on some option,
	 * settings depending on user permissions, etc.).
	 * See some of the existing hooks to modify theme.json behavior:
	 * @see https://make.wordpress.org/core/2022/10/10/filters-for-theme-json-data/
	 *
	 * A different alternative considered was to invalidate the cache upon certain
	 * events such as options add/update/delete, user meta, etc.
	 * It was judged not enough, hence this approach.
	 * @see https://github.com/WordPress/gutenberg/pull/45372
	 */
	$cache_group = 'theme_json';
	$cache_key   = 'wp_get_global_stylesheet';
	if ( $can_use_cached ) {
		$cached = wp_cache_get( $cache_key, $cache_group );
		if ( $cached ) {
			return $cached;
		}
	}

	$tree = WP_Theme_JSON_Resolver::resolve_theme_file_uris( WP_Theme_JSON_Resolver::get_merged_data() );

	if ( empty( $types ) ) {
		$types = array( 'variables', 'styles', 'presets' );
	}

	/*
	 * Enable base layout styles only mode for classic themes without theme.json.
	 * This skips alignment styles that target .wp-site-blocks which is only used by block themes.
	 */
	$options = array();
	if ( ! wp_is_block_theme() && ! wp_theme_has_theme_json() ) {
		$options['base_layout_styles'] = true;
	}

	/*
	 * If variables are part of the stylesheet, then add them.
	 * This is so themes without a theme.json still work as before 5.9:
	 * they can override the default presets.
	 * See https://core.trac.wordpress.org/ticket/54782
	 */
	$styles_variables = '';
	if ( in_array( 'variables', $types, true ) ) {
		/*
		 * Only use the default, theme, and custom origins. Why?
		 * Because styles for `blocks` origin are added at a later phase
		 * (i.e. in the render cycle). Here, only the ones in use are rendered.
		 * @see wp_add_global_styles_for_blocks
		 */
		$origins          = array( 'default', 'theme', 'custom' );
		$styles_variables = $tree->get_stylesheet( array( 'variables' ), $origins, $options );
		$types            = array_diff( $types, array( 'variables' ) );
	}

	/*
	 * For the remaining types (presets, styles), we do consider origins:
	 *
	 * - themes without theme.json: only the classes for the presets defined by core
	 * - themes with theme.json: the presets and styles classes, both from core and the theme
	 */
	$styles_rest = '';
	if ( ! empty( $types ) ) {
		/*
		 * Only use the default, theme, and custom origins. Why?
		 * Because styles for `blocks` origin are added at a later phase
		 * (i.e. in the render cycle). Here, only the ones in use are rendered.
		 * @see wp_add_global_styles_for_blocks
		 */
		$origins     = array( 'default', 'theme', 'custom' );
		$styles_rest = $tree->get_stylesheet( $types, $origins, $options );
	}

	$stylesheet = $styles_variables . $styles_rest;
	if ( $can_use_cached ) {
		wp_cache_set( $cache_key, $stylesheet, $cache_group );
	}

	return $stylesheet;
}

wp_get_global_stylesheet() │ WP 5.9.0

Returns

Usage

Examples

#1 Demo

Changelog

wp_get_global_stylesheet() wp get global stylesheet code WP 7.1

Related Functions

Gutenberg (blocks editor)

Block Editor (Gutenberg)

`wp_get_global_stylesheet() wp get global stylesheet` code ^{WP 7.1}