WordPress: activate different stylesheets on different pages - css

Question

In order to link my stylesheets to my WordPress theme, I have the following inside my customtheme/style.css:
#import url('bootstrap/bootstrap.min.css');
#import url('includes/styles1.css');
#import url('includes/styles2.css');
Suppose I wanted to load styles1.css on only one page (let's say the home-page) and load styles2.css on all the other pages. Is there anyway to specify this?

Answer 1

wp_register_style and wp_enqueue_style
How it works:
wp_register_style allows you to register your own stylesheets and give them their own handles. What this enables you to do is define all of your styles and load them on an as-needed basis. In many cases, you will often see stylesheets registered early on in the theme's lifecycle, and then enqueued later based on some logic checks.
As an example:
Let's say you have some custom shortcode, but don't want to load any of its stylesheets unless the shortcode itself is actually used:
functions.php
add_action('wp_enqueue_scripts', 'custom_enqueue_scripts');
function custom_enqueue_scripts()
{
//Register the style
wp_register_style('my-shortcode-styles', get_template_directory_uri() . '/css/shortcode-styles.css');
}
add_action('init', 'custom_init');
function custom_init()
{
//Example shortcode
add_shortcode('my_shortcode', 'custom_shortcode');
}
function custom_shortcode($atts, $content = null)
{
//If registered style isn't loaded....
if (!wp_style_is('my-shortcode-styles')) {
//Enqueue it!
wp_enqueue_style('my-shortcode-styles');
}
return 'My Shortcode!';
}
In most cases though, wp_enqueue_style will be sufficient. Using this, you can register and enqueue your stylesheets all at once:
add_action('wp_enqueue_scripts', 'custom_enqueue_scripts');
function custom_enqueue_scripts()
{
//Register and enqueue the style
wp_enqueue_style('my-shortcode-styles', get_template_directory_uri() . '/css/shortcode-styles.css');
}
In your case, you can perform some quick logic checks to determine what page the user is visiting before loading the appropriate stylesheet:
add_action('wp_enqueue_scripts', 'custom_enqueue_scripts');
function custom_enqueue_scripts()
{
if(is_home()){ //is_front_page() if you're using a Page for the home page
//Load only on the home page
wp_enqueue_style('home-styles', get_template_directory_uri() . '/css/styles1.css');
}
//Load everywhere else
wp_enqueue_style('my-theme', get_template_directory_uri() . '/css/styles2.css');
}
Quick note: In order for stylesheet enqueues to work, your theme MUST use wp_head and wp_footer. If your active theme is missing these in its template files, then stylesheet enqueues will not work.
See also:
wp_register_script
wp_enqueue_script

Answer 2

Why do you want to load different stylesheets on different pages? Having minimal sheets would result to better score in https://tools.pingdom.com and/or https://developers.google.com/speed/pagespeed/insights/ and faster loading time. Just target specific class or id in one stylesheet for your different pages and you are golden.