How to force wp_enqueue_style to display CSS at the very bottom of the head tag to override all CSS rules?

Question

I am currently studying on how to create Wordpress administration templates via plug-ins, and according to the Wordpress Wiki you can use hooks such as admin_head, wp_admin_css, and/or login_head to manually echo your link html tag:

echo "<link rel="stylesheet" type="text/css" href="' . get_option('siteurl') . '/wp-content/plugins/blue-steel/login.css" />'."\n";

The example obviously is A Bad Thing because of the way the link tag is hardcoded inside php logic.

The ideal is to use wp_enqueue_style() to insert CSS. However, it has it's own idea of WHEN the CSS is inserted, and only reacts to the hooks it likes. For example, wp_enqueue style doesn't respond well inside admin_head. So far I can only use it inside wp_print_styles and init, but then again you can't really display the CSS after all the default CSS has loaded:

<link rel='stylesheet' href='http://localhost/wordpress/wp-admin/load-styles.php?c=0&amp;dir=ltr&amp;load=plugin-install,global,wp-admin&amp;ver=9e478aac7934ae559830ecb557b6511d' type='text/css' media='all' />
<link rel='stylesheet' id='pinq-admin-css'  href='http://localhost/wordpress/wp-content/themes/ardee/css/pinq-admin.css?ver=3.0.1' type='text/css' media='all' />
<link rel='stylesheet' id='thickbox-css'  href='http://localhost/wordpress/wp-includes/js/thickbox/thickbox.css?ver=20090514' type='text/css' media='all' />
<link rel='stylesheet' id='colors-css'  href='http://localhost/wordpress/wp-admin/css/colors-fresh.css?ver=20100610' type='text/css' media='all' />

I just want pinq-admin-css to display at the rock-bottom of the head tag (preferably just before the closing head) so that it can override all Wordpress-related CSS that has been loaded.

Any thoughts on this?

Answer 1

Hey. There's an argument called $deps for wp_enqueue_style, you should give it a try. You might be able to mention that your stylesheet depends on all the rest, thus putting it below the others. Other than that, you can also go ahead with !important. More info on dependencies: http://codex.wordpress.org/Function_Reference/wp_enqueue_style

Answer 2

I know this is ancient, but here's some actual code, cut and pasted from my site. This is in the functions.php file of my child theme:

 add_action('init', 'add_custom_styles', 99);
 function add_custom_styles() {
     wp_enqueue_style(
         'custom-styles',
         get_stylesheet_directory_uri() .'/custom.css',
         array('storefront-style', 'wc-bundle-style','storefront-child-style')
    );
 }

The 'custom-styles' is simply a file titled "custom.css" in the child theme directory which contains all my custom styles I want to be loaded last.

In addition, to find the handles of the stylesheets that you want to be above your custom.css stylesheet, use the technique outlined here:

http://crunchify.com/how-to-print-all-loaded-java-scripts-and-css-stylesheets-handle-for-your-wordpress-blog/