1

How could I add a style sheet at the bottom of the <head> tag, so if there´s a need to override some other styles added before, it will override.

I heard something about wp_enqueue_style, and it seems there´s a depth parameter. Is that what I need? To make my style sheet be the last one at the <head> tag?

If yes, what should I put in the parameter depth?

Thanks.

1
  • Have a look at the Codex page for wp_enqueue_style(). As @toscho mentions in his answer below, you can tell WordPress that your stylesheet depends on others, and have it after them.
    – Pat J
    May 14, 2013 at 19:48

2 Answers 2

2

You can add a priority number to the wp_enqueue_scripts action. So you could could give the action hooked to the enqueue of yourstyle sheet a priority of 999. Like so:

function high_priority_style() {
  Wp_enqueue_style('important', get_template_directory_uri() . '/css/important.css');
}
add_action('wp_enqueue_scripts', 'high_priority_style', '999');

A simpler way to do is enqueue all of your stylesheets, including style.css in the same function, hooked to wp_enqueue_scripts and they will be added in the order that they appear in the function, like this:

  function styles() {
  wp_enqueue_style('low-priority', get_template_directory_uri() . '/css/low-priority.css');
  wp_enqueue_style('theme', get_template_directory_uri() . '/style.css');
  wp_enqueue_style('important', get_template_directory_uri() . '/css/important.css');
}
add_action('wp_enqueue_scripts', 'styles');

I included a lower priority stylesheet in this example, that would be something like the CSS for a framework or grid system.

Make sure to remove any hard coded links to any stylesheets in header.php when adding styles this way (ie the right way.)

3
  • Should I put, the last code, on functions.php or in header.php? May 15, 2013 at 11:24
  • Is it a plugin? May 15, 2013 at 11:44
  • @MarceloNoronha in functions.php
    – JPollock
    May 16, 2013 at 20:16
3

From the source, reformatted for better readability:

function wp_enqueue_style( 
    $handle, // unique name 
    $src = false, // URL
    $deps = array(), // array of dependencies, other styleheets unique names.
    $ver = false, // version
    $media = 'all' // media
)

So, $deps is an array of unique stylesheet handles. If you list the stylesheets here you want to wait for, WordPress will create the proper order automatically for you.

Example:

$template_dir_uri = get_template_directory_uri();
wp_register_style( 'style_1', "$template_dir_uri/style1.css" );
wp_register_style( 'style_2', "$template_dir_uri/style2.css" );
wp_register_style( 'style_3', "$template_dir_uri/style3.css", array ( 'style_1', 'style_2' )  );
wp_register_style( 'style_4', "$template_dir_uri/style4.css", array ( 'style_3', 'default_theme_css_handle' ) );

wp_enqueue_style( 'style_4' );

Now the <link> elements for the stylesheets will be printed in the correct order 1, 2, 3, 4.

17
  • and name for other stylesheets must be handles not file names.
    – JMau
    May 14, 2013 at 19:49
  • @TweetPressFr There is no mention of a file name.
    – fuxia
    May 14, 2013 at 19:52
  • I did not say that for your answer, it's just that this error is pretty common.
    – JMau
    May 14, 2013 at 19:57
  • What would be the $handle // unique name of a style sheet with the file name "ie.css"? May 14, 2013 at 21:18
  • @MarceloNoronha $handle can be any string, it is not related to file names.
    – fuxia
    May 14, 2013 at 21:19

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.