Conditional (Dynamic) CSS
  • Home
  • Conditional (Dynamic) CSS

How to load a different or additional style.css sheet based on conditions

Want to change the design of your page using If-So’s conditions? By replacing your style.css file or by loading an additional one, you can easily change the look of your website. Whether you are making small design changes, or entirely changing your page’s appearance, your options are limitless.

Want to see a live example?

Load this page again with a different style.

How do I load an additional stylesheet based on an If-So condition?

Step-by-step Guide:

  1. Create a new stylesheet and upload it to the root directory of your theme. (i.e “dynamic-style.css”).
  2. Create a new If-So trigger.
  3. In Version A, set a condition and then paste the name of your new style file. (i.e “dynamic-style.css”)
  4. Leave the Default Version blank.
  5. Open your functions.php file and paste the following code at the bottom of the file. Make sure to replace the trigger ID with your trigger ID (ifso id=”XXX”).
    wp_enqueue_style( 'ifso-custom-style', get_template_directory_uri() . '/' . do_shortcode('[ifso id="646"]') , array() );

That’s it! Every time the condition is met, the new stylesheet will be loaded.

How do I replace the original style.css if a condition is met?

  1. Duplicate the style.css file and name the duplication style2.css (make sure to place the file in the same directory as the original style.css file).
  2. Find the URL of your theme style.css file.
    • Open the site in your browser.
    • Click F12, “Network”, “CSS”, and refresh the page.
    • Find your theme style.ccs file (there might be several style.css files, so hover over each one to see its path and make sure you click on the one that belongs to your theme).
    • Click on it and copy the file URL.

  1. Create a new trigger
  2. Paste the URL you have copied in the default version content field.
  3. In Version A, set a condition, paste the URL of your style.css file, and change the name in the URL to style2.css
  4. Find the enqueue function that “calls” your style.css file. It should look something like this:  
 wp_enqueue_style( 'STYLESHEET URI', get_stylesheet_uri() );

* The value ”STYLESHEET URI” can be anything. It will be whatever the developer of your site named it.

Depending on your theme and how it is built, there are several places in which the enqueue function can be found. Usually, it will be in the function.php file which can be found in the main directory of the theme.

7. Once you find the enqueue function, simply replace the second parameter of the function, “get_stylesheet_uri()”, with the following:

do_shortcode('ifso id="XXX"]')

Make sure to replace the “XXX” with the ID of the trigger you created in the previous steps.

This is what the whole function should look like in the end:

wp_enqueue_style( 'YOUR-STYLE-SHEET-NAME', do_shortcode('[ifso id="XXX"]') );

That’s it! As they say, the devil is in the details, and with If-So, just like that you’ve created a slightly new, or even whole new look for your site.

Ready to get started?
Try it on your website