bux23
7/15/2016 - 6:59 AM

WP meta boxes

WP meta boxes

//IMAGE SELECT
jQuery(document).ready(function(jQuery){

    // Instantiates the variable that holds the media library frame.
    var meta_image_frame;

    // Runs when the image button is clicked.
    jQuery('#header-media-image-button').click(function(e){

        // Prevents the default action from occuring.
        e.preventDefault();

        // If the frame already exists, re-open it.
        if ( meta_image_frame ) {
            wp.media.editor.open();
            return;
        }

        // Sets up the media library frame
        meta_image_frame = wp.media.frames.meta_image_frame = wp.media({
            title: meta_image.title,
            button: { text:  meta_image.button },
            library: { type: 'image' }
        });

        // Runs when an image is selected.
        meta_image_frame.on('select', function(){

            //Grabs the attachment selection and creates a JSON representation of the model.
            var media_attachment = meta_image_frame.state().get('selection').first().toJSON();

            // Sends the attachment URL to our custom image input field.
            jQuery('#header-media-image').val(media_attachment.url);
        });

        // Opens the media library frame.
        meta_image_frame.open();
    });
});


// CONDITIONAL INPUTS
jQuery(document).ready(function(){
	
	jQuery('#header_media_display').on('change',function(){
	    var selection = jQuery(this).val();
	    switch(selection){
	    case "yes":
	    jQuery("#header_media_setup").show("slow");
	   break;
	    default:
	    jQuery("#header_media_setup").hide("slow");
	    }
	});
	
	jQuery('#header_media_type').on('change',function(){
	    var selection = jQuery(this).val();
	    switch(selection){
	    case "image":
	    jQuery("#header_media_image_block").show("slow");
	    jQuery("#header_media_sc_block").hide("slow");
	   break;
	    case "shortcode":
	    jQuery("#header_media_image_block").hide("slow");
	    jQuery("#header_media_sc_block").show("slow");
	   break;
	    }
	});
	
    
	jQuery('#header_media_display').trigger('change');
	jQuery('#header_media_type').trigger('change');
});

// COLOR PICKER
jQuery(document).ready(function($){
    $('.meta-color').wpColorPicker();
});
.buxone-input {
    border: 1px solid #ccc;
    border-radius: 3px;
    overflow: hidden;
    cursor: pointer;
}

.buxone-select {
	background: #fafafa url("https://cdn3.iconfinder.com/data/icons/arrows-25/137/Down-01-128.png") no-repeat 90% 50%;
	background-size: 20px 20px;
	width: 120px;
}

.buxone-select select {
    padding: 0 6px;
    width: 100%;
    border: none;
    box-shadow: none;
    background: transparent;
    background-image: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    cursor: pointer;
}

.buxone-select select:focus {
    outline: none;
}

.buxone-inline { 
	display: inline-block; 
	vertical-align: middle;
}

.buxone-admin-label-cont { 
	width: 200px;
}

input::-moz-placeholder, input:focus, select::-moz-placeholder, select:focus { box-shadow:none !important; }

