How to create color pickers with frabtastic dynamicly

by krike in Code snippets / Freebees on 21 Jan 2012

In a previous article (How to add a color picker in your wp theme using frabtastic) we explained how you could add color pickers using frabtastic in a custom WordPress admin panel for a specific theme. In this article we will provide you with an example on how you could extend this even further. So, instead of copy/pasting the code and markup for each color picker why not create the markup and code just once and reuse it for all other color pickers.

Enjoy this code and if you have any questions drop us a comment below. You can download the entire code as a twentyten child theme.

At the top of your functions.php add:

//define your color pickers
$colorPickers = array(
array('ID' => 'color_1', 'label' => 'Color 1', 'default_color' => '#002c84'),
array('ID' => 'color_2', 'label' => 'Color 2', 'default_color' => '#002c84'),
array('ID' => 'color_3', 'label' => 'Color 3', 'default_color' => '#002c84'),
array('ID' => 'color_4', 'label' => 'Color 4', 'default_color' => '#002c84'),
);

The Markup:

<?php
foreach($colorPickers as $colorPicker):
$colorOption = get_option($colorPicker['ID']);
if (empty($colorOption) || $colorOption == ''):
add_option($colorPicker['ID'], $colorPicker['default_color']);
endif;
?>
<div>
<label for="<?php echo $colorPicker['ID']; ?>"><?php _e($colorPicker['label']); ?></label>
<input type="text" id="<?php echo $colorPicker['ID']; ?>" value="<?php echo get_option($colorPicker['ID']); ?>" name="<?php echo $colorPicker['ID']; ?>" />
<div id="<?php echo $colorPicker['ID']; ?>_color"></div>
</div>
<hr />
<?php endforeach; ?>

The jQuery:

var colorPickers = $('.color-picker');
for (e in colorPickers) {
if (colorPickers[e].id != undefined ) {
var colorPickerID = colorPickers[e].id;
$('#'+ colorPickerID + '_color').farbtastic('#' + colorPickerID);
}
}

The function to save it all in the DB:

function color_picker_option_update()
{
global $colorPickers;
foreach($colorPickers as $colorPicker) {
update_option($colorPicker['ID'], esc_html($_POST[$colorPicker['ID']]));
}
}

Related posts

color_picer_thumb
How to add a color picker in your wp theme using frabtastic
preview
how to add a color picker to your wordpress theme admin panel
wordpress_mu_timthumb
WordPress MU timthumb fix – code snippet
top_5_source_snippets
Top 5 sources to get code snippets
humor_in_code_thumb
Humor in code

Written by krike

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sit amet nisl nisl. Ut interdum libero vitae quam ultricies et lacinia elit aliquet. Praesent tincidunt, sem tempus feugiat feugiat, turpis tellus scelerisque erat, sit amet feugiat neque arcu ac lectus. Sed at mi et elit interdum scelerisque vitae eu felis.

krike has written 77 posts.

  • Barry

    Hi Krike, great tut! ty for the code!

    Can’t place-in the reset button though – the 1 i’ve made doesn’t do the actual reset-thing (made an <input name="reset_the_colors" type="button" id="reset_colors" value="”/>

    and in jquery section I got the lines:
    $(‘#reset_colors’).click(function(){
    $(‘#a-correct-link-to-array-ID-value’).val(‘#f4e3d2′);
    $(‘#a-correct-link-to-array-ID-value’).val(‘#ff8432′);
    });

    as you understand, i can’t figure out that “a-correct-link-to-array-ID-value” =) Could you help?)

    • http://cmstutorials.org krike

      @Barry: Try this, didn’t test it but it sould work. It will used the default colors setup in the array $colorpickers.


      $(‘#reset_colors’).click(function(){
      <?php foreach($colorPickers as $colorPicker): ?>
      $('#<?php echo $colorPicker['id'] ?>_color').farbtastic('#<?php echo $colorPicker['default_color']; ?>');
      <?php endforeach; ?>
      });

  • Barry

    hi Krike! 1st of all – sorry so much time has past and i’m saying thank you for reply only just about now – was busy working )) so, finally i got 2 this site and can say – THANK U ;)

    regarding the code itself – for some reason its not working with me so far. Let me take some time to try and play with it and i’ll report on the results ;)

  • Barry

    ok solved it this way (all similarly to the update button logic). Here:
    1. added a reset button:

    2. added if isset condition:
    if ( isset($_POST['reset_options'])) { colorpicker_options_reset(); }
    3. colorpicker_options_reset contents:
    function sve_theme_page_option_reset()
    {
    global $colorpickers;
    foreach($colorpickers as $colorpicker) {
    update_option($colorpicker['ID'], $colorpicker['default_color']);
    }
    }
    —————————–
    And again – ty for the script, Kirke.

    • http://cmstutorials.org krike

      @Barry: ah yes sorry, the code in my previous comment would have only reset the color pickers but not saved it in the options. Must have misunderstood your question. But i’m glad you could find it yourself. And you are welcome :)

  • Ar-G

    GREAT tutorial krike! Thanks a lot! Where should I place “The Markup” code?

    • http://cmstutorials.org krike

      @Ar-G: in the functions.php of your theme. If you don’t have one just create it.

  • Gary

    OK, I’m not sure what the problem is, but I’ve installed the child theme and the values aren’t being saved, nor or the hex values even showing up in the input field. Am I missing something?

  • Michael

    Hi Krike, great tutorial!
    But I have one question.
    How to add color to the head section ?
    I use

    function my_wp_head() {
    $options = get_option( 'color_picker_option' );
    $colorPickers = $options['color_1'];
    echo " .color-picker { color: $colorPickers } ";
    }
    add_action( 'wp_head', 'my_wp_head' );

  • Michael

    I already have a solution;)

    function my_wp_head() {
    $colorOption = get_option($colorPicker['ID']);

    ?>

    div.myDiv1{ background-color: ;}
    div.myDiv2{ background-color: ;}
    div.myDiv3{ background-color: ;}
    div.myDiv4{ background-color: ;}

    <?php
    }
    add_action( 'wp_head', 'my_wp_head' );

    • http://cmstutorials.org krike

      @Michael Nice work. It is always more satisfying when you find it yourself :)