Per User Custom Stylesheet in WordPress 2.5

WordPress 2.5 introduces a neat option: per user Admin Color Scheme. This means that each user can select a stylesheet they like best for the whole admin area. Now onto the fun stuff: adding a per-user selectable custom stylesheet for your blog.

Admin Color Scheme

Concept

The new function behind this feature is wp_admin_css_color(), which is used as following:

wp_admin_css_color(
$shortname, // eg 'mycoolstyle', used to store setting in the wp_options table
$longname, // eg 'My Cool Style'
$css_url, // URL to your custom stylesheet
array(
$color_code_1, // a HTML color code like '#123456'
$color_code_2, // or 'red'
$color_code_3, // or 'rgb(100,100,100)'
... // any number of color codes you want
)
);

This function call populates an array ($_wp_admin_css_colors) which is then used on the profile page to display the cute colorful little table cells. In your plugins, hook the function call into 'admin_init', and you're done.

Example

Say you're a Brazil fan and you want to make a plugin that adds some sunshine into your admin area. You would create a custom stylesheet that would reside into your plugin directory, and the plugin itself would be something like:

<?php
/*
Plugin Name: Admin Custom CSS: Brazil!
Plugin URI: http://planetozh.com/blog/
Description: Plugin example: add a per-user custom CSS to the admin area
Author: Ozh
Version: 0.1
Author URI: http://planetozh.com/
*/
add_action('admin_init','custom_admin_css_brazil');
function custom_admin_css_brazil() {
$plugin_url = get_option( 'siteurl' ) . '/wp-content/plugins/' . plugin_basename(dirname(__FILE__)) ;
wp_admin_css_color(
'brazil',
__('Brazil'),
$plugin_url . '/wp-admin-brazil.css',
array(
'#3c940c',
'#fffc01',
'#3005eb',
)
);
}
?>

Real example for the not-so-DIYers : I made this quick plugin and its very quick stylesheet (be warned, the visual result is rather ugly): Plugin Example: Custom Admin CSS.

Braziiiil

Note the cool CSS little trick in the options form :)