How to load different css file for different pages

You can achieve this using conditionals inside the function enqueuing your styles.

function wpdocs_theme_name_scripts() {
    wp_enqueue_style( 'global', get_stylesheet_uri() );

    if ( is_page(5) ) {
      wp_enqueue_style( 'page-five', get_stylesheet_uri() . '/page-five-styles.css' );
    }
}
add_action( 'wp_enqueue_scripts', 'wpdocs_theme_name_scripts' );

If you wanted more control over both the markup of your page and the CSS files you load, you could use WordPress’ template hierarchy and create a page template or something more specific like page-5.php. Calling wp_enqueue_scripts from within these template files only loads the assets for those pages.

Leave a Comment