Enqueuing style.css

For the longest time, themes would hardcode a link to style.css in the head section of the html document. This is no longer seen as a best practice. On WordPress.com we concatenate and minify all scripts and styles. For this to work correctly all scripts and styles must be enqueued. Here is an example of how to enqueue style.css; Please note that the first parameter is prefixed with unique identifier:

/**
 * Enqueue main stylesheet.
 */
function mytheme_style() {
	wp_enqueue_style( 'mytheme-style', get_bloginfo( 'stylesheet_url' ), array(), '20130211' );
}
add_action( 'wp_enqueue_scripts', 'mytheme_style' );

Using the Correct Protocol

It is important to ensure that the correct protocol is used in the event that you need to enqueue a 3rd party file. This commonly occurs when using a Google Web Font. Here’s an example of how to enqueue the Open Sans font using is_ssl() to determine the protocol:

/**
 * Enqueue the Open Sans font.
 */
function mytheme_fonts() {
	$protocol = is_ssl() ? 'https' : 'http';
	wp_enqueue_style( 'mytheme-opensans', "$protocol://fonts.googleapis.com/css?family=Open+Sans" );}
add_action( 'wp_enqueue_scripts', 'mytheme_fonts' );

Choosing the Correct Hook

Template Files

All scripts and styles intended to be used in template files must be enqueued during the wp_enqueue_scripts action. Conditional tags should be used in the event that a particular file is only need in one or two templates. For example, if we had a javascript file that is only needed in the single.php template, we could use code like this:

/**
 * Load custom script for single.php
 */
function mytheme_scripts() {
	if ( is_single()  )
		wp_enqueue_script( 'mytheme-single', get_template_directory_uri() . '/js/myscript.js', array(), '20130211' );
}
add_action( 'wp_enqueue_scripts', 'mytheme_scripts' );

Admin Screens

All scripts and styles intended to be used in wp-admin/ must be enqueued during admin_enqueue_scripts action. As mentioned in the Template Files section, it is important to only include scripts and styles that are needed for a particular screen. While there are not really conditional tags we can use in the admin section the admin_enqueue_scripts action does provide a parameter that we can use in our callback. Here’s an example of how to enqueue a font intended only to be used in the Appearance → Header screen:

/**
 * Enqueue font styles for Appearance -> Header.
 */
function mytheme_fonts_admin( $hook_suffix ) {
	if ( 'appearance_page_custom-header' != $hook_suffix )
		return;

	$protocol = is_ssl() ? 'https' : 'http';
	wp_enqueue_style( 'mytheme-opensans', "$protocol://fonts.googleapis.com/css?family=Open+Sans" );
}
add_action( 'admin_enqueue_scripts', 'mytheme_fonts_admin' );

Customizer

All scripts and styles intended to be used in wp-admin/ must be enqueued during the customize_preview_init action.

Third-party Scripts

Third-party scripts may be included in themes provided that they include the following information in a comment directly above the code:

  • The name of the script
  • Version Number
  • License
  • URL to a landing page or documentation.

Scripts may not be minified. This means that the full human-readable source of the script should be provided with the theme.