All wordpress pages have special class in body tag. You can check itadd custom metabox for each page. And it is all Paste the following code to coding css. For example;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="' .page $meta_field['id'] . '">' . $meta_field['label'] . '</label>';
$meta_value = get_post_meta( $post-12>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-specialpage-div {
background-color: #fafafa;<?php echo $color; ?>
}
</style>