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

1 Views

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>
Post Views: 1

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().