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

1 Views

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.

Read More

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?

Post Views: 1

Related posts

Leave a Reply

2 comments

  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/