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

We use cookies to offer you a better browsing experience, analyze site traffic and personalize content. Read about how we use cookies and how you can control them in our Cookie Policy. If you continue to use this site, you consent to our use of cookies.