How to customize the colors within a stylesheet using a WordPress setting

So, we are building an internal WordPress theme for our company that will be used for a few dozen of our websites. The only thing that will differ between the sites is the color scheme.

We’re trying to figure out what the best way to handle the colors to still allow updates to all sites without having to individually upload files for each.

Child Theme

We discussed trying to use a child theme for each internal site, but when scaling or adding a new feature, we would have to individually add the color scheme styles to each child theme. So, this is not ideal.

Theme Customizer

WordPress has the built-in theme customizer API which looks promising, but I was wondering if someone could provide some insight as to how that actually works. If we have elements like links, buttons, titles, etc. with their site’s unique color scheme, does it have to render that CSS within blocks for each element, then?

Meaning are you just creating styles in theme files in this manner:

    .button {
        color: <?php echo setting value here! ?>

If that is the case, do you handle most of the styles (the ones that don’t require the custom variable) in an external stylesheet?

Color Options

A lot of WordPress themes just have a color settings page, which we could use as well, but I think that would be the same in terms of rendering the CSS within blocks.

Specific File

Is it a ridiculous option to create a PHP file with all of your styles in it, that essentially use variables from WordPress? Something along the lines of:

<?php $primary = get color from WordPress ?>

    .button {
        display: block;
        border-radius: 5px;
        color: $primary;

Any ideas on the best way to handle this with the above options or something I missed?

Read more here: How to customize the colors within a stylesheet using a WordPress setting

Leave a Reply

Your email address will not be published. Required fields are marked *