Make it possible to pick a color theme for specific pages

Question

I'm working on a website that has information about different type of schools in the community. What we want is that for each page that we create for a school we have the option to choose a different color theme for that specific page.

The color needs to be applied to the page header and on the sub-navigation and the link buttons on that page.

The structure of the school pages is all the same. Only the color needs to change everytime we create a new page for a different school.

Do someone know how I can make this happen?

Thank you!

Answer 1

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>