File upload with meta box in wordpress with custom post type

Code for File upload with meta box in wordpress using custom post type using meta boxes in wordpress. From wordpress 3.0 version wordpress introduced the custom_post_type function. Many people want to attach the file field with add_meta_box function. In this tutorial I will tell you how to upload file with custom meta box and post type. I tested above code with new wordpress versions 3.9. Still code is working fine.

Code for File upload with meta box in wordpress using custom post type using meta boxes in wordpress.

In this tutorial I will show you how to create the custom post type and add custom meta boxes to that post type and upload file with custom meta box.

After digging into wordpress files and functions I created following code. Just open your functions.php file and put following code in that file for creating custom post type.


<?php
 add_action('init', 'create_product');
 function create_product() {
 $product_args = array(
 'label' => __('Product'),
 'singular_label' => __('Product'),
 'public' => true,
 'show_ui' => true,
 'capability_type' => 'post',
 'hierarchical' => false,
 'rewrite' => true,
 'supports' => array('title', 'editor', 'thumbnail')
 );
 register_post_type('product',$product_args);
 }
?>

For uploading the file through custom meta box use the following code. Following code will add the file field to custom meta box and you are able to upload file or image to wordpress and upload file attachment to you custom post. Following code is very helpful to many wordpress theme and plugin developer. If you are having any issues or trouble using code then get back to me.

File upload with add_meta_box or custom_post_type in wordpress File upload with meta box in wordpress

File upload with add_meta_box or custom_post_type in wordpress File upload with meta box in wordpress


<?php

 add_action("admin_init", "add_product");
 add_action('save_post', 'update_purchase_url');
 function add_product(){
 add_meta_box("product_details", "product Options", "product_options", "product", "normal", "low");
 }
 function product_options(){
 global $post;
 $custom = get_post_custom($post->ID);
 $purchase_url = $custom["purchase_url"][0];
 $product_price = $custom["product_price"][0];
 $product_image = $custom["product_image"][0];
 $video_code = $custom["video_code"][0];

?>
 <div id="product-options">
 <label>Purchase URL:</label>php echo $purchase_url; ?>" />

 <label>Product Price:</label>php echo $product_price; ?>" />

 <label>Product Image:</label>php echo $product_image; ?>" />
 <img src="<?php echo $product_image; ?>">

 </div><!--end product-options-->
<?php
 }
 function update_purchase_url(){
 global $post;
 update_post_meta($post->ID, "purchase_url", $_POST["purchase_url"]);
 update_post_meta($post->ID, "product_price", $_POST["product_price"]);
 update_post_meta($post->ID, "product_image", $_POST["product_image"]);

 if(!empty($_FILES['product_image']['name'])){ //New upload
 require_once( ABSPATH . 'wp-admin/includes/file.php' );
 $override['action'] = 'editpost';

 $uploaded_file = wp_handle_upload($_FILES['product_image'], $override);

 $post_id = $post->ID;
 $attachment = array(
 'post_title' => $_FILES['product_image']['name'],
 'post_content' => '',
 'post_type' => 'attachment',
 'post_parent' => $post_id,
 'post_mime_type' => $_FILES['product_image']['type'],
 'guid' => $uploaded_file['url']
 );
 // Save the data
 $id = wp_insert_attachment( $attachment,$_FILES['product_image'][ 'file' ], $post_id );
 wp_update_attachment_metadata( $id, wp_generate_attachment_metadata( $id, $_FILES['product_image']['file'] ) );

update_post_meta($post->ID, "product_image", $uploaded_file['url']);
 }
 }
?>

For Uploading the file your post form need to add the enctype=”multipart/form-data” type to your form. Just use the following code in your functions.php file.

[viral-lock message=”Solution code is Hidden! It’s Visible for Users who Liked/Shared This article on Facebook or Twitter or Google+. Like or Tweet this article to reveal the content.”]


<?php
function fileupload_metabox_header(){
?>
<script type="text/javascript">
 jQuery(document).ready(function(){
 jQuery('form#post').attr('enctype','multipart/form-data');
 jQuery('form#post').attr('encoding','multipart/form-data');
 });
</script>
<?php }
add_action('admin_head', 'fileupload_metabox_header');

?>

[/viral-lock]

For checking all information in edit or preview section use following code.


<?php

add_action("manage_posts_custom_column",  "product_custom_columns");
add_filter("manage_edit-product_columns", "product_edit_columns");

function product_edit_columns($columns){
 $columns = array(
 "cb" => "<input type=\"checkbox\" />",
 "title" => "Product Title",
 "purchase_url" => "Purchase URL",
 "product_price" => "Product Price",
 "product_image" => "Product Image",
 );
 return $columns;
}
function product_custom_columns($column){
 global $post;
 switch ($column) {
 case "purchase_url":
 $custom = get_post_custom();
 echo $custom["purchase_url"][0];
 break;
 case "product_price":
 $custom = get_post_custom();
 echo $custom["product_price"][0];
 break;
 case "product_image":
 $custom = get_post_custom();
 $img_url =$custom["product_image"][0];
 echo "<image src=".$img_url." height=100 width=100 />";
 break;
 }
}

?>

File upload with meta box in wordpress

File upload with meta box in wordpress

Above code is useful for any type of customization. If you are having any issue with using this code then please get back to me.

27 Comments

Add a Comment

Your email address will not be published. Required fields are marked *