WordPress uses the Iris Color Picker as a tool which you can select a color for an input field in a plugin or theme or customizer, out of the box you can only add a hex color and not an Alpha RGBa color type that supports transparency.

wordpress-default-hex-color

No transparency here.

There are a couple of ways around this either as plugins or as extending the Iris color picker, there is a popular thread on this as an Open Issue on the Iris Github repo.

These 2 work for themes and plugins

And this one for the customizer

The one below is one that extends the Iris Color Picker and just works in input fields without calling other plugins – as the author extends the existing wp-color-picker with his wp-color-picker-alpha code.

So for plugin usage in an input field you’ll need to complete the following.

Enqueuing the Color Scripts

Get the Github repo and extract wp-color-picker-alpha.min.js from the dist directory, this needs to be enqueued at your plugins settings page as well as the regular wp-color-picker script.

The wp-color-picker-alpha.min.js is dependent owp-color-picker.

View the code on Gist.

Adding the Alpha Attribute to the Input Field

So now with that in place any input fields that you need to apply the rgba color format to, you need to add in a data attribute to the input field of  data-alpha=true as well as the  class=color-picker attribute. Example below…

View the code on Gist.

Also you can set a default color by adding the attribute data-default-color=rgba(0,0,0,0.85)“.

That’s it nice and easy – giving you …

wordpress-default-rgba-color

This allows both regular hex color and RGBa with the outer right slider adjusting the transparent value.

 

 

Share:

Leave a Reply