7tech.co.in
Learn Php, WP, JS, Joomla & jQuery

How to use wordpress color picker

Many of you want to use the wordpress color picker like in the header editor of the wordpress. Don’t worry today i will let you know how to do it. I have created a sample plugin which just display the color picker inside it. The code is really simple to implement. WordPress uses “farbtastic” script for the color picker. To include the “farbtastic” javascript we need to call wp_enqueue_script(‘farbtastic’); at the time of wordpress initialization and similarly wp_enqueue_style(‘farbtastic’); for style.

Below is the sample plugin code. To test it just copy the code and paste it in a Php file and then make a zip of this file. Now you can install it like normal wordpress plugins. :) 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102

<?php
/*
Plugin Name: Color Picker
Plugin URI: http://www.wamptech.com/
Description: Color picker testing plugin.
Author: Ankur sharma
Version: 1.00
Author URI: http://www.ankursharma.net
*/
 
add_action('admin_menu','funname');
 
function funname() {
 
if (function_exists('add_options_page')) {
 
$page=add_options_page('Color picker', 'Color picker', 8, __FILE__, 'Colorpicker');
add_action( "admin_print_scripts-$page", 'myplugin_admin_head7' );
add_action("admin_print_styles-$page",  'css_includes7');
add_action("admin_head-$page",  'js7', 50);
}
}
 
function css_includes7() {
 
wp_enqueue_style('farbtastic');
 
}
 
function myplugin_admin_head7()
{
wp_enqueue_script('farbtastic');
}
 
function js7()
{
?>
 
<script type="text/javascript">
/* <![CDATA[ */
var farbtastic;
var default_color = '#ffffff';
var old_color = null;
 
function pickColor(color) {
jQuery('#text-color').val(color);
farbtastic.setColor(color);
}
 
jQuery(document).ready(function() {
jQuery('#pickcolor').click(function() {
jQuery('#color-picker').show();
});
 
jQuery('#defaultcolor').click(function() {
pickColor(default_color);
jQuery('#text-color').val(default_color)
});
 
jQuery('#text-color').keyup(function() {
var _hex = jQuery('#text-color').val();
var hex = _hex;
if ( hex[0] != '#' )
hex = '#' + hex;
hex = hex.replace(/[^#a-fA-F0-9]+/, '');
if ( hex != _hex )
jQuery('#text-color').val(hex);
if ( hex.length == 4 || hex.length == 7 )
pickColor( hex );
});
 
jQuery(document).mousedown(function(){
jQuery('#color-picker').each( function() {
var display = jQuery(this).css('display');
if (display == 'block')
jQuery(this).fadeOut(2);
});
});
 
farbtastic = jQuery.farbtastic('#color-picker', function(color) { pickColor(color); });
 
pickColor('#ffffff');
 
});
</script>
 
<?php
}
 
function Colorpicker()
{
?>
 
<p>
<input type="text" name="text-color" id="text-color" value="#ffffff" />
 
<input type="button" value="<?php esc_attr_e( 'Select a Color' ); ?>" id="pickcolor" />
</p>
<div id="color-picker" style="z-index: 100; background:#eee; border:1px solid #ccc; position:absolute; display:none;"></div>
 
<?php
}
Categories: Wordpress

One Response so far.

  1. Adelaide says:
    August 21, 2011 at 3:18 pm

    Good job making it aeppar easy.

    Reply