0

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.

0

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.

  • Thanks for your input. This should be done without plugins. – Benjamin Franklin Mar 5 at 19:18
0

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!

  • I am sorry for getting back so late. I just had time to test today. I have hard time replicating this. Maybe due my newbie Wordpress knowledge. I am receiving error: Warning: call_user_func_array() expects parameter 1 to be a valid callback, function 'my_category_field' not found or invalid function name in wp-includes\class-wp-hook.php on line 286 – Benjamin Franklin Mar 4 at 15:48
  • Sorry for typo in first block of code in my answer : add_action('category_add_form_fields', 'my_category_field', 10, 2); add_action('category_edit_form_fields', 'my_category_field', 10, 2); should be add_action('category_add_form_fields', 'my_category_fields', 10, 2); add_action('category_edit_form_fields', my_category_fields', 10, 2); I have updated the answer. i hope this will work now without fail. – Qaisar Feroz Mar 4 at 15:59
  • UPDATE: Corrected some more errors in first block of code. Now it works on my setup without fail. – Qaisar Feroz Mar 4 at 18:09
  • @KostaKostic imgur.com/a/YxpZmM4 – Qaisar Feroz Mar 4 at 18:21

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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