I am trying to do something similar to the above question. I am trying to make users post and upload images from front-end. I have already done the post form and its working.

I just followed and tried the answer posted by Robin I Knight upload-post-thumbnail-from-the-front-end. Sadly i couldn't get it to work. Is there anything i'm suppose to change or edit?

Thank you.

2 Answers 2


If you are talking about the answer i posted here its simply uploading file in an iframe to achieve "Ajax like" submit.

Now if you already have a form that handles the post submit you can simply add the upload file field input somewhere in your form:

<form ...
<input type="file" name="thumbnail" id="thumbnail">

make sure that your form has enctype="multipart/form-data" attribute.

then in your form processing script after you create the post (assuming that you are using wp_insert_post();) keep hold of the post ID in a new var:

$new_post = wp_insert_post($post_array);

and after that add:

            if (!function_exists('wp_generate_attachment_metadata')){
                require_once(ABSPATH . "wp-admin" . '/includes/image.php');
                require_once(ABSPATH . "wp-admin" . '/includes/file.php');
                require_once(ABSPATH . "wp-admin" . '/includes/media.php');
             if ($_FILES) {
                foreach ($_FILES as $file => $array) {
                    if ($_FILES[$file]['error'] !== UPLOAD_ERR_OK) {
                        return "upload error : " . $_FILES[$file]['error'];
                    $attach_id = media_handle_upload( $file, $new_post );
            if ($attach_id > 0){
                //and if you want to set that image as Post  then use:

and you image will be uploaded and saved as post thumbnail.

  • Thank you @Bainternet. I was struggling to get it to insert the thumbnail, but for some reason when i replaced '$new_post' with '$pid' it inserts the post thumbnail Mar 13, 2011 at 19:44
  • lool i'm so stupid. I just clocked on why i had to use '$pid' i had this line $pid = wp_insert_post($new_post); Mar 13, 2011 at 19:47
  • Glad you worked it out , and better is that you got the point.
    – Bainternet
    Mar 13, 2011 at 20:05
  • Yep, thank you very much for your help. Now that i understand it, its time to add some ajax :) Mar 13, 2011 at 22:35
  • 1
    Unfortunately I have only one account in Stackoverflow so I can give Only one upvote to this Question. Perfect answer. Sep 27, 2015 at 7:04

HTML Markup:

   <label for="custom-upload">Upload New Image:</label>
   <input type="file" tabindex="3" name="custom-upload" id="custom-upload" />
  /*Retrieving the image*/
  $attachment = get_post_meta($postid, 'custom_image');

   echo wp_get_attachment_link($attachment[0], 'thumbnail', false, false);


Uploading the image:

global $post; /*Global post object*/
$post_id = $post->ID; /*Geting current post id*/
$upload = $_FILES['upload']; /*Receive the uploaded image from form*/
add_custom_image($post_id, $upload); /*Call image uploader function*/

function add_custom_image($post_id, $upload)
 $uploads = wp_upload_dir(); /*Get path of upload dir of wordpress*/

 if (is_writable($uploads['path']))  /*Check if upload dir is writable*/
  if ((!empty($upload['tmp_name'])))  /*Check if uploaded image is not empty*/
   if ($upload['tmp_name'])   /*Check if image has been uploaded in temp directory*/
    $file=handle_image_upload($upload); /*Call our custom function to ACTUALLY upload the image*/

    $attachment = array  /*Create attachment for our post*/
      'post_mime_type' => $file['type'],  /*Type of attachment*/
      'post_parent' => $post_id,  /*Post id*/

    $aid = wp_insert_attachment($attachment, $file['file'], $post_id);  /*Insert post attachment and return the attachment id*/
    $a = wp_generate_attachment_metadata($aid, $file['file'] );  /*Generate metadata for new attacment*/
    $prev_img = get_post_meta($post_id, 'custom_image');  /*Get previously uploaded image*/
     if($prev_img[0] != '')  /*If image exists*/
      wp_delete_attachment($prev_img[0]);  /*Delete previous image*/
    update_post_meta($post_id, 'custom_image', $aid);  /*Save the attachment id in meta data*/

    if ( !is_wp_error($aid) ) 
     wp_update_attachment_metadata($aid, wp_generate_attachment_metadata($aid, $file['file'] ) );  /*If there is no error, update the metadata of the newly uploaded image*/
   echo 'Please upload the image.';

function handle_image_upload($upload)
 global $post;

        if (file_is_displayable_image( $upload['tmp_name'] )) /*Check if image*/
            /*handle the uploaded file*/
            $overrides = array('test_form' => false);
            $file=wp_handle_upload($upload, $overrides);
 return $file;

Not the answer you're looking for? Browse other questions tagged or ask your own question.