Как сделать блок для загрузки изображений в админке?

PHP

 add_filter('admin_init', 'add_meta_boxj', 10, 1);
wp_enqueue_script('te_portfolio_admin_js', get_bloginfo('template_url') . '/js/admin.js', array('jquery'), false, true);
function add_meta_boxj() {
 add_meta_box('meta_box_slider', 'Slider', 'meta_box_slider', 'post', 'normal', 'high');
 }
function meta_box_slider($post) {
 ?>
 <div class="te-fields-slider">
 <?php
 // output of stored "sliders"
 $content_array = get_post_meta($post->ID, 'teSlide', 1);
 if (is_array($content_array)) {
 foreach ($content_array as $value) {
 ?>
 <div class="te-slide-img">
 <img src="<?php echo $value; ?>" width="120" height="100" />
 <div class="te-slide-img-delete">delete</div>
 <input name="teSlide[]" type="hidden" value="<?php echo $value; ?>">
 </div>
 <?
 }
 }
 ?>
 <div class="te-fpb-block te-fpb-img-back">
 <div class="te-slide-add">add new</div>
 </div>
 </div>
<input type="hidden" name="extra_fields_nonce" value="<?php echo wp_create_nonce(__FILE__); ?>" />
 <style>
 /*
 Document   : style_admin
 Created on : 07.11.2014, 2:45:39
 Author     : Евгений
 Description:
 Purpose of the stylesheet follows.
 */
 .te-fpb-block {
 clear: both;
 width: 100%;
 margin: 0 0 15px 0;
 overflow: hidden;
 }
 .te-fields-h3 {
 background: #3498db;
 border-bottom: 2px solid #2980b9;
 border-radius: 3px;
 color: white;
 margin: 0 0 10px !important;
 }
 .te-fpb-content {
 background: #ecf0f1;
 border-top: 1px solid #bdc3c7;
 display: block;
 overflow: hidden;
 padding: 5px 10px;
 margin: 0 0 15px;
 }
 .te-fpb-box {
 float: left;
 width: 47%;
 margin: 0 10px 10px 0;
 }
 .te-fpb-box p {
 width: 100%;
 clear: both;
 display: block;
 margin: 0;
 }
 .te-fpb-delete, .te-slide-img-delete {
 background: #e74c3c;
 border-bottom: 3px solid #c0392b;
 border-radius: 3px;
 color: white;
 cursor: pointer;
 height: 21px;
 padding: 3px;
 text-align: center;
 width: 60px;
 margin-top: 18px;
 }
 .te-fpb-delete:hover, .te-slide-img-delete:hover {
 background: #c0392b;
 }
 .te-fpb-add, .te-slide-add {
 background: #1abc9c;
 border-bottom: 3px solid #16a085;
 border-radius: 3px;
 clear: both;
 color: white;
 cursor: pointer;
 float: right;
 height: 21px;
 padding: 3px;
 text-align: center;
 width: 75px;
 }
 .te-fpb-add:hover, .te-slide-add:hover {
 background: #16a085;
 }
 .te-fpb-title {
 width: 90%;
 }
 .te-slide-img {
 float: left;
 height: 130px;
 margin: 0 15px 15px 0;
 position: relative;
 width: 120px;
 }
 .te-slide-img .te-slide-img-delete {
 bottom: 0;
 margin: -7px 0 0;
 right: 0;
 width: 114px;
 }
 .te-slide-img > img {
 border-bottom: 2px solid #ccc;
 border-radius: 3px 3px 0 0;
 }
 .te_portfolio_item-thumb {
 width: 80px;
 height: 80px;
 }
 </style>
 <?
 }
 ?>
 

JS

 var te_admin = {
 EVENTS: function() {
 // delete slide images
 jQuery(document).on('click', '.te-slide-img-delete', function(event) {
 te_admin.UPLOAD_IMG.delet_img(this);
 return false;
 });
 // add slide images
 jQuery(document).on('click', '.te-slide-add', function(event) {
 te_admin.UPLOAD_IMG.add_new(this);
 return false;
 });
 },
 UPLOAD_IMG: {
 add_new: function(thisClass) {
 var send_attachment_bkp = wp.media.editor.send.attachment;
 var button = jQuery(thisClass);
 wp.media.editor.send.attachment = function(props, attachment) {
 var html = '\n\
 <div class="te-slide-img">\n\
 <img src="' + attachment.url + '" width="120" height="100" />\n\
 <div class="te-slide-img-delete">delete</div>\n\
 <input name="teSlide[]" type="hidden" value="' + attachment.url + '">\n\
 </div>\n\
 ';
 jQuery('.te-fpb-img-back').before(html);
 wp.media.editor.send.attachment = send_attachment_bkp;
 };
 wp.media.editor.open(button);
 return false;
 },
 delet_img: function(thisClass) {
 jQuery(thisClass).parent().remove();
 }
 }
 };
jQuery(document).ready(function() {
 te_admin.EVENTS();
 });
 

Сохранение

// включаем обновление полей при сохранении
add_action('save_post', 'my_extra_fields_update_photo', 0);
/* Сохраняем данные, при сохранении поста */
function my_extra_fields_update_photo($post_id) {
//    var_dump($_POST['teSlide']);
    // checks passed verification code
    if (!wp_verify_nonce($_POST['extra_fields_nonce'], __FILE__)) {
        return false;
    }
    // if autosave
    if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) {
        return false;
    }
    // if the user does not have permission to edit the record
    if (!current_user_can('edit_post', $post_id)) {
        return false;
    }
     
    if (isset($_POST['teSlide'])) {
        update_post_meta($post_id, 'teSlide', $_POST['teSlide']);
    } else {
        delete_post_meta($post_id, 'teSlide');
    }   
    return $post_id;
}

Вывод

 $teSlide = get_post_meta(get_the_ID(), 'teSlide', 1);
 if (is_array($teSlide)) {
 foreach ($teSlide as $value) {
 echo '<a class="none" data-gallery="#blueimp-gallery-fruits" href="' . $value . '"><img src="' . $value . '"></a>';
 }
 }