0

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!

2

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
{$taxonomy}_add_form_fields

save custom field data for new term, get data from $_POST
created_{$taxonomy}

custom fields html for existing term
{$taxonomy}_edit_form_fields

save custom field data for existing term, get data from $_POST
edited_{$taxonomy}

Save / update term meta
add_term_meta()
update_term_meta()

Get 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

| improve this answer | |
  • Related articles (I'm not the the author of either of these), smashingmagazine.com/2015/12/… and code.tutsplus.com/articles/… – Antti Koskinen Jul 24 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! – ralphsmit Jul 25 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. – Antti Koskinen Jul 26 at 19:18
  • You're right, thank you! – ralphsmit Jul 27 at 9:52

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.