Add Gallery as custom field in wordpress

Hello,

If you have gallery as custom field then see below example.
i have here application post type. i am implement galley save in this post. Please Check Below Code.

Add Gallery as custom field in wordpress 

This Is Your functions.php code

<?php
function plu_admin_enqueue() { 
   // if(!($condition_to_check_your_page))// adjust this if-condition according to your theme/plugin
     //  return;
    wp_enqueue_script('plupload-all');

    wp_register_script('myplupload',  get_stylesheet_directory_uri() .'/js/myplupload.js', array('jquery'));

    wp_enqueue_script('myplupload');

    wp_register_style('myplupload', get_stylesheet_directory_uri() .'/css/myplupload.css');
    wp_enqueue_style('myplupload');
}
add_action( 'admin_enqueue_scripts', 'plu_admin_enqueue' ); 


function plupload_admin_head() { 
// place js config array for plupload
    $plupload_init = array(
        'runtimes' => 'html5,silverlight,flash,html4',
        'browse_button' => 'plupload-browse-button', // will be adjusted per uploader
        'container' => 'plupload-upload-ui', // will be adjusted per uploader
        'drop_element' => 'drag-drop-area', // will be adjusted per uploader
        'file_data_name' => 'async-upload', // will be adjusted per uploader
        'multiple_queues' => true,
        'max_file_size' => wp_max_upload_size() . 'b',
        'url' => admin_url('admin-ajax.php'),
        'flash_swf_url' => includes_url('js/plupload/plupload.flash.swf'),
        'silverlight_xap_url' => includes_url('js/plupload/plupload.silverlight.xap'),
        'filters' => array(array('title' => __('Allowed Files'), 'extensions' => '*')),
        'multipart' => true,
        'urlstream_upload' => true,
        'multi_selection' => false, // will be added per uploader
         // additional post data to send to our ajax hook
        'multipart_params' => array(
            '_ajax_nonce' => "", // will be added per uploader
            'action' => 'plupload_action', // the ajax action name
            'imgid' => 0 // will be added per uploader
        )
    );
?>
<script type="text/javascript"> 
    var base_plupload_config=<?php echo json_encode($plupload_init); ?>;
</script> 
<?php 
}
add_action("admin_head", "plupload_admin_head");

function g_plupload_action() {

    // check ajax noonce
    $imgid = $_POST["imgid"];
    check_ajax_referer($imgid . 'pluploadan');

    // handle file upload
    $status = wp_handle_upload($_FILES[$imgid . 'async-upload'], array('test_form' => true, 'action' => 'plupload_action'));

    // send the uploaded file url in response
    echo $status['url'];
    exit;
}
add_action('wp_ajax_plupload_action', "g_plupload_action"); 


add_action('add_meta_boxes', 'add_upload_file_metaboxes');

function add_upload_file_metaboxes() {
    add_meta_box('swp_file_upload', 'File Upload', 'swp_file_upload', 'appilcations', 'normal', 'default');
}

function swp_file_upload() {
global $post;
 //$svalue =get_post_meta( get_the_ID(), 'img1', true );

 echo '<input type="hidden" name="podcastmeta_noncename" id="podcastmeta_noncename" value="'.
    wp_create_nonce(plugin_basename(__FILE__)).
    '" />';
    // Noncename needed to verify where the data originated
   
$id = "img1"; // this will be the name of form field. Image url(s) will be submitted in $_POST using this key. So if $id == “img1” then $_POST[“img1”] will have all the image urls

$svalue = ""; // this will be initial value of the above form field. Image urls.

$multiple = true; // allow multiple files upload

$width = null; // If you want to automatically resize all uploaded images then provide width here (in pixels)

$height = null; // If you want to automatically resize all uploaded images then provide height here (in pixels)
?>

<label>Upload Images</label> 
<input type="hidden" name="<?php echo $id; ?>" id="<?php echo $id; ?>" value="<?php echo get_post_meta( get_the_ID(), 'img1', true ); ?>" /> 
<div class="plupload-upload-uic hide-if-no-js <?php if ($multiple): ?>plupload-upload-uic-multiple<?php endif; ?>" id="<?php echo $id; ?>plupload-upload-ui"> 
    <input id="<?php echo $id; ?>plupload-browse-button" type="button" value="<?php esc_attr_e('Select Files'); ?>" class="button" />
    <span class="ajaxnonceplu" id="ajaxnonceplu<?php echo wp_create_nonce($id . 'pluploadan'); ?>"></span>
    <?php if ($width && $height): ?>
            <span class="plupload-resize"></span><span class="plupload-width" id="plupload-width<?php echo $width; ?>"></span>
            <span class="plupload-height" id="plupload-height<?php echo $height; ?>"></span>
    <?php endif; ?>
    <div class="filelist"></div>
</div> 
<div class="plupload-thumbs <?php if ($multiple): ?>plupload-thumbs-multiple<?php endif; ?>" id="<?php echo $id; ?>plupload-thumbs"> 
</div> 
<div class="clear"></div>


<?php
//echo $svalue =get_post_meta( get_the_ID(), 'img1', true );
 }

