I'm building a Wordpress theme and I am currently finishing the category.php page. For this page, I would like the user to select two colors (background color and title/text color) and use them in the category.php page.

I searched on the internet for examples on how to do this, but I only found some pieces of code without explanation (example). I also encountered something about functions for custom fields being deprecated in Wordpress.

Can anyone show me how I add two custom fields for color to each category and how I should apply that in the theme? Or point me to a guide on custom fields in Wordpress?

I don't want to use inline CSS, so I think that we should use wp_add_inline_styles to apply the styling. So say that color 1 should be applied to .background and color 2 to .title for each different category, what would I put in my wp_add_inline_styles?

Many thanks!

1 Answer 1


To add custom fields and save/update meta data to terms, you basically need to use these action hooks.

custom fields html for new term

save custom field data for new term, get data from $_POST

custom fields html for existing term

save custom field data for existing term, get data from $_POST

Save / update term meta

Get term meta

You can see the general idea how to use these hooks here, https://wordpress.stackexchange.com/a/296767/144392

Use saved meta data

One way to use the save term meta data is to get it directly on the category template and add it as inline style to an element.

// category.php
$color = sanitize_hex_color(get_term_meta(get_queried_object_id(), 'color', true));
<h1<?php echo $color ? ' style="color: ' . $color . ';"' : ''; ?>>Category title</h1>

Another way is to add the meta data as inline style with wp_add_inline_style() on wp_enqueue_scripts action.

// functions.php
function wpdocs_styles_method() {
    if ( is_category() ) {
        $id            = get_queried_object_id();
        $title         = sanitize_hex_color(get_term_meta($id, 'title_color', true));
        $bg            = sanitize_hex_color(get_term_meta($id, 'bg_color', true));
        $custom_css    = '';

        if ( $title ) {
            $custom_css .= ".title {color: {$color};}";
        if ( $bg ) {
            $custom_css .= " .background {background-color: {$bg};}";
        if ( $custom_css ) {
            // update the slug
            wp_add_inline_style( 'your-theme-styles-slug', trim($custom_css) );         
add_action( 'wp_enqueue_scripts', 'wpdocs_styles_method' );

Color picker

You can use wpColorPicker script to turn text input fields into nice color pickers. Usage examples https://make.wordpress.org/core/2012/11/30/new-color-picker-in-wp-3-5/ and Color picker for posts and pages

  • Related articles (I'm not the the author of either of these), smashingmagazine.com/2015/12/… and code.tutsplus.com/articles/… Jul 24, 2020 at 12:51
  • Hi Antti, could you provide me with a more concrete example? I’m really a bit clueless how all those functions work together.. Thank you!
    – ralphjsmit
    Jul 25, 2020 at 20:02
  • @ralphsmit The linked answer in above and that smashingmagazine article actually demonstrate the taxonomy custom field and saving function usage quite well in my opinion. I would be more or less repeating them. Jul 26, 2020 at 19:18
  • You're right, thank you!
    – ralphjsmit
    Jul 27, 2020 at 9:52
  • No need to get the term meta data from the archive template as you can use it directly in functions. Jan 15, 2022 at 6:22

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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