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' );