Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

I want to add a custom field to my categories where the user can color code them. I've added the field but I want to use built in colorpicker (either tinyMCE or the farbtastic) to give the user an easy way to pick colors. I can't figure out how to add the functionality yet though, here's what I have so far:

Category Field Setup

/** Add New Field To Category **/
function extra_category_fields( $tag ) {
    $t_id = $tag->term_id;
    $cat_meta = get_option( "category_$t_id");
?>
<tr class="form-field">
<th scope="row" valign="top"><label for="cat_Image_url"><?php _e('Category Image Url'); ?></label></th>
<td>
<input type="text" name="Cat_meta[bgc]" id="colorinput" size="3" style="width:20%;" value="<?php echo $cat_meta['bgc'] ? $cat_meta['bgc'] : '#fff'; ?>" class="my-color-field" />
<div id="colorpicker"></div><br />
            <span class="description"><?php _e('Can't Think of A Desc Yet, Suggestions?'); ?></span>
                <br />
        </td>
</tr>
<?php
}
add_action ( 'category_add_form_fields', 'extra_category_fields');

/** Save Category Meta **/
function save_extra_category_fileds( $term_id ) {
    if ( isset( $_POST['Cat_meta'] ) ) {
        $t_id = $term_id;
        $cat_meta = get_option( "category_$t_id");
        $cat_keys = array_keys($_POST['Cat_meta']);
            foreach ($cat_keys as $key){
            if (isset($_POST['Cat_meta'][$key])){
                $cat_meta[$key] = $_POST['Cat_meta'][$key];
            }
        }
        //save the option array
        update_option( "category_$t_id", $cat_meta );
    }
}
add_action ( 'edited_category', 'save_extra_category_fileds');

Colorpicker Script (Farbtastic) - Doesn't Work

/** Enqueue Color Picker **/
function farbtastic_scripts() {
  wp_enqueue_script( 'jQuery' );
  wp_enqueue_style( 'farbtastic' );
  wp_enqueue_script( 'farbtastic' );

  ?>
    <script type="text/javascript">

        jQuery(document).ready(function() {
            jQuery('#colorpicker').hide();
            jQuery('#colorpicker').farbtastic("#colorinput");
            jQuery("#colorinput").click(function(){jQuery('#colorpicker').slideToggle()});
        });

    </script>
  <?php
}
add_action( 'admin_enqueue_scripts', 'farbtastic_scripts' );

:: Edit :: If it makes it any easier, I do have the "Advanced Custom Fields" plugin which has a colorpicker option. I'm looking to see if it would be easier to use that.

share|improve this question
add comment

1 Answer 1

up vote 0 down vote accepted

I really hate answering my own questions so I'll leave it open to anyone else who finds a different option to adding colorpicker to categories. Here's the solution I found - please note that some names are a littler different than the above code:

:: My Functions ::

/** Add Colorpicker Field to "Add New Category" Form **/
function category_form_custom_field_add( $taxonomy ) {
?>
<div class="form-field">
    <label for="category_custom_color">Color</label>
    <input name="cat_meta[catBG]" class="colorpicker" type="text" value="" />
    <p class="description">Pick a Category Color</p>
</div>
<?php
}
add_action('category_add_form_fields', 'category_form_custom_field_add', 10 );

/** Add New Field To Category **/
function extra_category_fields( $tag ) {
    $t_id = $tag->term_id;
    $cat_meta = get_option( "category_$t_id" );
?>
<tr class="form-field">
    <th scope="row" valign="top"><label for="meta-color"><?php _e('Category Name Background Color'); ?></label></th>
    <td>
        <div id="colorpicker">
            <input type="text" name="cat_meta[catBG]" class="colorpicker" size="3" style="width:20%;" value="<?php echo (isset($cat_meta['catBG'])) ? $cat_meta['catBG'] : '#fff'; ?>" />
        </div>
            <br />
        <span class="description"><?php _e(''); ?></span>
            <br />
        </td>
</tr>
<?php
}
add_action('category_edit_form_fields','extra_category_fields');

/** Save Category Meta **/
function save_extra_category_fileds( $term_id ) {

    if ( isset( $_POST['cat_meta'] ) ) {
        $t_id = $term_id;
        $cat_meta = get_option( "category_$t_id");
        $cat_keys = array_keys($_POST['cat_meta']);
            foreach ($cat_keys as $key){
            if (isset($_POST['cat_meta'][$key])){
                $cat_meta[$key] = $_POST['cat_meta'][$key];
            }
        }
        //save the option array
        update_option( "category_$t_id", $cat_meta );
    }
}
add_action ('edited_category', 'save_extra_category_fileds');
add_action('created_category', 'save_extra_category_fileds', 11, 1);


/** Enqueue Color Picker **/
function colorpicker_enqueue() {
    wp_enqueue_style( 'wp-color-picker' );
    wp_enqueue_script( 'colorpicker-js', get_stylesheet_directory_uri() . '/scripts/colorpicker.js', array( 'wp-color-picker' ) );
}
add_action('admin_enqueue_scripts', 'colorpicker_enqueue' );

My colorpicker.js file is very simple:

jQuery(document).ready(function($){
    $('.colorpicker').wpColorPicker();
});

Finally to Pull These Options

<?php
    $cat_id = get_cat_ID('Default');
    $cat_data = get_option("category_$cat_id");
    echo $cat_data['catBG'];
?>

Default is just what I name "Uncategorized" to, so you can change that to whatever, or more likely change it to be more dynamic.

share|improve this answer
    
Thanks for this great solution. One problem I notice is that it does not seem to work (save correctly) when picking a color during the creation of a new category. But it does work when editing an existing category. Do you have this same problem? –  Stephen Jul 12 at 12:54
    
Yeah, there's an extra function which you'll need to include (and I've edited above) which hooks into: category_add_form_fields and then you'll need to add the save field action hook created_category which I've also included above. Hopefully that works for you! –  Howdy_McGee Jul 14 at 14:19
    
Thanks, this is great! –  Stephen Jul 14 at 15:01
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.