Frontend Posting With Image Uploader

Home/Techies, Wordpress tricks/Frontend Posting With Image Uploader

Frontend Posting With Image Uploader

Recently i had to implement frontend posting for the sidebar. I chose Quick Post Widget for this purpose. This plugin has a very flexible UI with a lot of options. The only problem i had was, it used a tab in the visual editor for image attachments, which my client did not like much. He wanted an image uploading field upfront.

So i decided to add a front end image uploader to Quick Post Widget. The file i edited was ‘quick-post-widget.php’. Here are the steps i followed

1- I modified the opening form tag and added enctype to it (this is the form that will displayed on frontend).

enctype="multipart/form-data"

2- In the form, before the submit button, added a field of type ‘file’ for images.

<label for="attachment">Image: </label>
<input id="attachment" type="file" name="mypostimage" />

3- Added the image upload function to my functions.php so i can also call it later wherever i need.

function insert_attachment($file_handler,$post_id,$setthumb='false') {

  // check to make sure its a successful upload
  if ($_FILES[$file_handler]['error'] !== UPLOAD_ERR_OK) __return_false();
    //for use in widgets we include some files that contain media_handle_upload and related functions.
    require_once(ABSPATH . "wp-admin" . '/includes/image.php');
    require_once(ABSPATH . "wp-admin" . '/includes/file.php');
    require_once(ABSPATH . "wp-admin" . '/includes/media.php');

  $attach_id = media_handle_upload( $file_handler, $post_id );

  if ($setthumb) update_post_meta($post_id,'_thumbnail_id',$attach_id);
  return $attach_id;
}

4- Now i called the above function for quick post widget ‘mypostimage’ field. Added this code just after wp_insert_post was called in the quick-post-widget.php. This code would insert the image as an attachment image for the post.

   if($post_id > 0){
             if ($_FILES) {
                           $newupload = insert_attachment('myfile',$post_id);
                          }
                       }

Below is the screenshot, how the widget looked after adding the uploader field.

Easy, isn’t it? I am also open to suggestions on how it could be done more easily.

 

Yumna Tatheer

Yamna Tatheer is a WordPress Plugin developer and a Top-Rated Upwork professional. She is a part-time blogger from Lahore and loves to write about wordpress and freelance industry.

More Posts

Follow Me:
Facebook

About the Author:

Yamna Tatheer is a Wordpress Plugin developer and a Top-Rated Upwork professional. She is a part-time blogger from Lahore and loves to write about wordpress and freelance industry.

5 Comments

  1. Sylvia April 2, 2012 at 9:32 am - Reply

    Amazing!

  2. Matt Laport May 11, 2012 at 3:14 am - Reply

    Excellent website! I greatly liked the data you’ve provided!

  3. trabalho em casa May 15, 2012 at 4:19 pm - Reply

    I was searching for Frontend Posting With Image Uploader | AxactSoft on google and i found your blog! Thanks

  4. milad July 3, 2012 at 12:54 pm - Reply

    thanks . great post seriously ! but is there any way to add video uploader too ? any help really appreciated

    • Emerald July 3, 2012 at 7:36 pm - Reply

      The image which is uploaded with quickpost is inserted as image attachment with the post. For adding video, you can create a custom post type, take a link or video file as user input, append it with post content and insert that content using wp_insert_post.

Leave A Comment