Utilizing Wordpresses Admin Color Picker

  • joebert
  • Fart Bubbles
  • Genius
  • User avatar
  • Posts: 13502
  • Loc: Florida

Post 3+ Months Ago

When you create a new post in Wordpress there is a foreground font color picker. If you click "More Colors" it opens an advanced version of the color picker.

Is there an easy way to utilize that advanced color picker in a Wordpress plugin ?

I just want to have a link that opens the color picker, and have that color picker update a text area with the selected color.
I've looked through the source, but the way it's setup seems a little complicated for what I'm trying to do so I'm wondering if there's a simpler way.

I don't want to include other color picker code with my plugin, that would be dumb considering there's already an awesome one there.
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • graphixboy
  • Control + Z
  • Mastermind
  • User avatar
  • Posts: 1828
  • Loc: In the Great White North

Post 3+ Months Ago

I'm not sure how available that colorpicker is since its part of the editor (I'm not positive but I think thats a third party addition to WP). As far as I can tell the other plugins containing a color picker seem to use their own so you might be out of luck.
  • joebert
  • Fart Bubbles
  • Genius
  • User avatar
  • Posts: 13502
  • Loc: Florida

Post 3+ Months Ago

Yeah I've started digging into it more and it appears to use Tinymce as the main editor and jQuery to spice it up a bit.

I've gotten to the point of finding an iframe with a structure for the color picker in the source, but it appears to be dependent on having tinymce setup as a rich editor in the parent frame.

It's probably possible to setup a dummy editor and forward what goes to it in able to utilize the picker, but it's starting to look like it's more trouble than it's worth.
  • joebert
  • Fart Bubbles
  • Genius
  • User avatar
  • Posts: 13502
  • Loc: Florida

Post 3+ Months Ago

I ended up stumbling across some color picker code when looking for something else. There's a color picker included that can be used in plugins.

It's not pretty, but it's simple to setup (provided you don't have to reverse engineer it after finding it...) and it works.

To load the library and things it depends on, you use this right around where you're admin_menu and contextual_help actions are added.

PHP Code: [ Select ]
wp_enqueue_script('colorpicker');


You don't need much JS after that.
First there's defining an override for the function built-in to the library for assigning the color. Not required, but it lets you do things like displaying a color swatch along with updating the form field if you define it.
JAVASCRIPT Code: [ Select ]
window.pickColor = function(a)
{
   ColorPicker_targetInput.value = a;
   jQuery('#' + myObj.swatch).css('background-color', a);
}
  1. window.pickColor = function(a)
  2. {
  3.    ColorPicker_targetInput.value = a;
  4.    jQuery('#' + myObj.swatch).css('background-color', a);
  5. }


After that there's the setup for the picker
JAVASCRIPT Code: [ Select ]
myObj = new Object();
myObj.cp = new ColorPicker();
myObj.cp.writeDiv();
  1. myObj = new Object();
  2. myObj.cp = new ColorPicker();
  3. myObj.cp.writeDiv();



Then there's the matter of a function for what you click on to call. In this example "t" is the ID/NAME of the form field that the color should be returned to. "p" is the ID of the element that the color picker should be displayed under.
NOTE: The library seems to use the Prototype version of $()
JAVASCRIPT Code: [ Select ]
myObj.ColorPicker = function(t, p)
{
   myObj.swatch = p;
   myObj.cp.select($(t), myObj.swatch);
   return true;
}
  1. myObj.ColorPicker = function(t, p)
  2. {
  3.    myObj.swatch = p;
  4.    myObj.cp.select($(t), myObj.swatch);
  5.    return true;
  6. }


In any event, I'm tempted to just write my own little color picker. Though I don't have to include much code for this one, really all I need to do is pretty up the "#colorPickerDiv" div it displays in a little.
  • joebert
  • Fart Bubbles
  • Genius
  • User avatar
  • Posts: 13502
  • Loc: Florida

Post 3+ Months Ago

Bah. Doesn't work properly in Firefox.
  • suzie
  • Guru
  • Guru
  • User avatar
  • Posts: 1134
  • Loc: England

Post 3+ Months Ago

I love Nattyware,

http://www.nattyware.com/pixie.php

A webpage colour I liked today got me everything I would need to have my favorite color in my Wordpress if I needed to use it...red...I love red.

<span style="color: #802425;">blabla</span>

Or in Photoshop
RGB: 128.37.36

That should be deep red lol not tried it yet.

Thats fine for posts text in Wordpress the (color span). The red page would be done in CSS.

Widget: I don't know never seen that one before anywhere.

:mrgreen:

Post Information

  • Total Posts in this topic: 6 posts
  • Users browsing this forum: No registered users and 83 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
cron
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.