Skip to content

Instantly share code, notes, and snippets.

@da1nonly
Created March 30, 2012 18:13
Embed
What would you like to do?
wordpress audio and video playlist metabox
<?php
function add_meta_boxes() {
wp_enqueue_style( 'mytabs-css', get_bloginfo( 'stylesheet_directory' ). '/tab/metabox-tabs.css');
wp_enqueue_script( 'mytabs', get_bloginfo( 'stylesheet_directory' ). '/tab/mytabs.js', array( 'jquery-ui-tabs' ) );
add_meta_box(
'repeatable-fields',
'Playlist',
'repeatable_meta_box_display',
'post',
'normal',
'high');
add_meta_box(
'repeatable-fields',
'Audio Playlist',
'repeatable_meta_box_display',
'playlist',
'normal',
'high');
add_meta_box(
'repeatable-fields-page',
'Playlist',
'repeatable_meta_box_display',
'page',
'normal',
'high');
}
add_action('admin_menu', 'add_meta_boxes');
// Field Array
$prefix = 'custom_';
$custom_meta_fields = array(
array(
'label' => 'Audio',
'desc' => 'Audio playlist.',
'id' => $prefix.'audio',
'type' => 'audio',
'options' => array (
'one' => 'name',
'two' => 'url'
)
),
array(
'label' => 'Video',
'desc' => 'Video playlist.',
'id' => $prefix.'video',
'type' => 'video',
'options' => array (
'one' => 'title',
'two' => 'file'
)
)
);
function repeatable_meta_box_display() {
global $custom_meta_fields, $post;
wp_nonce_field( 'repeatable_meta_box_nonce', 'repeatable_meta_box_nonce' );
//$repeatable_fields = get_post_meta($post->ID, $prefix, true);
foreach ($custom_meta_fields as $field) {
// get value of this field if it exists for this post
$meta = get_post_meta($post->ID, $field['id'], true);
//$meta = get_post_meta($post->ID, 'custom_audio', true);
?>
<script type = "text/javascript">
jQuery(document).ready(function($) {
$('.metabox_submit').click(function(e) {
e.preventDefault();
$('#publish').click();
});
$('#add-row').live('click', function() {
var table = '#' + $(this).data('table');
var row = $('.empty-row.screen-reader-text').clone(true);
row.removeClass('empty-row screen-reader-text');
row.insertBefore(table + ' tbody>tr:last');
return false;
});
$('.remove-row').on('click', function() {
$(this).parents('tr').remove();
return false;
});
$('#repeatable-fieldset-one tbody, #repeatable-fieldset-two tbody').sortable({
opacity: 0.6,
revert: true,
cursor: 'move',
handle: '.sort'
});
});
</script>
<!-- start -->
<?php switch($field['type']) {
case 'audio': ?>
<ul class="metabox-tabs">
<li class="tab tab1"><a class="active" href="javascript:void(null);">Audio</a></li>
<li class="tab tab2"><a href="javascript:void(null);">Video</a></li>
<li class="tab tab3"><a href="javascript:void(null);">Convert</a></li>
</ul>
<div class="tab1">
<h4 class="heading">Audio</h4>
<div class="tab-content">
<table id="repeatable-fieldset-one" width="100%">
<thead>
<tr>
<th width="2%"></th>
<th width="30%">Name</th>
<th width="60%">URL</th>
<th width="2%"></th>
</tr>
</thead>
<tbody>
<?php
$i = 1;
if ( $meta ) {
foreach ( $meta as $field ) {
?>
<tr>
<td><a class="button remove-row" href="#"><?php echo $i;?></a></td>
<td><input type="text" class="widefat" name="audio_name[]" value="<?php if($field['name'] != '') echo esc_attr( $field['name'] ); ?>" /></td>
<td><input type="text" class="widefat" name="audio_url[]" value="<?php if ($field['url'] != '') echo esc_attr( $field['url'] ); else echo 'http://'; ?>" /></td>
<td><a class="sort">|||</a></td>
</tr>
<?php
$i++;
}
} else {
// show a blank one
?>
<tr>
<td><a class="button remove-row" href="#">-</a></td>
<td><input type="text" class="widefat" name="audio_name[]" /></td>
<td><input type="text" class="widefat" name="audio_url[]" value="http://" /></td>
<td><a class="sort">|||</a></td>
</tr>
<?php } ?>
<!-- empty hidden one for jQuery -->
<tr class="empty-row screen-reader-text">
<td><a class="button remove-row" href="#">-</a></td>
<td><input type="text" class="widefat" name="audio_name[]" /></td>
<td><input type="text" class="widefat" name="audio_url[]" value="http://" /></td>
<td><a class="sort">|||</a></td>
</tr>
</tbody>
</table>
<p><a id="add-row" data-table="repeatable-fieldset-one" class="button" href="#">Add another</a>
<input type="submit" class="metabox_submit button" value="Save" />
</p>
</div>
</div> <!-- end tab1 -->
<?php break;
case 'video': ?>
<div class="tab2">
<h4 class="heading">Video</h4>
<div class="tab-content">
<table id="repeatable-fieldset-two" width="100%">
<thead>
<tr>
<th width="2%"></th>
<th width="30%">Name</th>
<th width="60%">URL</th>
<th width="2%"></th>
</tr>
</thead>
<tbody>
<?php
$i = 1;
if ( $meta ) {
foreach ( $meta as $field ) {
?>
<tr>
<td><a class="button remove-row" href="#"><?php echo $i;?></a></td>
<td><input type="text" class="widefat" name="video_name[]" value="<?php if($field['title'] != '') echo esc_attr( $field['title'] ); ?>" /></td>
<td><input type="text" class="widefat" name="video_url[]" value="<?php if ($field['file'] != '') echo esc_attr( $field['file'] ); else echo 'http://'; ?>" /></td>
<td><a class="sort">|||</a></td>
</tr>
<?php
$i++;
}
} else {
// show a blank one
?>
<tr>
<td><a class="button remove-row" href="#">-</a></td>
<td><input type="text" class="widefat" name="video_name[]" /></td>
<td><input type="text" class="widefat" name="video_url[]" value="http://" /></td>
<td><a class="sort">|||</a></td>
</tr>
<?php } ?>
<!-- empty hidden one for jQuery -->
<tr class="empty-row screen-reader-text">
<td><a class="button remove-row" href="#">-</a></td>
<td><input type="text" class="widefat" name="video_name[]" /></td>
<td><input type="text" class="widefat" name="video_url[]" value="http://" /></td>
<td><a class="sort">|||</a></td>
</tr>
</tbody>
</table>
<p><a id="add-row" data-table="repeatable-fieldset-two" class="button" href="#">Add another</a>
<input type="submit" class="metabox_submit button" value="Save" />
</p>
</div>
</div> <!-- end video -->
<?php break;
case 'convert': ?>
<div class="tab3">
<h4 class="heading">Tab 3</h4>
<div class="tab-content">
<table class="form-table">
<tr>
<th scope="row"><label for="jf_input5">Input 5</label></th>
<td><input type="text" id= "jf_input5" name="jf_input5"/></td>
</tr>
<tr>
<th scope="row"><label for="jf_input6">Input 6</label></th>
<td><input type="text" id= "jf_input6" name="jf_input6"/></td>
</tr>
</table>
</div>
</div>
<?php break;
} //end type
} //end foreach
?>
<!-- end -->
<?php
}
add_action('save_post', 'repeatable_meta_box_save');
function repeatable_meta_box_save($post_id) {
global $custom_meta_fields;
if ( ! isset( $_POST['repeatable_meta_box_nonce'] ) ||
! wp_verify_nonce( $_POST['repeatable_meta_box_nonce'], 'repeatable_meta_box_nonce' ) )
return;
if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE)
return;
if (!current_user_can('edit_post', $post_id))
return;
// loop through fields and save the data
foreach ($custom_meta_fields as $field) {
if($field['type'] == 'audio') {
$old = get_post_meta($post_id, $field['id'], true);
$new = array();
$names = $_POST['audio_name'];//['audio_name'];
$urls = $_POST['audio_url'];//['audio_url'];
$count = count( $names );
for ( $i = 0; $i < $count; $i++ ) {
if ( $names[$i] != '' ) :
$new[$i]['name'] = stripslashes( strip_tags( $names[$i] ) );
if ( $urls[$i] == 'http://' )
$new[$i]['url'] = '';
else
$new[$i]['url'] = stripslashes( $urls[$i] ); // and however you want to sanitize
endif;
}
if ( !empty( $new ) && $new != $old )
update_post_meta( $post_id, $field['id'], $new );
elseif ( empty($new) && $old )
delete_post_meta( $post_id, $field['id'], $old );
}
if($field['type'] == 'video') {
$old = get_post_meta($post_id, $field['id'], true);
$new = array();
$names = $_POST['video_name'];//['audio_name'];
$urls = $_POST['video_url'];//['audio_url'];
$count = count( $names );
for ( $i = 0; $i < $count; $i++ ) {
if ( $names[$i] != '' ) :
$new[$i]['title'] = stripslashes( strip_tags( $names[$i] ) );
if ( $urls[$i] == 'http://' )
$new[$i]['file'] = '';
else
$new[$i]['file'] = stripslashes( $urls[$i] ); // and however you want to sanitize
endif;
}
if ( !empty( $new ) && $new != $old )
update_post_meta( $post_id, $field['id'], $new );
elseif ( empty($new) && $old )
delete_post_meta( $post_id, $field['id'], $old );
}
}
}
@inkcreativ
Copy link

cool .. is it working well (excuse my english)?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment