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

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 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_add_form_fields', 'extra_category_fields');
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');


/** 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
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.