In: , ,
On: 2008 / 03 / 14 Viewed: 76073 times
Shorter URL for this post: http://ozh.in/h6

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:

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

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:

  1. <?php
  2. /*
  3. Plugin Name: Admin Custom CSS: Brazil!
  4. Plugin URI: http://planetozh.com/blog/
  5. Description: Plugin example: add a per-user custom CSS to the admin area
  6. Author: Ozh
  7. Version: 0.1
  8. Author URI: http://planetozh.com/
  9. */
  10.  
  11. add_action('admin_init','custom_admin_css_brazil');
  12.  
  13. function custom_admin_css_brazil() {
  14.     $plugin_url = get_option( 'siteurl' ) . '/wp-content/plugins/' . plugin_basename(dirname(__FILE__)) ;
  15.     wp_admin_css_color(
  16.         'brazil',
  17.         __('Brazil'),
  18.         $plugin_url . '/wp-admin-brazil.css',
  19.         array(
  20.             '#3c940c',
  21.             '#fffc01',
  22.             '#3005eb',
  23.         )
  24.     );
  25. }
  26. ?>

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 :)

Shorter URL

Want to share or tweet this post? Please use this short URL: http://ozh.in/h6

Metastuff

This entry "Per User Custom Stylesheet in WordPress 2.5" was posted on 14/03/2008 at 1:37 pm and is tagged with , ,
Watch this discussion : Comments RSS 2.0.

