Add jQuery Color Picker WordPress Theme or Plugin

Since WP 3.5, a new CSS gradient-based color picker called Iris was added. The new Iris color picker is shown off in the Theme Customizer for your custom theme. In this tutorial, I’m going to show you how add the jquery color picker inside your WordPress theme or plugin. I will show you how to add WordPress color picker easily inside the WordPress user interface. Let’s get started.

Enqueue the color picker script and style

We need to wp_enqueue_script the script and wp_enqueue_style the style with add_action to the functions.php file. Just include a jQuery file and stylesheet file by this script.

Add jquery for color picker

Now create a new javascript file as like cp-active.js and keep it avobe defined “/js/cp-active.js” file path using bellows code.

Creating an input field

Add a textbox to your settings page with a CSS class for the color picker, where you want to dispaly the input text. I have use “color_code” for input $variable.

It’s enough for adding jquery color picker on your wordpress theme or plugin. Ask any question throw comment.

I am S M Hasibul Islam (Bachelor of Computer Science & Engineering), a web programmer with more than 5 years experience as like skill php, mysql, html5, css3, javascript, jquery, wordpress, responsive/mobile web design, hosting managements with VPS, shared server, also web UI, SEO, SMM.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">