{"id":760,"date":"2008-03-14T13:37:25","date_gmt":"2008-03-14T11:37:25","guid":{"rendered":"http:\/\/planetozh.com\/blog\/2008\/03\/per-user-custom-stylesheet-in-wordpress-25\/"},"modified":"2008-03-14T00:44:22","modified_gmt":"2008-03-13T22:44:22","slug":"per-user-custom-stylesheet-in-wordpress-25","status":"publish","type":"post","link":"https:\/\/planetozh.com\/blog\/2008\/03\/per-user-custom-stylesheet-in-wordpress-25\/","title":{"rendered":"Per User Custom Stylesheet in WordPress 2.5"},"content":{"rendered":"

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.<\/p>\n

Admin Color Scheme<\/p>\n

Concept<\/h2>\n

The new function behind this feature is wp_admin_css_color(), which is used as following:<\/p>\n

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

    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.<\/p>\n

    Example<\/h2>\n

    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:<\/p>\n

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

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

      Braziiiil<\/p>\n

      Note the cool CSS little trick in the options form :)<\/p>\n","protected":false},"excerpt":{"rendered":"

      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 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[21],"tags":[55,85,245],"class_list":["post-760","post","type-post","status-publish","format-standard","hentry","category-published","tag-css","tag-plugins","tag-wordpress"],"_links":{"self":[{"href":"https:\/\/planetozh.com\/blog\/wp-json\/wp\/v2\/posts\/760","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/planetozh.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/planetozh.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/planetozh.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/planetozh.com\/blog\/wp-json\/wp\/v2\/comments?post=760"}],"version-history":[{"count":0,"href":"https:\/\/planetozh.com\/blog\/wp-json\/wp\/v2\/posts\/760\/revisions"}],"wp:attachment":[{"href":"https:\/\/planetozh.com\/blog\/wp-json\/wp\/v2\/media?parent=760"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/planetozh.com\/blog\/wp-json\/wp\/v2\/categories?post=760"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/planetozh.com\/blog\/wp-json\/wp\/v2\/tags?post=760"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}