Best way to inject css into admin_head in plugins?

The question:

I’m looking for the best way to inject CSS into WordPress’ Admin CP.

Currently, I’m using the admin_head action hook and in this hook, I’m using dirname( __FILE__ ) to retrieve the directory for the stylesheets. However, dirname() does retrieve the server’s path. Is this the recommended way or is there some sort of WordPress function to get a URI path rather than a directory path?

    public function admin_head()
    {
        // Let's include the Control Panel CSS
        $url = dirname( __FILE__ ) . '/css/cpanel.css';
        $ie = dirname( __FILE__ ) . '/css/cpanel-ie.css';

        // Inject our cPanel styelsheet and add a conditionaly for Internet Explorer
        //      (fixes bugs on my home browser)
        $head = <<<HEAD
    <link rel="stylesheet" href="{$url}" rel="nofollow noreferrer noopener" type="text/css" media="screen" />
    <!--[if IE]>
        <link rel="stylesheet" type="text/css" href="{$ie}" rel="nofollow noreferrer noopener" media="screen" />
    <![endif]-->
HEAD;

        echo $head; 

        foreach( self::$classes as $class => $obj )
        {
            if ( method_exists( $obj, 'admin_head' ) )
            {
                $obj->admin_head();
            }
        }
    }

-Zack

The Solutions:

Below are the methods you can try. The first solution is probably the best. Try others if the first one doesn’t work. Senior developers aren’t just copying/pasting – they read the methods carefully & apply them wisely to each case.

Method 1

See plugins_url(). It’s perfect and engineered to link to files in plugin folders.

PS also wp_enqueue_style() might make sense in the mix.

Method 2

There’s another way to add conditional comments, using WP’s API:

wp_enqueue_style(
    'my-ie-style',
     get_template_directory_uri() . '/css/cpanel-ie.css'
);

global $wp_styles;
$wp_styles->add_data( 'my-ie-style', 'conditional', 'IE' );

`

Method 3

I originally didn’t think that this was possible, but then I did some digging and came up with the following solution which works for me on WordPress 3.1. The tricky part was getting the conditional tags for IE in there. There’s a filter for it!

<?php
/*
Plugin Name: My Plugin
*/
class My_Plugin {
    function My_Plugin() {
        add_action( 'wp_print_styles', array( &$this, 'css_public' ) );
        add_filter( 'style_loader_tag', array( &$this, 'ie_conditional_comments' ), 10, 2 );
    }
    function css_public() {
        wp_enqueue_style( 'my-plugin', plugins_url( '/my.css', __FILE__ ), array(), '1.0' );
        wp_enqueue_style( 'my-plugin-ie', plugins_url( '/my-ie.css', __FILE__ ), array( 'my-plugin' ), '1.0' );
    }
    function ie_conditional_comments( $tag, $handle ) {
        if ( 'my-plugin-ie' == $handle ) {
            $tag = '<!--[if IE]>' . $tag . '<![endif]-->';
        }
        return $tag;
    }
}
$my_plugin = new My_Plugin();

Best wishes,
-Mike


All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

Leave a Comment