Skip to main content
added 3326 characters in body
Source Link
wpdev
  • 549
  • 2
  • 13
  • 28

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>

All wordpress pages have special class in body tag. You can check it. And it is all to coding css. For example;

.page-12 .my-special-div {
    background-color: #fafafa;
}

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>
Source Link
wpdev
  • 549
  • 2
  • 13
  • 28

All wordpress pages have special class in body tag. You can check it. And it is all to coding css. For example;

.page-12 .my-special-div {
    background-color: #fafafa;
}