Post Colors

Post Colors Metabox for demonstration in the color picker tutorial.

class Post_Colors_Metabox {

	public function __construct() {

		if ( is_admin() ) {
			add_action( 'load-post.php',     array( $this, 'init_metabox' ) );
			add_action( 'load-post-new.php', array( $this, 'init_metabox' ) );
		}

	}

	public function init_metabox() {

		add_action( 'add_meta_boxes',        array( $this, 'add_metabox' )         );
		add_action( 'save_post',             array( $this, 'save_metabox' ), 10, 2 );
		add_action( 'admin_enqueue_scripts', array( $this, 'load_scripts_styles')  );
		add_action( 'admin_footer',          array( $this, 'color_field_js' )      );

	}

	public function add_metabox() {

		add_meta_box(
			'post_colors',
			__( 'Post Colors', 'gwp-colors' ),
			array( $this, 'render_metabox' ),
			'post',
			'advanced',
			'default'
		);

	}

	public function render_metabox( $post ) {

		// Add nonce for security and authentication.
		wp_nonce_field( 'gwp_pc_nonce_action', 'gwp_pc_nonce' );

		// Retrieve an existing value from the database.
		$gwp_pc_primary_color = get_post_meta( $post->ID, 'gwp_pc_primary_color', true );
		$gwp_pc_secondary_color = get_post_meta( $post->ID, 'gwp_pc_secondary_color', true );

		// Set default values.
		if( empty( $gwp_pc_primary_color ) ) $gwp_pc_primary_color = '#fff';
		if( empty( $gwp_pc_secondary_color ) ) $gwp_pc_secondary_color = '#000';

		// Form fields.
		echo '<table class="form-table">';

		echo '	<tr>';
		echo '		<th><label for="gwp_pc_primary_color" class="gwp_pc_primary_color_label">' . __( 'Primiary Color', 'gwp-colors' ) . '</label></th>';
		echo '		<td>';
		echo '			<input type="text" id="gwp_pc_primary_color" name="gwp_pc_primary_color" class="gwp_pc_primary_color_field" placeholder="' . esc_attr__( '', 'gwp-colors' ) . '" value="' . esc_attr__( $gwp_pc_primary_color ) . '">';
		echo '			<p class="description">' . __( 'Select primary color', 'gwp-colors' ) . '</p>';
		echo '		</td>';
		echo '	</tr>';

		echo '	<tr>';
		echo '		<th><label for="gwp_pc_secondary_color" class="gwp_pc_secondary_color_label">' . __( 'Secondary Color', 'gwp-colors' ) . '</label></th>';
		echo '		<td>';
		echo '			<input type="text" id="gwp_pc_secondary_color" name="gwp_pc_secondary_color" class="gwp_pc_secondary_color_field" placeholder="' . esc_attr__( '', 'gwp-colors' ) . '" value="' . esc_attr__( $gwp_pc_secondary_color ) . '">';
		echo '			<p class="description">' . __( 'Select secondary color', 'gwp-colors' ) . '</p>';
		echo '		</td>';
		echo '	</tr>';

		echo '</table>';

	}

	public function save_metabox( $post_id, $post ) {

		// Add nonce for security and authentication.
		$nonce_name   = isset( $_POST['gwp_pc_nonce'] ) ? $_POST['gwp_pc_nonce'] : '';
		$nonce_action = 'gwp_pc_nonce_action';

		// Check if a nonce is set.
		if ( ! isset( $nonce_name ) )
			return;

		// Check if a nonce is valid.
		if ( ! wp_verify_nonce( $nonce_name, $nonce_action ) )
			return;

		// Check if the user has permissions to save data.
		if ( ! current_user_can( 'edit_post', $post_id ) )
			return;

		// Check if it's not an autosave.
		if ( wp_is_post_autosave( $post_id ) )
			return;

		// Check if it's not a revision.
		if ( wp_is_post_revision( $post_id ) )
			return;

		// Sanitize user input.
		$gwp_pc_new_primary_color = isset( $_POST[ 'gwp_pc_primary_color' ] ) ? sanitize_text_field( $_POST[ 'gwp_pc_primary_color' ] ) : '';
		$gwp_pc_new_secondary_color = isset( $_POST[ 'gwp_pc_secondary_color' ] ) ? sanitize_text_field( $_POST[ 'gwp_pc_secondary_color' ] ) : '';

		// Update the meta field in the database.
		update_post_meta( $post_id, 'gwp_pc_primary_color', $gwp_pc_new_primary_color );
		update_post_meta( $post_id, 'gwp_pc_secondary_color', $gwp_pc_new_secondary_color );

	}

	public function load_scripts_styles() {

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

	}

	public function color_field_js() {

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

		?>
		<script type="text/javascript">
			jQuery(document).ready(function($){
				$('#gwp_pc_primary_color').wpColorPicker();
				$('#gwp_pc_secondary_color').wpColorPicker();
			});
		</script>
		<?php
		do_action( 'Post_Colors_Metabox_color_picker_js', $this );

	}

}

new Post_Colors_Metabox;