Currently, I am in the process of learning how to create a custom WordPress meta box with a select tag for controlling the color scheme of individual posts/pages. My goal is to implement a system where I can use if statements to load an additional CSS file that will override the original CSS file colors using the wp_enqueue_style function in functions.php.
Thus far, I have utilized the code provided by the WordPress codex for adding the meta box and displaying the value from get_post_meta. The code is currently integrated as a plugin.
For the Meta Box Code, refer to: 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 a nonce field for security checks.
wp_nonce_field( 'myplugin_meta_box', 'myplugin_meta_box_nonce' );
/*
* Use get_post_meta() to fetch an existing value
* from the database and populate 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" />';
}
/**
* Handles saving custom data when the post is saved.
*
* @param int $post_id The ID of the post being saved.
*/
function myplugin_save_meta_box_data( $post_id ) {
// Check if our nonce is set.
if ( ! isset( $_POST['myplugin_meta_box_nonce'] ) ) {
return;
}
// Verify the validity of the nonce.
if ( ! wp_verify_nonce( $_POST['myplugin_meta_box_nonce'], 'myplugin_meta_box' ) ) {
return;
}
// Avoid autosave triggers.
if ( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE ) {
return;
}
// Check user 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;
}
}
// Data can now be safely saved.
if ( ! isset( $_POST['myplugin_new_field'] ) ) {
return;
}
$my_data = sanitize_text_field( $_POST['myplugin_new_field'] );
update_post_meta( $post_id, '_my_meta_value_key', $my_data );
}
add_action( 'save_post', 'myplugin_save_meta_box_data' );For Value Output, visit: http://codex.wordpress.org/Function_Reference/get_post_meta
<?php
$my_data = get_post_meta( $post->ID, '_my_meta_value_key', true );
// Verify if the custom field has a value
if( ! empty( $my_data ) ) {
echo $my_data;
}
?>I am currently facing challenges in understanding how to modify the code logic if I choose to replace the input tag with a select tag containing color options that will determine which CSS file to utilize for overriding the original file.
Many thanks for your assistance!
Update
Following the advice provided by patnz, I have updated the value output as follows and successfully implemented it. I will now proceed to integrate this into my theme. Thank you!
<?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;
}
?>