Color Picker

Overview

The color picker field allows a color to be selected via a javascript popup.

Screenshots

Settings

Name Description
Default value Initial value loaded into the colorpicker

Template usage

The color picker field will return a string value containing the HEX color value including the prefix ‘#’. Below are some examples of how you can use this data. Please note that all following examples use a color picker field called “color”, and if you are working with a sub field, remember to replace any get_field and the_field functions with the relative get_sub_field and the_sub_field functions.

Style attribute

This example shows how to use a selected color to change the background of an element using the style attribute.

<div style="background-color:<?php the_field('color'); ?>">Something here...</div>

Style tag

This example shows how to use a selected color to change the background of an element using a style tag.

<style type="text/css">
.special-color {
    background-color: <?php the_field('color'); ?>;
}
</style>

<div class="special-color">Something here...</div>

Customization

The color picker field contains a JS filter allowing you to modify the wpColorPicker args. Please see the Adding custom javascript to fields documentation for more info.

Save