Enqueue stylesheets in WordPress the right way

Sometimes when theming out a wordpress site you will encounter situations where you are either forced to use the !important style declaration on an element to override a style that's being applied by a plugin. Using !important does work, however there is a better option, enqueuing your stylesheet in the footer. This ensures your styles are applied at a later point in the program execution and thus override plugin styles via the cascade instead on haphazardly using !important declarations all over the place. Let's take a look.

Here is the basic syntax:

<?php wp_enqueue_style( $handle, $src, $deps, $ver, $media ); ?>

Where:

  • $handle - The only required parameter. Name used as a handle for the stylesheet. As a special case, if the string contains a '?' character, the preceding part of the string refers to the registered handle, and the succeeding part is appended to the URL as a query string.
  • $src - URL of the stylesheet. Example: 'http://www.site.com/wp-content/themes/theme-name/css/style.css'. The stylesheet directory would be a good start... get_stylesheet_directory_uri()
  • $deps - An array of handles of any stylesheet that this stylesheet depends on; stylesheets that must be loaded before this stylesheet. false if there are no dependencies. You might need to use this if you are using LESS or SAS
  • $ver - String specifying the stylesheet version number, if it has one. This parameter is used to ensure that the correct version is sent to the client regardless of caching, and so should be included if a version number is available and makes sense for the stylesheet.
  • $media - String specifying the media for which this stylesheet has been defined. Examples: 'all', 'screen', 'handheld', 'print'. See this list for the full range of valid CSS-media-types.

Example usage:

wp_enqueue_style( 'my_styles', get_stylesheet_directory_uri() . '/css/debug.css', false, '0.0.2', all );

Here's a great reference - http://codex.wordpress.org/Function_Reference/wp_enqueue_style