You can add custom metabox for each page.
Paste the following code to functions.php
class colorMetabox {
private $screen = array(
'post',
);
private $meta_fields = array(
array(
'label' => 'Page Color',
'id' => 'page_color',
'type' => 'color',
),
);
public function __construct() {
add_action( 'add_meta_boxes', array( $this, 'add_meta_boxes' ) );
add_action( 'save_post', array( $this, 'save_fields' ) );
}
public function add_meta_boxes() {
foreach ( $this->screen as $single_screen ) {
add_meta_box(
'color',
__( 'color', 'textdomain' ),
array( $this, 'meta_box_callback' ),
$single_screen,
'advanced',
'default'
);
}
}
public function meta_box_callback( $post ) {
wp_nonce_field( 'color_data', 'color_nonce' );
echo 'Color For Page';
$this->field_generator( $post );
}
public function field_generator( $post ) {
$output="";
foreach ( $this->meta_fields as $meta_field ) {
$label="<label for="" . $meta_field['id'] . '">' . $meta_field['label'] . '</label>';
$meta_value = get_post_meta( $post->ID, $meta_field['id'], true );
if ( empty( $meta_value ) ) {
$meta_value = $meta_field['default']; }
switch ( $meta_field['type'] ) {
default:
$input = sprintf(
'<input %s id="%s" name="%s" type="%s" value="%s">',
$meta_field['type'] !== 'color' ? 'style="width: 100%"' : '',
$meta_field['id'],
$meta_field['id'],
$meta_field['type'],
$meta_value
);
}
$output .= $this->format_rows( $label, $input );
}
echo '<table class="form-table"><tbody>' . $output . '</tbody></table>';
}
public function format_rows( $label, $input ) {
return '<tr><th>'.$label.'</th><td>'.$input.'</td></tr>';
}
public function save_fields( $post_id ) {
if ( ! isset( $_POST['color_nonce'] ) )
return $post_id;
$nonce = $_POST['color_nonce'];
if ( !wp_verify_nonce( $nonce, 'color_data' ) )
return $post_id;
if ( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE )
return $post_id;
foreach ( $this->meta_fields as $meta_field ) {
if ( isset( $_POST[ $meta_field['id'] ] ) ) {
switch ( $meta_field['type'] ) {
case 'email':
$_POST[ $meta_field['id'] ] = sanitize_email( $_POST[ $meta_field['id'] ] );
break;
case 'text':
$_POST[ $meta_field['id'] ] = sanitize_text_field( $_POST[ $meta_field['id'] ] );
break;
}
update_post_meta( $post_id, $meta_field['id'], $_POST[ $meta_field['id'] ] );
} else if ( $meta_field['type'] === 'checkbox' ) {
update_post_meta( $post_id, $meta_field['id'], '0' );
}
}
}
}
if (class_exists('colorMetabox')) {
new colorMetabox;
};
Look bottom of the page submit screen. Put yor color hex code with “#”.
Then put this following code to page.php
<?php
$color = get_post_meta( get_the_ID(), 'page_color', TRUE );
?>
<style media="screen">
/*change class name to where you want to set a background*/
.my-page-div {
background-color: <?php echo $color; ?>
}
</style>