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.
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.
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
Thanks for the great little write-up Ozh.
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 :)
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…
Excellent. You have saved me the trouble of digging through the code to find out how to do this myself. Kudos.
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.
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.
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?).
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
is there a way to remove classic and fresh once we provide our own (using your plugin) ?
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:
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.
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!
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.
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 ;)
giovanealex » I warned about ugliness :)
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!
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.
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?
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 :)
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…
[…] ????WordPress 2.5 ????????????????????????????????????????????????????????????????????????? WordPress ??????????????????????????????? Fluency???????????????????????????? […]
You know what would be really sick? A random colour generator. It could even change the colour on every page load! :)
Donncha O Caoimh » Heh, actually Donncha I'm close to doing this, and guess what, it won't even be ugly. Details some day :)
[…] How-to add Per User Custom Stylesheet in WordPress 2.5 by Ozh. […]
I think it would be cool to have something that pulled data from Adobe Kuler. That way people could just switch styles from there.
[…] 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 […]
[…] 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 […]
Hey, I did one! It's a super-minimal monochrome version. Thanks for the tip.
[…] ????? ?????? ????????? ?? ??? ???? ???? ? ???, ??? ????????? ????? ?????????? ?????? ? ????. ?? ?????? ?????????? ???????? ??????? wp_admin_css_color();. ????? ????????? ????? ?????????? ??????, ? ????? ? ? ??????? ???????. ? ??????? ???????????? ?????????? ????? ???????? ?????. ????? ?????? ? ?????? Per User Custom Stylesheet in WordPress 2.5 […]
the good code, love Wp :)
[…] 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 […]
[…] Per User Custom Stylesheet in WordPress 2.5 […]
[…] queres saber como editar ou criar as tuas próprias cores aconselho-te a ler este tutorial em inglês mas que é bastante […]
[…] 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, […]
[…] Ozh describes how to create your own wp-admin stylesheet. //OBSTART:do_NOT_remove_this_comment var […]
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." :/
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
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
[…] you can create your OWN wordpress admin color scheme by reading the explanations and sample code of planetozh. online […]
[…] 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 […]