How do I load custom scripts and styles for a page?

Question

Different pages often need different set of scripts and styles for them.

I use functions.php and construction like this to load scripts and styles:

function load_assets() {
   wp_enqueue_style( 'styles', get_template_directory_uri() . '/css/styles.css');
   wp_enqueue_script('main-js', get_template_directory_uri() . '/js/main.js');
}
add_action( 'wp_enqueue_scripts', 'load_assets' );

I know I can put some condition here like this:

is_page()

but is there a better way?

Suggestion:

Can wp_register_script() be used to target specific pages?

Answer 1

Yes, you may add conditional tags to the wp_enqueue_scripts action. See the examples below:

function load_assets() {
   wp_enqueue_style( 'styles', get_template_directory_uri() . '/css/styles.css');

   // loads on any 'page' post type
   if( is_page() ){
       wp_enqueue_script('main-js', get_template_directory_uri() . '/js/main.js');
   }

   // only loads on the page with a slug of 'home'
   if( is_page('home') ){
       wp_enqueue_script('home-js', get_template_directory_uri() . '/js/home.js');
   }


}
add_action( 'wp_enqueue_scripts', 'load_assets' );

For other examples of is_page() usage, see the codex page: https://codex.wordpress.org/Function_Reference/is_page

Answer 2

For admin you can do in this way.

function load_assets( $hook ) {

    global $post;

    if ( $hook == 'post-new.php' || $hook == 'post.php' ) {
        // enqueue here
    }
}
add_action( 'admin_enqueue_scripts', 'load_assets', 10, 1 );