Proper Way to Enqueue Styles and Scripts in a WordPress Theme

I’ve seen a lot of themes enqueuing style sheets and scripts incorrectly, either by calling them using the wp_print_styles or wp_head hooks, or just placing wp_enqueue_style() right in the header. The queue system works best when everything is queued at once, not periodically throughout the document. And calling with the wp_print_styles hook in version 3.3 can end up putting your styles on the admin page. So, do it correctly using the proper hook:

Proper Enqueue Hooks

• wp_enqueue_scripts is the hook you should be using for the front end.
• admin_enqueue_scripts is the hook you should be using for the admin pages.
• login_enqueue_scripts is the hook you should be using for the login page.

I know the hooks say scripts and not styles, but trust me, it’s what you’re supposed to use for both.

Example Code

function themeslug_enqueue_style() {
    wp_enqueue_style( 'core', 'style.css', false ); 
}

function themeslug_enqueue_script() {
    wp_enqueue_script( 'my-js', 'filename.js', false );
}

add_action( 'wp_enqueue_scripts', 'themeslug_enqueue_style', 10 );
add_action( 'wp_enqueue_scripts', 'themeslug_enqueue_script', 1 );

Sources

• make.wordpress.org – Use wp_enqueue_scripts, not wp_print_styles, to enqueue scripts and styles for the frontend
• stack exchange – Where is the right place to register/enqueue scripts & styles
• wpcandy – How to Load Scripts in WordPress