Header Meta Options

class dd_page_meta {

	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(
			'header_color',
			__( 'Header Options', 'text_domain' ),
			array( $this, 'show_dd_meta' ),
			'page',
			'advanced',
			'high'
		);

	}

	public function show_dd_meta( $post ) {

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

		// Set default values.
		if( empty( $page_metaheader_bg_color ) ) $page_metaheader_bg_color = '';
		if( empty( $page_metatitle_position ) ) $page_metatitle_position = '';
		if( empty( $page_metacustom_css ) ) $page_metacustom_css = '';

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

		echo '	<tr>';
		echo '		<th><label for="page_metaheader_bg_color" class="page_metaheader_bg_color_label">' . __( 'Select Header BG Color', 'text_domain' ) . '</label></th>';
		echo '		<td>';
		echo '			<input type="text" id="page_metaheader_bg_color" name="page_metaheader_bg_color" class="page_metaheader_bg_color_field" placeholder="' . esc_attr__( '', 'text_domain' ) . '" value="' . esc_attr( $page_metaheader_bg_color ) . '">';
		echo '			<p class="description">' . __( 'Select the background color for behind the featured image', 'text_domain' ) . '</p>';
		echo '		</td>';
		echo '	</tr>';

		echo '	<tr>';
		echo '		<th><label for="page_metatitle_position" class="page_metatitle_position_label">' . __( 'Select the Title Position', 'text_domain' ) . '</label></th>';
		echo '		<td>';
		echo '			<select id="page_metatitle_position" name="page_metatitle_position" class="page_metatitle_position_field">';
		echo '			<option value="page_metaleft" ' . selected( $page_metatitle_position, 'page_metaleft', false ) . '> ' . __( 'Left', 'text_domain' ) . '</option>';
		echo '			<option value="page_metaright" ' . selected( $page_metatitle_position, 'page_metaright', false ) . '> ' . __( 'Right', 'text_domain' ) . '</option>';
		echo '			</select>';
		echo '			<p class="description">' . __( 'Select whether or not the title is on the left or right', 'text_domain' ) . '</p>';
		echo '		</td>';
		echo '	</tr>';

		echo '	<tr>';
		echo '		<th><label for="page_metacustom_css" class="page_metacustom_css_label">' . __( 'Custom style', 'text_domain' ) . '</label></th>';
		echo '		<td>';
		echo '			<input type="text" id="page_metacustom_css" name="page_metacustom_css" class="page_metacustom_css_field" placeholder="' . esc_attr__( '', 'text_domain' ) . '" value="' . esc_attr( $page_metacustom_css ) . '">';
		echo '			<p class="description">' . __( 'Enter Custom style to offset', 'text_domain' ) . '</p>';
		echo '		</td>';
		echo '	</tr>';

		echo '</table>';

	}

	public function save_metabox( $post_id, $post ) {

		// Sanitize user input.
		$page_metanew_header_bg_color = isset( $_POST[ 'page_metaheader_bg_color' ] ) ? sanitize_hex_color( $_POST[ 'page_metaheader_bg_color' ] ) : '';
		$page_metanew_title_position = isset( $_POST[ 'page_metatitle_position' ] ) ? $_POST[ 'page_metatitle_position' ] : '';
		$page_metanew_custom_css = isset( $_POST[ 'page_metacustom_css' ] ) ? sanitize_text_field( $_POST[ 'page_metacustom_css' ] ) : '';

		// Update the meta field in the database.
		update_post_meta( $post_id, 'page_metaheader_bg_color', $page_metanew_header_bg_color );
		update_post_meta( $post_id, 'page_metatitle_position', $page_metanew_title_position );
		update_post_meta( $post_id, 'page_metacustom_css', $page_metanew_custom_css );

	}

	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( 'dd_page_meta_color_picker_js' ) >= 1 ) {
			return;
		}

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

	}

}

new dd_page_meta;