I know what you’re thinking.
Isn’t there a color picker in WordPress already?
Yeah … 👌
Technically, the hue.js color picker works independently of WordPress, so it’s not a color picker for WordPress at all.
But to understand “why a color picker for WordPress”, we have to go a couple of steps back to where the idea originally stems from.
So, I did what any grown ass man does when he runs into a problem…
I jumped on Twitter 😂
Any framework/code recommendations for a plugin's settings page, with tabbed areas?
Not sure if there's some sort of standard but if there is, I haven't been able to find it yet.
— Robert DeVore (@deviorobert) March 16, 2018
Luckily for me, there’s a lot of dope developers in the WordPress community and I got recommendations to some nice solutions, but one stuck out in particular.
It wasn’t long until I was working with Ahmad on WPOSA and became the project lead for the release of version 2.0.
More info on v2.0 of WPOSA coming soon 👌
While working on the WP OOP Settings API I had to update the outdated color picker it was using and found Iris.
Iris was initially developed for Custom Colors on WordPress.com and eventually shipped with WordPress starting in version 3.5.
Iris is well built, and it comes prepackaged with WordPress, so there’s less work required for developers who need a color picker in their projects.
But it hasn’t been updated on Github in over 2 years, and there are a couple of nice PR’s just waiting there to be merged.
The way I see it is this:
I may be the only person who ever needs to use this specific color picker within a WordPress. context
I’m fine with that.
I’m also fine with that.
Regardless of what happens to this code within the next 6 days, 6 months or 6 years is irrelevant.
The code being available for the next person to download and enhance to their needs, whenever they may need it is what’s important to me.
That’s the beauty of Open Source.
I’m happy to play my part in it, no matter how big or small of an impact my contributions end up having.
Open source code is how I ended up turning an open source project into my full time business: WP Dispensary.
I plan to give back as much as I can, as long as I can, because without open source code, I wouldn’t be here.
I am grateful for WordPress and everyone who’s played their part in it being here this many years later.
You can download hue.js from the command line:
git clone https://github.com/deviodigital/hue.js
Want to download a zip file?
You can do that here.
Being able to use hue.js in your project is pretty simple.
First, you need to download the files (see above).
You then need to copy over the
hue.js file into your project and add it, like below.
Now, you can now initiate the hue color picker by attaching it to a specific class, for instance
That’s all there is to it. Now, anywhere the class is called (for instance, on a text input field), it will initiate the color picker.
Just a note to let you know bug reports & pull requests are always welcome 👍