file-upload-custom-post-type

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.

Published by

Purab

I am Purab from India, Software development is my profession and teaching is my passion. Programmers blog dedicated to the JAVA, Python, PHP, DevOps and Opensource Frameworks. Purab's Github Repo Youtube Chanel Video Tutorials Connect to on LinkedIn

27 thoughts on “File upload with meta box in wordpress with custom post type”

    1. you should use the following code for displaying custom fields on front end.
      $custom = get_post_custom();
      echo $custom[“CUSTOM_FIELD”][0]; // here you need to put your custom field name. that sit.

  1. Hey Bro,
    Nice code, its helped me out a lot. Just wondering if you know how to include image_make_intermediate_size() in the function so that when you save the image it makes multiple sizes of the image like the defalt wordpress upload?

  2. Wow, thank you! I have been looking for a solution like this for awhile. This works well for a PDF upload rather than an image upload as well. Thanks for sharing 🙂

  3. Thanks for mentioning my site. You can check wordpress related code, issues on my site. If you are having any wordpress related issues than you can ask to us.

  4. There doesn’t seem to be a ‘file’ index in the ‘$_FILES’ array. While this only generates a warning in PHP and allows the script to progress it does halt the progression of adding posts when the site has debugging enabled. You can use ‘name’ instead without any problems on the ‘edit post’ page but the images won’t have the correct path in ‘Media’.

    1. In essence it should be:
      $id = wp_insert_attachment( $attachment,$uploaded_file[ 'file' ], $post_id );
      wp_update_attachment_metadata( $id, wp_generate_attachment_metadata( $id, $uploaded_file['file'] ) );

  5. Hi,

    Thanks for a great piece of code.

    I’m using this code for one of my custom post types, and each time a post is edited, it loses the image if you haven’t chosen it once again.

    My code looks like this right now:

    add_action(“admin_init”, “add_image”);
    add_action(‘save_post’, ‘update_image’);

    function add_image(){
    add_meta_box(“image_meta”, “Images”, “image_form”, “projects”, “normal”);
    }

    function image_form(){
    global $post;
    $custom = get_post_custom($post->ID);
    $product_image = $custom[“product_image”][0]; ?>

    <input type="file" size="0" name="product_image" value="” />
    <a href="” target=”_blank”><img src="” width=”100″ />
    Insert x
    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’]);
    }
    }

    function fileupload_metabox_header(){ ?>

    jQuery(document).ready(function(){
    jQuery(‘form#post’).attr(‘enctype’,’multipart/form-data’);
    jQuery(‘form#post’).attr(‘encoding’,’multipart/form-data’);
    });

    <?php }

    add_action('admin_head', 'fileupload_metabox_header');

  6. As rokuta says I think this is missing the first lines of code, which is a shame as it looks EXTREMELY useful. Thanks for posting anyway

  7. Is any one see the upload button into the meta box? I cannot see it. I am using Worpress 4.2.2. Please provide the solution.

Leave a Reply to rob Cancel reply

Your email address will not be published.