2

I have added a new area in the Customizer section which allows a user to choose whichever theme colors they want:

New customizer area

But I don't know how to activate/add CSS files according to the selection.

i.e. add green.css if green theme color is selected

or add blue.css if blue theme color is selected.

  • Look at the code of a theme that already does that. Maybe one of the wp default themes. – anmari Aug 1 '18 at 2:51
  • You want to enqueue different css file based on this value? Or add some inline css? – Krzysiek Dróżdż Aug 1 '18 at 5:28
0

You can access Customizer values with get_theme_mod(), so you just need to check the value of your setting before enqueueing stylesheets the normal way:

function wpse_310123_enqueue_scheme_css() {
    $scheme = get_theme_mod( 'theme_scheme' );

    if ( $scheme === 'green' ) {
        wp_enqueue_style( 'theme-green', get_theme_file_uri( 'green.css' ) );
    } elseif ( $scheme === 'blue') {
        wp_enqueue_style( 'theme-blue', get_theme_file_uri( 'blue.css' ) );
    }
}
add_action( 'wp_enqueue_scripts', 'wpse_310123_enqueue_scheme_css' );

Note that the above code assumes:

  • The name of your Customizer setting is theme_scheme. If it's not, change that to whatever your actual setting is.
  • The possible values are green or blue. If they're something else, like green-theme, then make sure to change those.
  • Your blue.css and green.css files are in the root folder of your theme. If they're not, add the directories to the file name, eg. get_theme_file_uri( 'assets/css/green.css' ).
| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.