Or, embed this snippet using GenerateWP WordPress Plugin.

Download

Clone

Category text and background color

Term meta colors for post categories.

class Category_Term_Meta {

	public function __construct() {

		if ( is_admin() ) {

			add_action( 'category_add_form_fields',  array( $this, 'create_screen_fields'), 10, 1 );
			add_action( 'category_edit_form_fields', array( $this, 'edit_screen_fields' ),  10, 2 );

			add_action( 'created_category', array( $this, 'save_data' ), 10, 1 );
			add_action( 'edited_category',  array( $this, 'save_data' ), 10, 1 );

			add_action( 'admin_enqueue_scripts', array( $this, 'load_scripts_styles' ) );
			add_action( 'admin_footer',          array( $this, 'add_admin_js' )        );

		}

	}

	public function create_screen_fields( $taxonomy ) {

		// Set default values.
		$gwp_text_color = '';
		$gwp_background_color = '';

		// Form fields.
		echo '<div class="form-field term-gwp_text_color-wrap">';
		echo '	<label for="gwp_text_color">' . __( 'Text Color', 'text_domain' ) . '</label>';
		echo '	<input type="text" id="gwp_text_color" name="gwp_text_color" class="gwp_color_picker" value="' . esc_attr( $gwp_text_color ) . '"><br>';
		echo '	<p class="description">' . __( 'Category text color.', 'text_domain' ) . '</p>';
		echo '</div>';

		echo '<div class="form-field term-gwp_background_color-wrap">';
		echo '	<label for="gwp_background_color">' . __( 'Background Color', 'text_domain' ) . '</label>';
		echo '	<input type="text" id="gwp_background_color" name="gwp_background_color" class="gwp_color_picker" value="' . esc_attr( $gwp_background_color ) . '"><br>';
		echo '	<p class="description">' . __( 'Category background color.', 'text_domain' ) . '</p>';
		echo '</div>';

	}

	public function edit_screen_fields( $term, $taxonomy ) {

		// Retrieve an existing value from the database.
		$gwp_text_color = get_term_meta( $term->term_id, 'gwp_text_color', true );
		$gwp_background_color = get_term_meta( $term->term_id, 'gwp_background_color', true );

		// Set default values.
		if( empty( $gwp_text_color ) ) $gwp_text_color = '';
		if( empty( $gwp_background_color ) ) $gwp_background_color = '';

		// Form fields.
		echo '<tr class="form-field term-gwp_text_color-wrap">';
		echo '<th scope="row">';
		echo '	<label for="gwp_text_color">' . __( 'Text Color', 'text_domain' ) . '</label>';
		echo '</th>';
		echo '<td>';
		echo '	<input type="text" id="gwp_text_color" name="gwp_text_color" class="gwp_color_picker" value="' . esc_attr( $gwp_text_color ) . '"><br>';
		echo '	<p class="description">' . __( 'Category text color.', 'text_domain' ) . '</p>';
		echo '</td>';
		echo '</tr>';

		echo '<tr class="form-field term-gwp_background_color-wrap">';
		echo '<th scope="row">';
		echo '	<label for="gwp_background_color">' . __( 'Background Color', 'text_domain' ) . '</label>';
		echo '</th>';
		echo '<td>';
		echo '	<input type="text" id="gwp_background_color" name="gwp_background_color" class="gwp_color_picker" value="' . esc_attr( $gwp_background_color ) . '"><br>';
		echo '	<p class="description">' . __( 'Category background color.', 'text_domain' ) . '</p>';
		echo '</td>';
		echo '</tr>';

	}

	public function save_data( $term_id ) {

		// Sanitize user input.
		$gwp_new_text_color = isset( $_POST[ 'gwp_text_color' ] ) ? sanitize_hex_color( $_POST[ 'gwp_text_color' ] ) : '';
		$gwp_new_background_color = isset( $_POST[ 'gwp_background_color' ] ) ? sanitize_hex_color( $_POST[ 'gwp_background_color' ] ) : '';

		// Update the meta field in the database.
		update_term_meta( $term_id, 'gwp_text_color', $gwp_new_text_color );
		update_term_meta( $term_id, 'gwp_background_color', $gwp_new_background_color );

	}

	public function load_scripts_styles() {

		// Color picker
		wp_enqueue_script( 'wp-color-picker' );
		wp_enqueue_style( 'wp-color-picker' );

	}

	public function add_admin_js() {

		// Print js only once per page
		if ( did_action( 'Category_Term_Meta_js' ) >= 1 ) {
			return;
		}

		?>
		<script type="text/javascript">
			jQuery(document).ready(function($){
				$('.gwp_color_picker').wpColorPicker();
			});
		</script>
		<?php

		do_action( 'Category_Term_Meta_js', $this );

	}

}

new Category_Term_Meta;