4

I'd like to modify the properties of a registered style(or script - same applies) before it's been loaded.

Right now i'm trying to modify a registered style just before it gets enqueued, so i can point it at another file(ie. change the src property, maybe others to). Looking for some ideas specifically about where to hook on and modify the $wp_styles object so that the enqueue fire as normal, but with my changes to the registered style's properties.

I'm making an admin color scheme and thought it would be awesome if i could rewrite/tweak the existing enqueue, instead of adding an additional request to every page(ie. colors-fresh.css + my stylesheet - i'd rather have one request, why include the original stylesheet only to redefine every style in another)...

Unregister the style and register my own? - I'd then have to unregister both color schemes(classic/fresh) when i'd prefer to simply hook on and tweak the styles object before the enqueue fires.

I'm pretty sure it's possible, but simply lacking the brain power to wrap my head around it right now.. (been wired in too long)..

Any suggestions welcome.... ;)

2 Answers 2

7

Modify a registered style's path

I wanted to tweak the path to one of the WordPress admin stylesheets so i could keep requests down, and because it makes little sense to include two stylesheets, when the one i'm calling redefines all the styling in the stylesheet enqueued by WordPress.

The idea is basically to re-point the existing style at a different stylesheet, two hooks are appropriate

  • style_loader_src
  • style_loader_tag.

The former provides just the stylesheet URL(or path) and the handle(that's the name the style is registered with), the latter provides the complete HTML string(and handle) for the stylesheet being included.

I decided to use style_loader_src to switch the colors stylesheet path(src) because that's literally all i need, to adjust the path and know the current handle, so suits my needs perfectly.

Example filter that changes the path to the colors stylesheet.

Checks if the handle is the colors stylesheet, and updates the path when it is.

function switch_stylesheet_src( $src, $handle ) {
    if( 'colors' == $handle )
        $src = plugins_url( 'my-colors.css', __FILE__ );
    return $src;
}
add_filter( 'style_loader_src', 'switch_stylesheet_src', 10, 2 );

The above filter will basically take the existing colors stylesheet output, eg.

<link rel='stylesheet' id='colors-css' href='http://example.com/wp-admin/css/colors-fresh.css?ver=20100610' type='text/css' media='all' />

And convert it to..

<link rel='stylesheet' id='colors-css' href='http://example.com/wp-content/plugins/my-plugin/my-colors.css' type='text/css' media='all' />

I find this method preferable to enqueuing an additional stylesheet, it's one less requests, and there's far less CSS overrides required in whatever styling you're doing, because you're essentially hijacking that request to load your own stylesheet instead.

3
  • I'd been using this technique for swapping out my own login stylesheet.... and it quit working (On 3.3 I believe). Any idea what would have changed to make this no longer work for login? Thanks! Jan 24, 2012 at 16:15
  • The login page pulls most styling from the wp-admin stylesheet as of 3.3. In short, there is no longer a login enqueue. Compare link and link.... notice the absence the of the login style in the latter..
    – t31os
    Jan 28, 2012 at 12:32
  • Ah... that explains that, thanks! Back to just inserting css into the head... cuz I really wouldn't want to override the whole admin sheet for a pretty login page Jan 28, 2012 at 16:11
2

You can use the filter wp_admin_css_uri in the function of the same name which returns the uri of the admin css files. E.g.:

function custom_modify_styles( $_file, $file ) {
    if( 'style' == $file ) // $file = css filename without extension
        $_file = 'my/new/path/to/style.css';
    return $_file;
}
add_action( 'wp_admin_css_uri', 'custom_modify_styles', 10, 2 );
3
  • 1
    Thanks mate, going to give this a shot now, i'll report back shortly.
    – t31os
    Dec 5, 2010 at 9:36
  • 1
    This does look appropriate, but i'm not seeing any changes to the admin CSS enqueues.. i've even tried modifying the admin css functions directly(temporarily for testing) and i'm still not seeing changes, which leads me to suspect the function is firing an enqueue instead of printing the CSS links where the provided filter gets called(see the comments above the wp_admin_css function in general-template.php). I have a fresh head this morning though, so i'll keep digging and testing..
    – t31os
    Dec 5, 2010 at 10:01
  • 1
    To clarify above, wp_admin_css was hitting the conditional statement if ( $wp_styles->query( $handle ) ) { on line 2111, and then executing the enqueue on line 2115, so it never reached the filter below(wp_admin_css, which calls the filter in your answer), because there's a return statement inside that condition. In short, the filter suggested isn't getting fired. I've found something i think is suitable though, so i'll wrap that into an answer shortly.. thanks for the suggestion though..
    – t31os
    Dec 5, 2010 at 10:14

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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