Themergency fooplugins.com

WordPress Admin Color Scheme Generator

| 3 Comments

This is day 23 of my WordPress Developer Advent Calendar. Lately, there has been a lot of buzz around WordPress admin color schemes. Sarah published a post on the Tavern which gives you a few options:

  • Admin Color Schemes - add 8 new color schemes to your admin.
  • HS Custom Admin Theme - a plugin to create your own custom color schemes. - seems to have been pulled from the repo!
  • Create a Custom WordPress Admin Color Scheme - a post by my friend Matt who walks you through creating your own color scheme.

So this got me thinking… wouldn’t it be cool if you could enter a few colors into a generator and it spits out a stand-alone WordPress plugin which contains the custom color scheme? Nothing more, nothing less. If you are a freelancer, this would be really cool, cause you can generate a personalized color scheme plugin for an individual customer. Well, I built it! And it’s a WordPress plugin too. So this plugin generates other plugins.

Admin Color Scheme Generator Plugin

The plugin can display the generator form in the admin, under the Tools menu: Admin Color Scheme Generator Or you can use it on the front-end. To use it on the front-end, you will need to include some code in your page template:

do_action('admin_color_scheme_generator_print_form');

I have installed it on my blog and you can test it out right here, right now! The code for the plugin is on Github, so take a look and contribute if you feel like it.

Under the Hood

I borrowed some ideas from the Admin Color Schemes plugin, in the way that is uses SASS to easily create a color scheme stylesheet from literally 5 lines of SASS code:

$base-color: #0c4da1;
$highlight-color: #ed5793;
$notification-color: #43db2a;
$action-color: #eb853b;
@import "wordpress-admin-color-scheme-generator/--/wordpress-admin-color-scheme-generator/--/admin.css";

I found a cool PHP SASS compiler, called phpscss, which I use to generate the actual stylesheet in the zip. Just include the scss.inc.php file and the rest is easy:

require_once 'includes/phpscss/scss.inc.php';		
$scss = new scssc();
$css = $scss->compile( $scss_code );

I also borrowed a lot from the underscores.me generator code, but more about that in my next post.

3 comments
  Livefyre
  • Get Livefyre
  • FAQ
twimagic
twimagic

http://PaletteGenerator.com/ is another very nice online tool

CRMWebDesign
CRMWebDesign

Seems to have been pulled from the repository. 

themergency
themergency moderator

@CRMWebDesign  yes, the HS Custom Admin Theme plugin seems to have been pulled from the repo. Not sure why.