{"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":"<p>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<p><img src='https:\/\/planetozh.com\/blog\/wp-content\/uploads\/2008\/03\/admin-color-scheme.jpg' alt='Admin Color Scheme' class=\"imgcenter\"\/><\/p>\n<h2>Concept<\/h2>\n<p>The new function behind this feature is wp_admin_css_color(), which is used as following:<\/p>\n<div class=\"igsh-code-box\" id=\"ig-sh-1\"><pre class=\"language-php line-numbers\" data-no-optimize=\"1\" data-cfasync=\"false\"><code class=\"language-php\">wp_admin_css_color(\r\n\t$shortname, \/\/ eg &#039;mycoolstyle&#039;, used to store setting in the wp_options table\r\n\t$longname, \/\/ eg &#039;My Cool Style&#039;\r\n\t$css_url, \/\/ URL to your custom stylesheet\r\n\tarray(\r\n\t\t$color_code_1, \/\/ a HTML color code like &#039;#123456&#039;\r\n\t\t$color_code_2, \/\/ or &#039;red&#039;\r\n\t\t$color_code_3, \/\/ or &#039;rgb(100,100,100)&#039;\r\n\t\t... \/\/ any number of color codes you want\r\n\t)\r\n);<\/code><\/pre><\/div>\n<p>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 &#39;admin_init&#39;, and you&#39;re done.<\/p>\n<h2>Example<\/h2>\n<p>Say you&#39;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<div class=\"igsh-code-box\" id=\"ig-sh-2\"><pre class=\"language-php line-numbers\" data-no-optimize=\"1\" data-cfasync=\"false\"><code class=\"language-php\">&lt;?php\r\n\/*\r\nPlugin Name: Admin Custom CSS: Brazil!\r\nPlugin URI: http:\/\/planetozh.com\/blog\/\r\nDescription: Plugin example: add a per-user custom CSS to the admin area\r\nAuthor: Ozh\r\nVersion: 0.1\r\nAuthor URI: http:\/\/planetozh.com\/\r\n*\/\r\n\r\nadd_action(&#039;admin_init&#039;,&#039;custom_admin_css_brazil&#039;);\r\n\r\nfunction custom_admin_css_brazil() {\r\n\t$plugin_url = get_option( &#039;siteurl&#039; ) . &#039;\/wp-content\/plugins\/&#039; . plugin_basename(dirname(__FILE__)) ;\r\n\twp_admin_css_color(\r\n\t\t&#039;brazil&#039;,\r\n\t\t__(&#039;Brazil&#039;),\r\n\t\t$plugin_url . &#039;\/wp-admin-brazil.css&#039;,\r\n\t\tarray(\r\n\t\t\t&#039;#3c940c&#039;,\r\n\t\t\t&#039;#fffc01&#039;,\r\n\t\t\t&#039;#3005eb&#039;,\r\n\t\t)\r\n\t);\r\n}\r\n?&gt;<\/code><\/pre><\/div>\n<p>Real example for the not-so-DIYers : I made this quick plugin and its <em>very<\/em> quick stylesheet (be warned, the visual result is rather ugly): <a href=\"https:\/\/planetozh.com\/blog\/wp-content\/uploads\/2008\/03\/admin_css_brazil.zip\" title=\"Plugin Example: Custom Admin CSS\">Plugin Example: Custom Admin CSS<\/a>.<\/p>\n<p><img src='https:\/\/planetozh.com\/blog\/wp-content\/uploads\/2008\/03\/admin-color-scheme-brazil.jpg' alt='Braziiiil' class=\"imgcenter\" \/><\/p>\n<p>Note the cool CSS little trick in the options form :)<\/p>\n","protected":false},"excerpt":{"rendered":"<p>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: This function call populates\u2026<\/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}]}}