40 Blablas

  1. 1
    johnbillion United Kingdom »
    wrote, on 15/Mar/08 at 4:32 am # :

    Thanks for the great little write-up Ozh.

  2. 2
    Giovanni Brazil »
    wrote, on 17/Mar/08 at 3:17 am # :

    why choose brazil ?
    cool article.

    I'm finishing a css brazilian style color scheme to wordpress 2.5

    Now I'll do via plugin.
    Thanks :)

  3. 3
    Casey United States »
    replied, on 17/Mar/08 at 5:15 pm # :

    Excellent post. I tried to submit this to digg, but I keep getting the following error on Digg: "This link does not appear to be a working link. Please check the URL and try again."

    Just thought you'd want to know that your site can't be submitted to digg for some reason…

  4. 4
    Andrew United Kingdom »
    wrote, on 18/Mar/08 at 9:42 am # :

    Excellent. You have saved me the trouble of digging through the code to find out how to do this myself. Kudos.

  5. 5
    Angelfire Colombia »
    wrote, on 19/Mar/08 at 12:31 am # :

    Great feature, but is better if the user can choose their combination from a menu, Most users do not know much programming, then they should not make a good customization.

  6. 6
    shadaik Sweden »
    replied, on 19/Mar/08 at 1:16 pm # :

    Alternately, just tell us what CSS file is responsible and everyone can change it. No need to overblow the system with plugins if you can easily hardcode a different scheme.

  7. 7
    shadaik Sweden »
    wrote, on 19/Mar/08 at 1:20 pm # :

    PS: Something is either wrong with the plugin that adds those little flags in your blog or my internet provider. I'm definately not in the country to which that flag belongs (Sweden? Norway?).

  8. 8
    hemostick France »
    thought, on 19/Mar/08 at 2:30 pm # :

    You should track how many people try to click the radio buttons in the preview images, then publish the stats later on ;)

  9. 9
    Michel Bulgaria »
    thought, on 19/Mar/08 at 3:37 pm # :

    You should track how many people try to click the radio buttons in the preview images, then publish the stats later on ;)

    I did try to click the buttons, LOL :-D

  10. 10
    tench Germany »
    thought, on 19/Mar/08 at 5:38 pm # :

    is there a way to remove classic and fresh once we provide our own (using your plugin) ?

  11. 11
    tench Germany »
    thought, on 19/Mar/08 at 5:49 pm # :

    actually, if i may answer my own question, since it turned out to be pretty easy — if you want to disable the default color schemes, add the following as the first two lines of your function custom_admin_css_brazil:

    1. global $_wp_admin_css_colors;
    2.     $_wp_admin_css_colors = array();

    that should override what are the default colors — that way you can create several color schemes and offer them to your users but without the default ones… just in case somebody is interested.

  12. 12
    kontan United States »
    said, on 23/Mar/08 at 5:22 am # :

    Awesome! Played with and came up with something equally as hideous as the Brazil scheme, but it worked! Now to make it look nice. Thanks!

  13. 13
    Ozh France »
    commented, on 23/Mar/08 at 9:17 pm # :

    shadaik » modify a core CSS file is stupid: on next WP upgrade it gets over written and your changes are lost. Plugins are the *only* intelligent way to extend/modify WordPress.

  14. 14
    giovanealex Brazil »
    thought, on 29/Mar/08 at 4:34 pm # :

    There is still one colour on Brazilian flag which was not considered: white! I'm sure it would solve a good amount of the ugliness of the stylesheet used as an example ;)

  15. 15
    Ozh France »
    replied, on 29/Mar/08 at 5:18 pm # :

    giovanealex » I warned about ugliness :)

  16. 16
    Chip Bennett United States »
    replied, on 30/Mar/08 at 2:06 pm # :

    Is this new function documented anywhere? I'm trying to understand the relationship between the color declarations in the CSS file, and the color declarations in the array. Thus far, I'm not having much luck. Basically:

    1) To what do the color declarations in the array correspond?
    2) How many declarations can be made in the array?
    3) What needs to be included in the CSS file, and how does the CSS file use the array?

    I've looked in the CODEX, and on Google, but can't find anything documented yet.

    Thanks in advance!

  17. 17
    Ozh France »
    replied, on 30/Mar/08 at 2:45 pm # :

    Chip Bennett » Well I think this is precisely the purpose of this article… Did you read it ?
    The array just defines the colors of the cells drawn on the Profile page, it's not related with the CSS file itself. You can have as much items as you want in the array. And the CSS file can include, obviously, whatever you want.

  18. 18
    Chip Bennett United States »
    commented, on 30/Mar/08 at 2:58 pm # :

    Ozh,

    I apologize if my questions were unclear. Basically, I attempted to take your "quick and dirty" plugin example, and modify it – but was getting myself confused.

    I think, maybe, I just got it:

    1) The color declarations in the array actually don't correspond to anything at all, except for the table of colors in the user profile options. The wp_admin_css_color function and array are not related to the actual CSS. This array is simply used as a visual "palette" to describe the custom color scheme.

    2) Since the array stands alone, as many declarations as desired can be made in it.

    3) The changes to the admin interface are all in the CSS file. This CSS file does not use the array in any way.

    So, I guess a better question to ask would be: are the color/class declarations documented well anywhere, in order for us to know what to modify to create our custom color themes?

  19. 19
    Ozh France »
    commented, on 30/Mar/08 at 3:10 pm # :

    Chip Bennett » The CSS structure & page layout of the admin interface is not documented. Use Firefox, install Firebug, hover some elements to get their id and class names and test and trial and test again :)

  20. 20
    Chip Bennett United States »
    replied, on 30/Mar/08 at 6:56 pm # :

    Ozh,

    Would there be some benefit in documenting the Admin UI CSS? If so, then perhaps this would be a way I could contribute. I don't want to "re-invent the wheel", but if no one has documented it yet, I will take a crack at it.

    (Actually, I made a start, as I had done my own admin-style plugin, based on Nate's Admin CSS plugin for WP 2.3.x.)

    I would be happy to do the "back-end" (so to speak) documentation (i.e. adding comments to a CSS file), but more useful, I think, would be taking that CSS file and implementing a user-friendly front-end (e.g. plugin option page) for creating custom color themes. Unfortunately, I would have no idea where to start on how to do so.

    Can you point me toward any resources? Basically, I would need to know:

    1) How to create a plugin options page
    2) How to use a field input from such page, to modify a CSS declaration

    If I could learn how to do those two, then I may just be able to take a crack at my first plugin…

  21. 21
    WordPress 2.5 ????????????? - WordPress?... United States »
    pingback on 14/Apr/08 at 1:59 am # :

    [...] ????WordPress 2.5 ????????????????????????????????????????????????????????????????????????? WordPress ??????????????????????????????? Fluency???????????????????????????? [...]

  22. 22
    Donncha O Caoimh Ireland »
    commented, on 15/Apr/08 at 4:28 pm # :

    You know what would be really sick? A random colour generator. It could even change the colour on every page load! :)

  23. 23
    Ozh France »
    wrote, on 15/Apr/08 at 7:52 pm # :

    Donncha O Caoimh » Heh, actually Donncha I'm close to doing this, and guess what, it won't even be ugly. Details some day :)

  24. 24
    Random WordPress 2.5 How-To’s :: W... United States »
    pingback on 16/Apr/08 at 2:07 am # :

    [...] How-to add Per User Custom Stylesheet in WordPress 2.5 by Ozh. [...]

  25. 25
    UtahLuxury.com United States »
    said, on 16/Apr/08 at 5:33 pm # :

    I think it would be cool to have something that pulled data from Adobe Kuler. That way people could just switch styles from there.

  26. 26
    WordPress 2.5 Is Finally Available | Lim... United States »
    pingback on 19/Apr/08 at 2:07 pm # :

    [...] many users, not me though. Not to worry, the old color scheme is an alternative or if you want to set your own colors, Planetozh has a guide as to how you can do just that via a [...]

  27. 27
    Baltic Amber Colour Scheme, controla los... United States »
    pingback on 20/Apr/08 at 11:26 pm # :

    [...] fue uno de los primeros cambios de lo que me enteré se venian con wordpress gracias a Ozh, se trata del Admin Color Scheme, por defecto wordpress sólo cuenta con 2 [...]

  28. 28
    Dalton United States »
    thought, on 29/Apr/08 at 8:04 pm # :

    Hey, I did one! It's a super-minimal monochrome version. Thanks for the tip.

  29. 29
    Blog | ?????? ????? ? ?????-?????? ? WP ... Russia »
    pingback on 01/May/08 at 5:51 pm # :

    [...] ????? ?????? ????????? ?? ??? ???? ???? ? ???, ??? ????????? ????? ?????????? ?????? ? ????. ?? ?????? ?????????? ???????? ??????? wp_admin_css_color();. ????? ????????? ????? ?????????? ??????, ? ????? ? ? ??????? ???????. ? ??????? ???????????? ?????????? ????? ???????? ?????. ????? ?????? ? ?????? Per User Custom Stylesheet in WordPress 2.5 [...]

  30. 30
    oyun oyna Turkey »
    said, on 03/May/08 at 9:57 am # :

    the good code, love Wp :)

  31. 31
    Give your Admin Area Some Colorful Love ... United States »
    pingback on 13/May/08 at 12:15 am # :

    [...] months ago, I wrote an article about per-user admin color schemes that WordPress 2.5 brought in its bag of new features. A few days laters, I received an email from [...]

  32. 32
    WordPress Wednesday News: WordCamps Ever... United States »
    pingback on 23/May/08 at 2:07 pm # :

    [...] Per User Custom Stylesheet in WordPress 2.5 [...]

  33. 33
    Plugin: Baltic Amber Admin Panel Themes ... Portugal »
    pingback on 29/Jun/08 at 3:15 pm # :

    [...] queres saber como editar ou criar as tuas próprias cores aconselho-te a ler este tutorial em inglês mas que é bastante [...]

  34. 34
    Geekeries.fr - Actualités High-Tech | M... Germany »
    pingback on 10/Jul/08 at 3:43 pm # :

    [...] qui est très peut, mais Ozh a réaliser discrètement un petit script vous permettant de modifier les couleurs par défaut. Cela se fait via un fichier CSS modifiable, [...]

  35. 35
    10 Things You Need to Know About WordPre... United States »
    pingback on 26/Jul/08 at 10:45 pm # :

    [...] Ozh describes how to create your own wp-admin stylesheet. //OBSTART:do_NOT_remove_this_comment var [...]

  36. 36
    Oyun indir Turkey »
    said, on 30/Jul/08 at 12:29 pm # :

    wooow nice post. I tried to submit this to digg, but I keep getting the following error on Digg: "This link does not appear to be a working link. Please check the URL and try again." :/

  37. 37
    Hikaye Turkey »
    commented, on 26/Sep/08 at 3:09 pm # :

    wooow nice post. I tried to submit this to digg, but I keep getting the following error on Digg: "This link does not appear to be a working link. Please check the URL and try again."

    Thanks you

  38. 38
    watch sell ??Administrator China »
    said, on 04/Oct/08 at 2:48 pm # :

    Replica watches,Siwss watches,Japan watches,Rolex watches,Omega,Gucci,Louis Vuitton,watches,Breitling,Vacheron Constantin,Chanel,Cartier,Bvlgari,Jacob & Co,Chopard,D&G watches Alain Silberstein,A Lange & Sohne,Porsche Design Watches,Mont Blanc,Patek Philippe,TAG Heuer,Jaeger,LeCoultre,pretty watches,high quality watches,fake watches
    http://onestoptown.com

  39. 39
    5 excellent wordpress admin themes for W... United States »
    pingback on 03/Feb/09 at 6:46 pm # :

    [...] you can create your OWN wordpress admin color scheme by reading the explanations and sample code of planetozh. online [...]

  40. 40
    Wordpress 2.5 permite personalização d... Portugal »
    pingback on 25/Jul/09 at 2:11 pm # :

    [...] e como criar um plugin que permite adicionar novas cores criando esquemas originais podem consultar esta página. Share this on del.icio.usShare this on RedditBuzz up!Stumble upon something good? Share it on [...]

Leave a Reply

Comment Guidelines or Die

  • HTML: You can use these tags: <a href=""> <em> <i> <b> <strong> <blockquote>
  • Posting code: Post raw code (no <> &lt; etc) within appropriate tags : [php][/php], [css][/css], [html][/html], [js][/js], [sql][/sql], [xml][/xml], or generic [code][code]
  • Gravatars: Curious about the little images next to each commenter's name ? Go to Gravatar.
  • Spam: Various spam plugins on patrol. I'll put pins in a Voodoo doll if you spam me.
  • I will mark as Spam test comments, all comments with SEO names (ie "My Cool Online Shop" instead of "Joe") or containing forum-like signatures.

Read more ?