Multiple colourways in a single WordPress theme with SASS and CSS variables

We were recently asked to build a network of microsites to support a series of new conferences on a client’s WordPress/WooCommerce powered events site.

The site was already setup as a WordPress multisite network, with a parent theme providing the basic site design and customisations to WooCommerce to suit their requirements. As the new conferences will form part of a series, the look, feel and functionality will remain the same with just the branding (and of course content) being unique for each site.

Some unique functionality is needed for these conferences, which will be provided by a child theme. To avoid having to maintain multiple copies of this, we wanted to make sure a single theme could serve the entire group of microsites.

Branding such as the event name, logo and some other text fields are easily handled by theme options – but we wanted to provide a simple way for the client’s in-house developer to be able to manage the different colourways.

Substituting CSS variables with SASS variables

The parent and child themes on the site are both built using SASS, so colours across the sites can already be changed via SASS variables. Usually, these SASS variables would be set to the relevant colour directly – but by setting them to a CSS variable name we are able to set this colour outside the SASS (and it’s resulting compiled CSS) but still have it substituted in all the places the SASS variable is referenced.

The value of the CSS variables are set in a series of CSS classes, we then use PHP to apply the relevant body class to each page using WordPress’s body_class filter. In our case, this is driven by the site’s ID (“blog id”) – but a similar approach could be used to switch out colourways on different post types, taxonomies or even user preferences (it would be a nice way to implement dark-mode on an existing site).

Here’s a simplified example of the SASS that we used:

// Map our SASS variable values to CSS variable names.
$colour__primary: var(--colour-primary);
$colour__secondary: var(--colour-secondary);
$colour__neutral-dark: var(--colour-neutral-dark);
$colour__text-main: $colour__neutral-dark; // this works too.

// Default colourway for microsites.
body.colourway-default {
	--colour-primary: #1B2A62; // AAA against white.
	--colour-secondary: #DC1915; // AA against white.
	--colour-neutral-dark: #333333; // AAA against white.
}

// Colourway for siteb.
body.colourway-siteb {
	--colour-primary: #e00b5a; // AA against white.
	--colour-secondary: #DC1915; // AA against white.
	--colour-neutral-dark: #333333; // AAA against white.
}

And the PHP functionality to show how we map the class to the WordPress Blog ID to a class name and apply it to the body class on each page.

/**
 * Add a class to the body element to control which colourway is used.
 *
 * @param  array $classes The body classes.
 * @return array
 */
function microsites_body_classes( $classes ) {
	// Blog ID to colourway lookup.
	$colourway_lookup = [
		'3' => 'default',
		'4' => 'sitea',
	];

	if ( array_key_exists( get_current_blog_id(), $colourway_lookup ) ) {
		$classes[] = 'colourway-' . $colourway_lookup[ get_current_blog_id() ];
	} else {
		$classes[] = 'colourway-default';
	}

	return $classes;
}
add_filter( 'body_class', 'microsites_body_classes' );

Alongside our client-focused WordPress development services, we also offer support for in-house WordPress developers.