0

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!

2
  • Never heard of css media queries? – user3135691 Jan 2 '20 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 Jan 3 '20 at 14:20
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' );
  }

}
1
  • This works great, thank you! – ralphjsmit Jan 3 '20 at 14:19

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.