How to load different css file for different pages

IT Nursery

May 13, 2022

I have several different pages. Every one of them has different css links. Rather than the css links all items are same in the head element of those pages.
I need to shift those head element to header.php so that I can include head using get_header().

So How can I load different css file for different pages? I have around 20 different pages, so load file after condition check is bit messy to me.
Is there any better approach to do than this?
If possible suggest me to solve this problem using custom plugin?

page 1:

<html lang="en">
<head>
     <link rel="stylesheet" href="https://wordpress.stackexchange.com/questions/290455/css/one.css" />
     .......
 </head>

page 2:

<html lang="en">
<head>
     <link rel="stylesheet" href="https://wordpress.stackexchange.com/questions/290455/css/two.css" />
     .......
 </head>

3 Answers
3

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.

3 Answers 3

Leave a Reply Cancel reply

3 Answers
3