Creating a feature to upload multiples images in the Theme Options?

I followed the method used in the Satoshi WordPress Theme in order to let the user upload an image to a section of the page (and add some text).

Right now, the code just let me uploads one image.

Read More

Do I have to create separate files in order to archive this?

(e.g custom-slider-1.php, custom-slider-2.php, custom-slider-3.php, etc…)?

Or there is a simpler option?

Code:

upload-file.php:

<?php
if (move_uploaded_file($_FILES['uploadfile']['tmp_name'], "images/" . $_FILES["uploadfile"]["name"])) { 
  echo "success"; 
} else {
 echo "error";
}
?>

custom-slider.php (it is called to be placed in a div in *functions.php):*

<?php
 $option_fields[] = $slider_image = THEME_PREFIX . "slider_image";
 $option_fields[] = $slider_image_enabled = THEME_PREFIX . "slider_image_enabled";
 $option_fields[] = $slider_text = THEME_PREFIX . "slider_text";

?>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
 <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/ajaxupload.3.5.js" ></script>
<script type="text/javascript" >
 $(function(){
  var btnUpload=$('#slider-upload');
  var status=$('#slider-upload-status');
  new AjaxUpload(btnUpload, {
   action: '<?php bloginfo('template_directory'); ?>/upload-file.php',
   name: 'uploadfile',
   onSubmit: function(file, ext){
     if (! (ext && /^(jpg|png|jpeg|gif)$/.test(ext))){
                    // extension is not allowed
     status.text('Only JPG, PNG or GIF files are allowed');
     return false;
    }
    status.text('Uploading...');
   },
   onComplete: function(file, response){
    //On completion clear the status
    status.text('');
    //Add uploaded file to list
    if(response==="success"){
     $('<li></li>').appendTo('#files').html('<img src="<?php bloginfo('template_directory'); ?>/images/'+file+'" alt="" /><br />'+file).addClass('success');
     $('#<?php echo $slider_image; ?>').val(file);
    } else{
     $('<li></li>').appendTo('#files').text(file).addClass('error');
    }
   }
  });

 });
</script>

<div class="postbox">
    <h3>Slider Customization Options</h3>

    <div class="postbox-content">

     <div class="option-row">
      <p>Choose how you would like to display your slider.</p>
     </div><!--end option-row-->

     <div class="option-row">
      <div class="option-name">
       <label>Use Image For Slider</label>
      </div><!--end option-name-->
      <div class="option-value">
       <input class="checkbox" id="<?php echo $slider_image_enabled; ?>" type="checkbox" name="<?php echo $slider_image_enabled; ?>" value="true"<?php checked(TRUE, (bool) get_option($slider_image_enabled)); ?> />
      </div><!--end option-value-->
     </div><!--end option-row-->

     <div class="option-row">
      <div class="option-name">
       <label>Upload An Image</label>
       <span id="slider-upload-status"></span>
      </div><!--end option-name-->
      <div class="option-value">
       <input class="logo-name" id="<?php echo $slider_image; ?>" type="text" name="<?php echo $slider_image; ?>" value="<?php echo get_option($slider_image); ?>" />
       <input type="button" class="background_pattern_button" id="slider-upload" value="Choose Image" />

      </div><!--end option-value-->
  </div><!--end option-row-->

  <div class="option-row">
      <div class="option-name">
       <label>Slider Text</label>
      </div><!--end option-name-->
      <div class="option-value">
       <input class="input-box" id="<?php echo $slider_text; ?>" type="text" name="<?php echo $slider_text; ?>" value="<?php echo get_option($slider_text) ?>" />
      </div><!--end option-value-->
     </div><!--end option-row-->

  <input type="submit" class="button" value="Save Changes" />

    </div>

</div><!--end postbox-->

front-page.php:

  <div id="slider">
   <img src="<?php bloginfo('template_directory'); ?>/images/<?php echo get_option(THEME_PREFIX . 'slider_image'); ?>" />
  </div>

Related posts

Leave a Reply

1 comment

  1. Loop over the $_FILES array and add each file separately. I don’t have a complete code example at hand, just an excerpt from my theme options class:

    /**
     * Saves uploaded files in media library and the corresponding id in option field.
     *
     * @return void
     */
    protected function handle_uploads()
    {
        if ( ! isset ( $_FILES ) or empty ( $_FILES ) )
        {
            return;
        }
    
        foreach ( $_FILES as $file_key => $file_arr )
        {
            // Some bogus upload.
            if ( ! isset ( $this->fields[$file_key] )
                or empty ( $file_arr['type'] )
            )
            {
                continue;
            }
    
            if ( ! $this->is_allowed_mime( $file_key, $file_arr ) )
            {
                set_theme_mod( $file_key . '_error', 'wrong mime type' );
                continue;
            }
    
            // The file is allowed, no error until now and the type is correct.
            $uploaded_file = wp_handle_upload(
                $file_arr
            ,   array( 'test_form' => FALSE )
            );
    
            // error
            if ( isset ( $uploaded_file['error'] ) )
            {
                set_theme_mod( $file_key . '_error', $uploaded_file['error'] );
                continue;
            }
    
            // add the file to the media library
    
            // Set up options array to add this file as an attachment
            $attachment = array(
                'post_mime_type' => $uploaded_file['type']
            ,   'post_title'     => $this->get_media_name(
                                        $file_key, $uploaded_file['file']
                                    )
            );
    
            // Adds the file to the media library and generates the thumbnails.
            $attach_id = wp_insert_attachment(
                $attachment
            ,   $uploaded_file['file']
            );
    
            $this->create_upload_meta( $attach_id, $uploaded_file['file'] );
    
            // Update the theme mod.
            set_theme_mod( $file_key, $attach_id );
            remove_theme_mod( $file_key . '_error' );
        }
    }
    

    handle_uploads() is called by save_options() from the same class. is_allowed_mime() guarantees that I get only file the types I need, and get_media_name() looks for a special predefined name for the file (»Logo«, »bg-body« etc.).

    As you can see, it isn’t that hard. Just use the build-in API, not the code from your upload-file.php. There are many, many edge cases which WordPress will handle better than your plain move_uploaded_file().