1

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}" type="text/css" media="screen" />
    <!--[if IE]>
        <link rel="stylesheet" type="text/css" href="{$ie}" media="screen" />
    <![endif]-->
HEAD;

        echo $head; 

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

-Zack

Improve this question

3 Answers 3

Reset to default
2

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.

Improve this answer
2
  • Hmmm. wp_enqueue_style: can that be used to inject css based upon browser? Or would the general idea I have (only with plugins_url) be the best way to do that?
    – Zack
    Commented Feb 25, 2011 at 21:15
  • 1
    @Zack I vaguely remember there is $is_IE global var, never used that myself. See vars.php.
    – Rarst
    Commented Feb 25, 2011 at 21:21
6

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' );

`

Improve this answer
4
  • 1
    Wow! Never knew this. For those who interested here is chunk of code that handles this in source.
    – Rarst
    Commented Feb 25, 2011 at 21:45
  • +1. Great example of the kind of hidden API functions that make me keep loving WordPress!
    – goldenapples
    Commented Feb 25, 2011 at 22:17
  • I'm drawn to this snippet. I really like it. I'll look into it further after I've tested @mfields 's answer.
    – Zack
    Commented Feb 25, 2011 at 22:19
  • That is definitely neat! Have really had no need to dig into the Dependencies class before. @filosofo While I agree that this seems to be a more direct approach, I try to avoid touching global objects as much as possible in extensions and use hooks wherever possible.
    – mfields
    Commented Feb 25, 2011 at 22:40
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

Improve this answer
2
  • 1
    Nice snippet! But for admin it would probably be easier to (not) queue depending on global var for IE, since there is no static caching scenario to worry about.
    – Rarst
    Commented Feb 25, 2011 at 21:37
  • This looks like something I need, I'm playing with it right now and will come back to mark an answer as 'The Answer' ;)
    – Zack
    Commented Feb 25, 2011 at 22:18

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.