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

Question

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 <style> blocks for each element, then?

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

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

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 <style> 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 ?>

<style>
    .button {
        display: block;
        border-radius: 5px;
        color: $primary;
    }
</style>   

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

Answer 1

I would recommend a color option. Generally, a color option just loads a separate style sheet. E.g., loading the style-blue.css style sheet would include all those elements you wanted to be blue. (You would load this in addition to your main style sheet.) This is how many themes work, so this a proven approach. This also takes advantage of caching, which will speed things up and reduce server load.

However, if the amount of code required to make the changes is small (under 20 lines, say), I would just use the customizer's Custom CSS option.

Answer 2

You are developing N software products just use N code bases. It is a naive mistake to assume that localization (which is probably the proper term to describe what you need to do) will end up with just a color scheme difference. Use GIT or SVN, set a master branch for the theme (or child theme, but it probably just needless work) and branch the specific localizations out of it.

Storing options in the DB is bad for testing and bad when you need to track changes. If you truly think this is the way to go (having one core code with the only difference in configuration), just add a configuration file in a child theme and define the relevant values there. Keep the admin clean, don't add options that admins should not be able to change.