Yesterday we covered how to create a form on the front end which allows users to post. It’s time to expand on that idea in a couple of ways. Today we will cover how to allow images to be uploaded along with the post. And we will show show options, you can add the image(s) as attachments and display them with the post, you can assign an image as the_post_thumbnail featured image, or both (which is what I do). If you haven’t reviewed the above linked article, check it out. Now let’s add some image uploads!
I have to give credit where it is due. Most, if not all, of this code came from @Bainternet over on the WordPress StackExchange site. I did a lot of Googling, and a lot of testing before I got this fairly simple solution running perfectly. So with credit given, let’s look at the code that worked for me.
The first thing we need to allow the uploads, is a little function dropped into functions.php.
|
1
2
3
4
5
6
7
8
9
10
11
|
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(); 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 );} |
That bit of code in your functions.php will set up the image uploads. It doesn’t do anything yet, we need to set things up in our form. We will get to that in a minute. The next thing to consider is, do you want the image to be set as the post thumbnail/featured image? I know I did, I like all my posts to have featured images attached. So we add a couple of lines to the above code in functions.php so that it sets the featured image. The code now looks like:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
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(); 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;} |
So that will allow the uploads, and also set the image as your featured image. Just a note, if you allow multiple image uploads (as I do) then the last image uploaded will be the featured image. I’m sure there is a way to loop through and pick which image to use as the featured image, but I just kept it like this. I allow 2 images, so the last one uploaded (the bottom one in the form code) becomes the featured image.
The next thing we need to do is add in the image upload fields to the form we made yesterday. This is pretty simple. Just follow along with the same format we used for the other fields. Here’s what my two image fields look like:
|
1
2
3
4
5
6
7
8
9
10
|
<!-- images --><fieldset class="images"><label for="images">Front of the Bottle</label><input type="file" name="bottle_front" id="bottle_front" size="50"></fieldset><fieldset class="images"><label for="images">Back of the Bottle</label><input type="file" name="bottle_rear" id="bottle_rear" size="50"></fieldset> |
Just simple input fields which allow for the file input type. Now we need to edit the first line of code for the form. Currently we have:
<form id="new_post" name="new_post" method="post" action="" class="wpcf7-form"> |
And we simply need to update that to:
|
1
2
|
<!-- Add the enctype at the end --><form id="new_post" name="new_post" method="post" action="" class="wpcf7-form" enctype="multipart/form-data"> |
And that is it for the form. We have our image uploading fields, and we’ve told our form to accept the uploads. Now we need the processing code. Underneath the wp_insert_post line from yesterday, which looks like:
$pid = wp_insert_post($new_post); |
We add in this code:
|
1
2
3
4
5
6
7
|
if ($_FILES) { foreach ($_FILES as $file => $array) { $newupload = insert_attachment($file,$pid); // $newupload returns the attachment id of the file that // was just uploaded. Do whatever you want with that now. }} |
And that does it! We’ve now set up to allow for the upload of two images (you can use more or less), and we’ve assigned an image as the featured image. One last bit of code. So far we’ve attached the image to the post, but we haven’t inserted them. So let’s look at how to call the images to be displayed with our posts. You will need to locate the template used to display these posts. This totally depends on your theme. In my case, because I set up my child theme this way, separating out all my formats, I need to edit format-standard.php. You may need to add this to loop.php or index.php or single.php, etc.
I have added this code:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
<div class="wineBottles"><?php$args = array( 'post_type' => 'attachment', 'numberposts' => -1, 'post_status' => null, 'post_parent' => $post->ID );$attachments = get_posts($args);if ($attachments) { foreach ( $attachments as $attachment ) { ?> <div class="wineImage"> <span class="wineTitle"> <?php echo apply_filters( 'the_title' , $attachment->post_title ); ?> </span> <?php the_attachment_link( $attachment->ID , false ); ?> </div> <?php }}?></div> <div class="clear"></div> |
I located that underneath my title code, and above the_content. Where you add it is entirely up to you and where you want the images. But this is a loop (for use inside a loop) which cycles through and displays all your images uploaded from the form. You’ll see my css selectors set up here. Div class wineBottles wraps all the images, wineImage wraps each individual image/title and the span wineTitle just wraps the title. You can get rid of lines 8-10 if you don’t want the image title to be used. Which I’m thinking of doing.
And that does it! You now have image uploads available from the front end. Tomorrow we will cover adding meta boxes to your form to make use of custom fields for gathering additional data. And after that, we will do a quick wrap-up. Just to show all the code I have in whole. Stay tuned!