.buxone-admin-element { margin: 10px 0; }
// METABOXES
function header_media_box()
{
	global $post;  
    $header_media_display = get_post_meta( $post->ID, 'header_media_display', true );
    $header_media_bgcolor = get_post_meta( $post->ID, 'header_media_bgcolor', true );
    $header_media_type = get_post_meta( $post->ID, 'header_media_type', true );
    $header_media_image = get_post_meta( $post->ID, 'header_media_image', true );
    $header_media_sc = get_post_meta( $post->ID, 'header_media_sc', true );
    wp_nonce_field(basename(__FILE__), "header-media-nonce");
    $values = get_post_custom( $post->ID );
	$mediatype = isset( $values['header_media_type'] ) ? esc_attr( $values['header_media_type'][0] ) : ”;
	$displayit = isset( $values['header_media_display'] ) ? esc_attr( $values['header_media_display'][0] ) : ”;
	?>
		<div class="buxone-admin-element">
			<div class="buxone-inline">
				<div class="buxone-admin-label-cont">
				 <label for="header_media_display">Display Header media?</label>
				</div>
			</div>
			<div class="buxone-inline">
			 <div class="buxone-input buxone-select">
		        <select name="header_media_display" id="header_media_display">
			        <option value="no" <?php selected( $displayit, 'no' ); ?>>No</option>
		            <option value="yes" <?php selected( $displayit, 'yes' ); ?>>Yes</option>
		        </select>
			  </div>
			</div>
		</div>
	<div id="header_media_setup">
		<div class="buxone-admin-element">
			<div class="buxone-inline">
				<div class="buxone-admin-label-cont">
				    <label for="header_media_bgcolor">Background color</label>
				</div>
			</div>
			<div class="buxone-inline">
			        <input name="header_media_bgcolor" type="text" value="<?php if ( isset ( $header_media_bgcolor ) ) echo $header_media_bgcolor; ?>" class="meta-color" />
			</div>	
		<div class="buxone-admin-element">
			<div class="buxone-inline">
				<div class="buxone-admin-label-cont">
				    <label for="header_media_type">Select media Type</label>
				</div>
			</div>
			<div class="buxone-inline">
			    <div class="buxone-input buxone-select">
			        <select name="header_media_type" id="header_media_type">
			            <option value="image" <?php selected( $mediatype, 'image' ); ?>>Image</option>
			            <option value="shortcode" <?php selected( $mediatype, 'shortcode' ); ?>>Shortcode</option>
			        </select>
			    </div>
			</div>
		</div>
		<div class="buxone-admin-element" id="header_media_sc_block">
			<div class="buxone-inline">
				<div class="buxone-admin-label-cont">
				    <label for="header_media_sc">Input Shortcode</label>
				</div>
			</div>
			<div class="buxone-inline">
		        <input class="buxone-input" type="text" name="header-media-sc" id="header-media-sc" value="<?php if ( isset ( $header_media_sc ) ) echo $header_media_sc; ?>" />
		    </div>
		</div>
		<div class="buxone-admin-element" id="header_media_image_block">
			<div class="buxone-inline">
				<div class="buxone-admin-label-cont">
				    <label for="header_media_image">Select Image</label>
				</div>
			</div>
			<div class="buxone-inline">
		        <input class="buxone-input" type="text" name="header-media-image" id="header-media-image" value="<?php if (isset($header_media_sc)) { echo $header_media_sc; }?>" />
				<input type="button" id="header-media-image-button" class="button" value="<?php _e( 'Choose or Upload an Image', 'prfx-textdomain' )?>" />
			<?php if (isset($header_media_image) && $header_media_image != "") { ?>
				<div class="image-preview"><img src="<?php echo $header_media_image; ?>" style="max-width: 250px;"></div>
			<?php } ?>
		    </div>
		</div>
	</div>
	</div>

	  
    <?php
}

function add_header_media_box()
{
	$dove = array('post', 'page');
    add_meta_box("header-media", "Header Media", "header_media_box", $dove, "normal", "high", null);
}

add_action("add_meta_boxes", "add_header_media_box");


function header_media_meta_save( $post_id ) {
 
    // Checks save status
    $is_autosave = wp_is_post_autosave( $post_id );
    $is_revision = wp_is_post_revision( $post_id );
    $is_valid_nonce = ( isset( $_POST[ 'header-media-nonce' ] ) && wp_verify_nonce( $_POST[ 'header-media-nonce' ], basename( __FILE__ ) ) ) ? 'true' : 'false';
 
    // Exits script depending on save status
    if ( $is_autosave || $is_revision || !$is_valid_nonce ) {
        return;
    }
 
    // Checks for input and sanitizes/saves if needed
    if( isset( $_POST[ 'header_media_display' ] ) ) {
        update_post_meta( $post_id, 'header_media_display', sanitize_text_field( $_POST[ 'header_media_display' ] ) );
    }
    if( isset( $_POST[ 'header_media_bgcolor' ] ) ) {
        update_post_meta( $post_id, 'header_media_bgcolor', sanitize_text_field( $_POST[ 'header_media_bgcolor' ] ) );
    }
    if( isset( $_POST[ 'header_media_type' ] ) ) {
        update_post_meta( $post_id, 'header_media_type', sanitize_text_field( $_POST[ 'header_media_type' ] ) );
    }
    if( isset( $_POST[ 'header_media_type' ]) && $_POST[ 'header_media_type' ] = "image" ) {
        update_post_meta( $post_id, 'header_media_image', sanitize_text_field( $_POST[ 'header_media_image' ] ) );
    }
    if( isset( $_POST[ 'header_media_type' ]) && $_POST[ 'header_media_type' ] = "shortcode" ) {
        update_post_meta( $post_id, 'header_media_sc', sanitize_text_field( $_POST[ 'header_media_sc' ] ) );
    }
 
}
add_action( 'save_post', 'header_media_meta_save' );