WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

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.

share|improve this question
up vote 15 down vote accepted

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.

share|improve this answer
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 – Govnah Antwi-Boasiako Mar 13 '11 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); – Govnah Antwi-Boasiako Mar 13 '11 at 19:47
Glad you worked it out , and better is that you got the point. – Bainternet Mar 13 '11 at 20:05
Yep, thank you very much for your help. Now that i understand it, its time to add some ajax :) – Govnah Antwi-Boasiako Mar 13 '11 at 22:35
Unfortunately I have only one account in Stackoverflow so I can give Only one upvote to this Question. Perfect answer. – hemnath mouli Sep 27 '15 at 7:04

I suggest you to take a look at @Goldenapples solution here,

share|improve this answer
thank you very much Philip. that helped a lot. – Govnah Antwi-Boasiako Mar 13 '11 at 16:32

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;
share|improve this answer

protected by toscho Jun 8 '12 at 11:59

Thank you for your interest in this question. Because it has attracted low-quality or spam answers that had to be removed, posting an answer now requires 10 reputation on this site (the association bonus does not count).

Would you like to answer one of these unanswered questions instead?

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