Custom color for each category name

Question

I have tested several plugins and none is perfect solution. I would like to have simple solution so user can select the color for the Category name which will be the actual color of the text/link like in the example bellow. Have been playing around with this and can't find a proper way to include this into my own theme. Any help greatly appreciated.

Answer 1

Maybe this is too simple for your problem, but you could have a custom field that allows the user to type in the hex or rgba color code. Just output this inline with the element.

Heres an example using ACF plugin.

<span class="label" style="background: <?php the_field('color'); ?>"> </span>

Third party ACF plugins also support a color picker, for a better user experience.

Answer 2

To achieve this Follow these easy step:

1. Add field for color To Add/Edit category Screen using hooks category_add_form_fields and category_edit_form_fields

   add_action('category_add_form_fields', 'my_category_fields', 10, 2);
   add_action('category_edit_form_fields', 'my_category_fields', 10, 2);
   function my_category_fields($term) {
           $cat_color = get_term_meta($term->term_id, 'cat_color', true);
           if($cat_color == '') $cat_color = '#000000'; // Default black color
   
   ?>
   <tr class="form-field">
           <th valign="top" scope="row"><label for="cat_color"><?php _e('Color code'); ?></label></th>
           <td>
               <input type="color" size="40" value="<?php echo esc_attr($cat_color); ?>" id="cat_color" name="cat_color"><br/>
               <span class="description"><?php _e('Please select a color'); ?></span>
           </td>
       </tr>
   <?php
   }
   

2. Save field for color submitted from Add/Edit category Screen using hooks edited_category and create_category

   add_action('edited_category', 'save_my_category_fields', 10, 2);
   add_action('create_category', 'save_my_category_fields', 10, 2);
   
   function save_my_category_fields($term_id) {
      if (!isset($_POST['cat_color'])) {
          return;
      }
   
   update_term_meta($term_id, 'cat_color', sanitize_text_field($_POST['cat_color']));
   
   }
   

3. Finally use the saved color by using get_term_meta()

   get_term_meta($term_id, 'cat_color', true);   // Replace $term_id with your own
   

For example,

<?php
$categories = wp_get_post_categories( $post_id );
foreach($categories as $category) { 
    $color = get_term_meta($category->term_id, 'cat_color', true);
?>
     <li>
       <span class="label" style="background: <?php echo $color ; ?>">
          <a href="<?php echo get_category_link( $category->term_id ); ?>" >
             <?php echo $category->name ; ?>
         </a>
      </span>
    </li>
<?php 
   }
 ?>

I hope this will help you!