In my theme I have the following code in my functions.php to enqueue my my stylesheets.

function mytheme_styles() {
    wp_register_style('headerMobile', get_template_directory_uri() . '/assets/css/header-mobile.css' );
    wp_register_style('headerGeneral', get_template_directory_uri() . '/assets/css/header-general.css' );
    wp_register_style('headerDesktop', get_template_directory_uri() . '/assets/css/header-desktop.css' );
    wp_register_style('fonts', get_template_directory_uri() . '/assets/css/fonts.css' );
    wp_register_script('headerMobileEngine', get_template_directory_uri() . '/assets/js/header.js', array ( 'jquery' ), 1.1, true);

    wp_enqueue_style( 'style', get_stylesheet_uri() );
    wp_enqueue_style( 'fonts' );
    wp_enqueue_style( 'headerGeneral' );
    wp_enqueue_style( 'headerMobile' ); 
    wp_enqueue_style( 'headerDesktop' );    
    wp_enqueue_script( 'headerMobileEngine' );
}

add_action( 'wp_enqueue_scripts', 'mytheme_styles' );

Users should have the ability to change the layout of the desktop header; the default one or the mobile version (slightly adapted for desktop). I therefore have created a copy of the css for my mobile which I want to register as headerMobileLarge.

In the customizer, I created a radio button, 'layout_header_desktop', which can be regular or fullscreen.

Now I want to load headerDesktop when it is set to regular or headerMobileLarge when it is set to fullscreen. I figured out I could do this with an if/else statement in combination with get_theme_mod(), but I do not get it to work. Please show me how I should rewrite the mytheme_styles() to do this! Thank you!

In my theme I have the following code in my functions.php to enqueue my my stylesheets.

function mytheme_styles() {
    wp_register_style('headerMobile', get_template_directory_uri() . '/assets/css/header-mobile.css' );
    wp_register_style('headerGeneral', get_template_directory_uri() . '/assets/css/header-general.css' );
    wp_register_style('headerDesktop', get_template_directory_uri() . '/assets/css/header-desktop.css' );
    wp_register_style('fonts', get_template_directory_uri() . '/assets/css/fonts.css' );
    wp_register_script('headerMobileEngine', get_template_directory_uri() . '/assets/js/header.js', array ( 'jquery' ), 1.1, true);

    wp_enqueue_style( 'style', get_stylesheet_uri() );
    wp_enqueue_style( 'fonts' );
    wp_enqueue_style( 'headerGeneral' );
    wp_enqueue_style( 'headerMobile' ); 
    wp_enqueue_style( 'headerDesktop' );    
    wp_enqueue_script( 'headerMobileEngine' );
}

add_action( 'wp_enqueue_scripts', 'mytheme_styles' );

Users should have the ability to change the layout of the desktop header; the default one or the mobile version (slightly adapted for desktop). I therefore have created a copy of the css for my mobile which I want to register as headerMobileLarge.

In the customizer, I created a radio button, 'layout_header_desktop', which can be regular or fullscreen.

Now I want to load headerDesktop when it is set to regular or headerMobileLarge when it is set to fullscreen. I figured out I could do this with an if/else statement in combination with get_theme_mod(), but I do not get it to work. Please show me how I should rewrite the mytheme_styles() to do this! Thank you!

• php
• functions
• theme-customizer

Share Improve this question asked Jan 2, 2020 at 17:59 ralphjsmitralphjsmit 40266 silver badges2323 bronze badges 2

• Never heard of css media queries? – user3135691 Commented Jan 2, 2020 at 18:43
• Of course, but I do not know how I change (or remove) the min/max-width of a media query as the result of a customizer control, if it is just in a normal CSS file? – ralphjsmit Commented Jan 3, 2020 at 14:20

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 1

I think something like the following should work. Uncomment the var_dump to double check you're getting the saved theme mod value you're expecting. If not, check the naming of your customizer setting and that it saved properly.

function mytheme_styles() {

  $theme_dir_uri = get_template_directory_uri();

  // enqueue common styles and scripts
  // wp_enqueue_style( $handle, $src = false, $deps = array(), $ver = false, $media = 'all' );
  // wp_enqueue_script( $handle, $src = false, $deps = array(), $ver = false, $in_footer = false );

  $header_layout_style = get_theme_mod( 
    'layout_header_desktop', // name of your theme mod
    'regular' // default value, if no saved mod
  );

  // var_dump($header_layout_style);

  if ( 'fullscreen' === $header_layout_style ) {
    // enqueue relevant styles and scripts
    // wp_enqueue_style( 'headerMobileLarge', $theme_dir_uri  . '/assets/css/header-mobile-large.css' );
  } else {
    // enqueue other styles and scripts
    // wp_enqueue_style( 'headerDesktop', $theme_dir_uri  . '/assets/css/header-desktop.css' );
  }

}