Farbtastic Color Picker Problems

  • Hi All
    I would like to add a Theme Options page to a WordPress website I’m developing for a customer. I found a tutorial written by Konstantin Kovshenin and his tutorial is called Using the Color Picker in Your WordPress Theme Options and this tutorial can be found on Theme.fm.

    I have followed the tutorial and understand a bit of the code but this is my first time playing with WordPress’s backend. Going through the tutorial, I have copied the code from the website and have placed the code into a separate file called theme-options.php, this is then loaded via functions.php.

    At one stage in the tutorial, you can simply enter a value into the text box and save it successfully but the aim of the tutorial was to use the Farbtastic Color Picker that comes with WordPress. A modification was needed in the tutorial further one and I applied it and now can’t get it to work.

    When you click into the box the Color Picker is activated for the user to select a color, if I select the outer circle the text box goes black and no hex code or color is shown, but if I select a color from the inner circle instead a color is entered but no hex code.

    If there is no value being entered into this box then there is nothing to be saved. The tutorial is nicely written and easy to follow but my level of experience at the moment is not that good and I can’t see the problem.

    I have followed another tutorial and basically downloaded the source code but I prefer Konstantin Kovshenin version.

    So has anyone followed this tutorial and came across the same problems and if so how did you fix it?

Viewing 6 replies - 1 through 6 (of 6 total)
  • Paul

    (@paulcombrinkifacecoza)

    hi, I had the same problem.

    My jquery function call for farbtastic was in the body of the document.
    In WP version 3.4 it need to be loaded in the head.

    To do this, I made a JavaScript file of my function call and copied it my theme options folder, I called it farbtastic-instance.js

    this file contained the following, but your will most likely be diffirent

    jQuery(document).ready(function() {
    jQuery('#demo').hide();
    var f = jQuery.farbtastic('#picker');
    var p = jQuery('#picker').css('opacity', 0.1);
    var selected;
    jQuery('.colorwell')
.
.
.

    Then, at the top of you theme-options.php page, insert:

    wp_register_script( 'farbtastic-instance', get_template_directory_uri() . '/inc/farbtastic-instance.js');
    wp_enqueue_script( 'farbtastic-instance' );

    Paul

    (@paulcombrinkifacecoza)

    Sorry, small change I missed

    wp_register_script( 'farbtastic-instance', get_template_directory_uri() . '/inc/farbtastic-instance.js',array( 'farbtastic', 'jquery' ));
wp_enqueue_script( 'farbtastic-instance' );

    Needs to have the array( ‘farbtastic’, ‘jquery’ ) when the script is registered

    Thread Starter cjc1867

    (@cjc1867)

    Hi Paul, Thanks for replying.
    I have had a look at the source code and there is only two mentions of Farbtastic and they are both in the Head section.

    Don’t understand why some people have it working and some don’t?? Maybe it seperates the men from the boys?

    Thread Starter cjc1867

    (@cjc1867)

    Anybody have any idea about this problem please. I’m sure my copy & paste talents haven’t let me down, not that I want to copy and paste everything as I want to learn.

    This might be overkill, but I keep hitting on these unanswered questions as I’m trying to finish up my options, so here’s a page I’m using to document the solution as I work on it. I have the Farbtastic colorpicker working, and have managed to use the HSL values to generate some nifty auto-colored swatches.
    https://instancia.net/?p=186
    Note that my solution isn’t completely done yet, but it probably has some of the elements you need to get started.

    In case anyone is still having trouble with this. I had the same problem and fixed it by adding a default value to the input field. The adjusted function for my_setting_color() would be:

    function my_setting_color() {
    $options = get_option( 'my-theme-options' );
    ?>
    <div class="color-picker" style="position: relative;">
        <input type="text" name="my-theme-options[color]" id="color" value="<?php if( $options['color'] ) { echo esc_attr( $options['color'] ); } else { echo '#fff'; } ?>"/>
        <div style="position: absolute;" id="colorpicker"></div>
    </div>
    <?php
}

    I hope this helps.

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Farbtastic Color Picker Problems’ is closed to new replies.