I'm currently leaning how to create a WordPress meta box with a select tag for controlling the color scheme of each post/page. I want to create a situation where I can use if statements to load an extra CSS file that overwrites the original CSS file colors using the wp_enqueue_style function in functions.php.
So far I used the following code from the WordPress codex for adding the meta box and outputting the value from get_post_meta. The code is currently in the form of a plugin.
Meta Box Code: http://codex.wordpress.org/Function_Reference/add_meta_box
<?php
/**
* Adds a box to the main column on the Post and Page edit screens.
*/
function myplugin_add_meta_box() {
$screens = array( 'post', 'page' );
foreach ( $screens as $screen ) {
add_meta_box(
'myplugin_sectionid',
__( 'My Post Section Title', 'myplugin_textdomain' ),
'myplugin_meta_box_callback',
$screen
);
}
}
add_action( 'add_meta_boxes', 'myplugin_add_meta_box' );
/**
* Prints the box content.
*
* @param WP_Post $post The object for the current post/page.
*/
function myplugin_meta_box_callback( $post ) {
// Add an nonce field so we can check for it later.
wp_nonce_field( 'myplugin_meta_box', 'myplugin_meta_box_nonce' );
/*
* Use get_post_meta() to retrieve an existing value
* from the database and use the value for the form.
*/
$value = get_post_meta( $post->ID, '_my_meta_value_key', true );
echo '<label for="myplugin_new_field">';
_e( 'Description for this field', 'myplugin_textdomain' );
echo '</label> ';
echo '<input type="text" id="myplugin_new_field" name="myplugin_new_field" value="' . esc_attr( $value ) . '" size="25" />';
}
/**
* When the post is saved, saves our custom data.
*
* @param int $post_id The ID of the post being saved.
*/
function myplugin_save_meta_box_data( $post_id ) {
/*
* We need to verify this came from our screen and with proper authorization,
* because the save_post action can be triggered at other times.
*/
// Check if our nonce is set.
if ( ! isset( $_POST['myplugin_meta_box_nonce'] ) ) {
return;
}
// Verify that the nonce is valid.
if ( ! wp_verify_nonce( $_POST['myplugin_meta_box_nonce'], 'myplugin_meta_box' ) ) {
return;
}
// If this is an autosave, our form has not been submitted, so we don't want to do anything.
if ( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE ) {
return;
}
// Check the user's permissions.
if ( isset( $_POST['post_type'] ) && 'page' == $_POST['post_type'] ) {
if ( ! current_user_can( 'edit_page', $post_id ) ) {
return;
}
} else {
if ( ! current_user_can( 'edit_post', $post_id ) ) {
return;
}
}
/* OK, it's safe for us to save the data now. */
// Make sure that it is set.
if ( ! isset( $_POST['myplugin_new_field'] ) ) {
return;
}
// Sanitize user input.
$my_data = sanitize_text_field( $_POST['myplugin_new_field'] );
// Update the meta field in the database.
update_post_meta( $post_id, '_my_meta_value_key', $my_data );
}
add_action( 'save_post', 'myplugin_save_meta_box_data' );
Value Output: http://codex.wordpress.org/Function_Reference/get_post_meta
<?php
$my_data = get_post_meta( $post->ID, '_my_meta_value_key', true );
// check if the custom field has a value
if( ! empty( $my_data ) ) {
echo $my_data;
}
?>
I'm having a difficult time trying to figure out how to change the code logic if I decide to replace the input tag with a select tag with options of colors that will determine which CSS file will be used to overwrite the original file.
Thank you for your time!
After following the advice from patnz, I changed the value output to the following and got it to work. I'll now start intergrating this into my theme. Thanks!
<?php
$my_data = get_post_meta( $post->ID, '_my_meta_value_key', true );
// check if the custom field has a value
if( $my_data == val1 ) {
echo $my_data;
} elseif ($my_data == val2) {
echo $my_data;
}
?>
Assuming everything is working so far and you are just wanting to replace the input[type=text] with a select, your select tag will look something like this:
//... continued from code above
// JUST REMOVE INPUT TAG - // echo '<input type="text" id="myplugin_new_field"...
echo '<select id="myplugin_new_field" name="myplugin_new_field">';
echo '<option value="">- select a value -</option>';
echo '<option value="val1" '.selected("val1",esc_attr( $value )).'" >Value 1</option>';
echo '<option value="val2" '.selected("val2",esc_attr( $value )).'" >Value 2</option>';
echo '</select>';