Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

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

share|improve this question
add comment

3 Answers

up vote 2 down vote accepted

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.

share|improve this answer
    
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 Feb 25 '11 at 21:15
1  
@Zack I vaguely remember there is $is_IE global var, never used that myself. See vars.php. –  Rarst Feb 25 '11 at 21:21
add comment

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

share|improve this answer
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 Feb 25 '11 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 Feb 25 '11 at 22:18
add comment

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

`

share|improve this answer
1  
Wow! Never knew this. For those who interested here is chunk of code that handles this in source. –  Rarst Feb 25 '11 at 21:45
    
+1. Great example of the kind of hidden API functions that make me keep loving WordPress! –  goldenapples Feb 25 '11 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 Feb 25 '11 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 Feb 25 '11 at 22:40
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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