1

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!

  • Bytheway: I want to be able to choose a color from the dashboard when creating a new page. – user3507500 Feb 17 '18 at 12:38
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>
  • But I want to be able to choose a color from the dashboard when creating a new page. – user3507500 Feb 17 '18 at 12:38
  • See new edited answer. – bilimokur Feb 17 '18 at 12:56

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.