Over at Wanderoak, we build component based websites (which means the Gutenberg transition is comparatively easier for us!). There’s often a need for sections of a website to change colours based on a selection by the client. I’ve gone through a couple different ways to handle this:
- Spitting out the hexcode of a colour as part of inline styling using PHP.
- Creating colour specific classes for each section of the website that needs colour variations.
Neither solution was very good. The colour specific classes were sometimes annoying to create, especially if I really only needed to change a background colour or a text colour.
Then I found myself working on a project with a LOT of components – and most of them have different colour variations that only needed one or two lines of CSS.
When I looked at how to make this situation easier to deal with, I realized I already had half a solution and I just needed to write two more functions to make this easier for this project and all future projects!
There’s two parts to this solution, one in SASS and one in PHP.
The SASS Side
Something I already do in all my projects, is handle all my colours using a SASS array. I adopted the method of identifying colours by their importance in branding, so my colour array in SASS looks like this:
$colours: (
primary: #41d5c2,
secondary: #61516b,
highlighter: #ff9676,
detail: #3f3f3f,
light: #eae9e8,
darklight: #b5c2ca,
bg: #f7f5f2,
);
I have a SASS function that allows me to call specific colours in my CSS:
@function colour($key) {
@if map-has-key($colours, $key) {
@return map-get($colours, $key);
}
@warn "Unknown `#{$key}` in $colors.";
@return null;
}
So to call a colour, I simply write:
colour(primary)
When the SASS is compiled into CSS, that phrase will be replaced by the hexcode associated with the word ‘primary’. This also makes it easier to jump between projects for me. The most important colour of the brand is usually associated with the word ‘primary’. The text colour is usually associated with the word ‘detail’, etc.
This already exists in every project I develop. The new addition I made was a function that loops through all the colours and creates classes like so:
@each $colour in $colours {
.colour-#{nth($colour, 1)} {
color: nth($colour, 2);
&:visited {
color: nth($colour, 2);
}
}
}
This function takes each colour in the array of $colours, and creates a class with its name and the font colour:
.colour-primary {
color: #41d5c2;
&:visited {
color: #41d5c2;
}
}
This is the code I needed for the project, but it can be modified based whatever you might need.
So now we’ve got classes using each colour being created auto-magically, within each project.
The PHP Side
On the PHP side, I needed a function that would add the class when appropriate. Within WordPress, whenever there’s a colour option, the field returns the hexcode of the colour. So the function takes the hexcode, gets rid of the hashtag, and searches for that code within an array, and spits out colour-{name of colour} as a class:
function wo_colour_class($hexcode) {
$colours = array (
'primary' => '#41d5c2',
'secondary' => '#61516b',
'highlighter' => '#ff9676',
'detail' => '#3f3f3f',
'light' => '#eae9e8',
'darklight' => '#b5c2ca',
'bg' => '#f7f5f2',
);
$class = array_search($hexcode, $colours);
return 'colour-' . $class;
}
I just copied the colours array from SASS, changed some of the syntax to make it valid PHP, and voila!
Now whenever I need a colour-based class, I just have to do this:
// I store the colour value from WordPress in a variable $colour
class="<?php echo wo_colour_class($colour); ?>"This is a simple solution but versatile, and one I will permanently be adding to my starter theme, because it’s so handy!