How to apply a different stylesheet to each WordPress page?

Question

I'm new to web development and have been developing my first WordPress site using just HTML & CSS (+ a tiny bit of Javascript). My site has a different CSS stylesheet for every HTML page, but I cannot seem to correctly link more than one sheet into my WordPress site. I have a folder within my local wp theme location dedicated just to the CSS files, each labelled pagename_style.css.

I'm fairly certain that it's something I'm missing in my functions.php, and am guessing I have to use conditionals for each site page but I am having a lot of trouble figuring out what that looks like. I've scoured the internet for similar situations and have weirdly found nothing (maybe because the answer is something obvious I'm missing).

And on a less relevant note, my Google fonts are being totally ignored, when they worked fine linked into my html before. Any ideas, maybe it's my syntax?

Below is what I have tried, if that is any help. Thanks a lot in advance t-t

function my_setup() {
    wp_enqueue_style('google-fonts', 'https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;300&family=Press+Start+2P&family=Roboto:ital,wght@0,100;0,300;0,400;1,100;1,300;1,400&display=swap');
   
    wp_enqueue_style('home', get_template_directory_uri() . '/css/home_style.css', microtime());

    wp_enqueue_style('about', get_template_directory_uri() . '/css/about_style.css', microtime());

    wp_enqueue_style('diary', get_template_directory_uri() . '/css/diary_style.css', microtime());

    wp_enqueue_style('post', get_template_directory_uri() . '/css/post_style.css', microtime());

    wp_enqueue_style('work', get_template_directory_uri() . '/css/work_style.css', microtime());

    wp_enqueue_style('web-dev', get_template_directory_uri() . '/css/web-dev_style.css', microtime());

    wp_enqueue_style('storyteller', get_template_directory_uri() . '/css/storyteller_style.css', microtime());

    wp_enqueue_style('fashion', get_template_directory_uri() . '/css/fashion_style.css', microtime());

    wp_enqueue_style('contact', get_template_directory_uri() . '/css/contact_style.css', microtime());

    if(is_page('home')) {
        wp_enqueue_style('home');
    }
    
    if(is_page('about')) {
        wp_enqueue_style('/css/about_style.css');
    }
}

add_action('wp_enqueue_scripts', 'my_setup');

Answer 1

Thank you to those who answered! I actually found a far simpler solution, which is to include the respective CSS file in each individual PHP page. I discovered so indirectly from another SO post. In the future I'll be sticking to one css file as much as possible, that's for sure. Below is an example of what I did, in case it helps someone else out there:

<style>
<?php include 'CSS/single_style.css'; ?>
</style>
//where single_style is the file name

Answer 2

Take a look at the documentation for wp_enqueue_style(). You've got microtime() in the $dependency argument. That means that they won't be loaded because no style with the handle 1234567891011 (or whatever the current time is) is being loaded, because, well, it doesn't exist.

If I were you, I'd re-evaluate needing a fully separate CSS file for each page. But with that being said, I think you're also complicating things a bit. You can use wp_register_style() to get the files ready, and then enqueue them on the appropriate page, but wp_enqueue_style actually registers and enqueues them. So in your example, if they were loading, they'd ALL be loading.

Since you have a convenient naming convention of post_name = post_name_style.css, I think you'd be better served by looking at the current page name and loading that CSS file.

Also of note, don't use microtime() as the version, as it will prevent any and all caching. Your best bet is to use filemtime() and get_stylesheet_directory() to get the last time the file was modified as a version. That means it will refresh every time you change it, but stay cached until then (based on your server/browser settings, of course)

Lastly, there's a difference between get_template_[…] and get_stylesheet_[…] functions. Generally, it's preferable to use get_stylesheet_[…] in a theme because it's referencing the currently active theme, while get_template_[…] will reference the parent theme if there is one (this could also be a part of your issue depending on what your structure looks like)

(Re: Google, it should be working? Maybe try changing the handle)

Again, I'd re-evaluate the need for individual CSS files, but alas, given your current code, doing something like the following would probably be the easiest/most maintainable as long as you keep the post_name = post_name_style.css structure:

function my_setup() {
    wp_enqueue_style('google-fonts-notosanjp-press-start-2p-roboto', 'https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;300&family=Press+Start+2P&family=Roboto:ital,wght@0,100;0,300;0,400;1,100;1,300;1,400&display=swap');
    
    $slug = get_post_field( 'post_name', get_the_ID() ); // 'home', 'about', 'web-dev', etc.
    if( file_exists( get_stylesheet_directory()."/css/{$slug}_style.css" ) ){
        wp_enqueue_style( $slug, get_stylesheet_directory_uri()."/css/{$slug}_style.css", [], filemtime( get_stylesheet_directory()."/css/{$slug}_style.css" ) );
    }
}
add_action('wp_enqueue_scripts', 'my_setup'); 

Answer 3

If you wp_enqueue_style(), like you do at beginning, style is already loaded globally on every page. If you want to do some condition to certain page, you start well. If you want to find our more about it, read officially article from WP and their famous codex website.

function my_setup() {
    wp_enqueue_style('google-fonts', 'https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;300&family=Press+Start+2P&family=Roboto:ital,wght@0,100;0,300;0,400;1,100;1,300;1,400&display=swap');
  

    if(is_page('home')) {
    wp_enqueue_style('home', get_template_directory_uri() . '/css/home_style.css');
    }
    
    if(is_page('about')) {
    wp_enqueue_style('about', get_template_directory_uri() . '/css/about_style.css');
    }
    // etc

}

add_action('wp_enqueue_scripts', 'my_setup');