function save_podcasts_meta($post_id, $post) {
    // verify this came from the our screen and with proper authorization,
    // because save_post can be triggered at other times

    if (!wp_verify_nonce($_POST['podcastmeta_noncename'], plugin_basename(__FILE__))) {
        return $post -> ID;
    }
    // Is the user allowed to edit the post?
    if (!current_user_can('edit_post', $post -> ID))
        return $post -> ID;
    // We need to find and save the data
    // We'll put it into an array to make it easier to loop though.
    $podcasts_meta['img1'] = $_POST['img1'];
    // Add values of $podcasts_meta as custom fields

    foreach($podcasts_meta as $key => $value) {
        if ($post -> post_type == 'revision') return;
         $value = implode(',', (array) $value);
 
        if (get_post_meta($post -> ID, $key, FALSE)) { // If the custom field already has a value it will update
            update_post_meta($post -> ID, $key, $value);
        } else { // If the custom field doesn't have a value it will add
            add_post_meta($post -> ID, $key, $value);
        }
        if (!$value) delete_post_meta($post -> ID, $key); // Delete if blank value
    }
}
add_action('save_post', 'save_podcasts_meta', 1, 2); // sav

added myplupload.js and myplupload.css in your theme folder.

myplupload.js code

    jQuery.fn.exists = function() { 
        return jQuery(this).length > 0;
    }
    jQuery(document).ready(function($) {
    
        if ($(".plupload-upload-uic").exists()) {
            var pconfig = false;
            $(".plupload-upload-uic").each(function() {
                var $this = $(this);
                var id1 = $this.attr("id");
                var imgId = id1.replace("plupload-upload-ui", "");
    
                plu_show_thumbs(imgId);
    
                pconfig = JSON.parse(JSON.stringify(base_plupload_config));
    
                pconfig["browse_button"] = imgId + pconfig["browse_button"];
                pconfig["container"] = imgId + pconfig["container"];
                pconfig["drop_element"] = imgId + pconfig["drop_element"];
                pconfig["file_data_name"] = imgId + pconfig["file_data_name"];
                pconfig["multipart_params"]["imgid"] = imgId;
                pconfig["multipart_params"]["_ajax_nonce"] = $this.find(".ajaxnonceplu").attr("id").replace("ajaxnonceplu", "");
    
                if ($this.hasClass("plupload-upload-uic-multiple")) {
                    pconfig["multi_selection"] = true;
                }
    
                if ($this.find(".plupload-resize").exists()) {
                    var w = parseInt($this.find(".plupload-width").attr("id").replace("plupload-width", ""));
                    var h = parseInt($this.find(".plupload-height").attr("id").replace("plupload-height", ""));
                    pconfig["resize"] = {
                        width: w,
                        height: h,
                        quality: 90
                    };
                }
    
                var uploader = new plupload.Uploader(pconfig);
    
                uploader.bind('Init', function(up) {
    
                });
    
                uploader.init();
    
                // a file was added in the queue
                uploader.bind('FilesAdded', function(up, files) {
                    $.each(files, function(i, file) {
                        $this.find('.filelist').append('

' +
    
                        file.name + ' (' + plupload.formatSize(0) + '/' + plupload.formatSize(file.size) + ') ' + '

');
                    });
    
                    up.refresh();
                    up.start();
                });
    
                uploader.bind('UploadProgress', function(up, file) {
    
                    $('#' + file.id + " .fileprogress").width(file.percent + "%");
                    $('#' + file.id + " span").html(plupload.formatSize(parseInt(file.size * file.percent / 100)));
                });
    
                // a file was uploaded
                uploader.bind('FileUploaded', function(up, file, response) {
    
    
                    $('#' + file.id).fadeOut();
                    response = response["response"]
                    // add url to the hidden field
                    if ($this.hasClass("plupload-upload-uic-multiple")) {
                        // multiple
                        var v1 = $.trim($("#" + imgId).val());
                        if (v1) {
                            v1 = v1 + "," + response;
                        } else {
                            v1 = response;
                        }
                        $("#" + imgId).val(v1);
                    } else {
                        // single
                        $("#" + imgId).val(response + "");
                    }
                    // show thumbs
                    plu_show_thumbs(imgId);
                });
            });
        }
    });
    
    function plu_show_thumbs(imgId) { 
        var $ = jQuery;
        var thumbsC = $("#" + imgId + "plupload-thumbs");
        thumbsC.html("");
        // get urls
        var imagesS = $("#" + imgId).val();
        var images = imagesS.split(",");
        for (var i = 0; i < images.length; i++) {
            if (images[i]) {
                var thumb = $('

Remove

');
                thumbsC.append(thumb);
                thumb.find("a").click(function() {
                    var ki = $(this).attr("id").replace("thumbremovelink" + imgId, "");
                    ki = parseInt(ki);
                    var kimages = [];
                    imagesS = $("#" + imgId).val();
                    images = imagesS.split(",");
                    for (var j = 0; j < images.length; j++) {
                        if (j != ki) {
                            kimages[kimages.length] = images[j];
                        }
                    }
                    $("#" + imgId).val(kimages.join());
                    plu_show_thumbs(imgId);
                    return false;
                });
            }
        }
        if (images.length > 1) {
            thumbsC.sortable({
                update: function(event, ui) {
                    var kimages = [];
                    thumbsC.find("img").each(function() {
                        kimages[kimages.length] = $(this).attr("src");
                        $("#" + imgId).val(kimages.join());
                        plu_show_thumbs(imgId);
                    });
                }
            });
            thumbsC.disableSelection();
        }
    }

here added myplupload.css

    .filelist {
        width: 60%;
    }
    .filelist .file {
        padding: 5px;
        background: #ececec;
        border: solid 1px #ccc;
        margin-bottom: 4px;
    }
    .filelist .fileprogress {
        width: 0%;
        background: #B7C53D;
        height: 5px;
    }
    .plupload-thumbs {
    
    }
    .plupload-thumbs .thumb {
        width: 50px;
        padding-right: 5px;
        float: left;
    }
    .plupload-thumbs .thumb img {
        width: 50px;
        height: 50px;
    }
    .ui-sortable  .thumb img {
        cursor: pointer;
    }

if you want download code please click here

Tweet