Adding Image Upload Ability To Options Panel - Wordpress Solution - Coding

Hi, Using this code for the options panel: http://net.tutsplus.com/tutorials/wordpress/how-to-create-a-better-wordpress-options-panel/ I would like to have an image upload functionality instead of having to enter the URL path of an image. There will be multiple instances required for image uploading, this varies, depending on the requirements of a theme. Basically what I'm looking for is to be able to add this type of code to the section as outlined in step 4 of the above linked tutorial:

array( "name" => "Product Image Upload",  
"desc" => "Upload product image",  
"id" => $shortname."_upload_one",  
"type" => "upload",  
"std" => ""),

And if needed more instances of this type of code each time with a different $shortname id so I can incorporate this into the theme template. You can find specific how to information here: http://www.wptavern.com/forum/themes-templates/1346-creating-upload-function-options-page.html http://stuntsnippets.com/wordpress-custom-theme-options/ Unfortunately I get stuck getting this to work. I would need a copy and paste solution that works with the above linked Options page tutorial. An image preview functionality is preferred, but not necessarily required. Thanks!

Solution - 1

Change

	<form method="post">

	<form method="post" enctype="multipart/form-data" >

In step 5, change

 foreach ($options as $value) {  
     if( isset( $_REQUEST[ $value['id'] ] ) ) { update_option( $value['id'], $_REQUEST[ $value['id'] ]  ); } else { delete_option( $value['id'] ); } }


foreach ($options as $value) {  
	if( $value['type'] == 'upload' )
	{
		$upload = wp_handle_upload( $_FILES[ $value['id'] ] );
		if( isset( $upload['url'] ) )
		{
			update_option( $value['id'], $upload['url'] );
		}
	}
    elseif( isset( $_REQUEST[ $value['id'] ] ) )
	{
		update_option( $value['id'], $_REQUEST[ $value['id'] ]  );
	}
}

And just before the switch case ends, and after

		 case "checkbox":  
	 ?>  
	   
	 <div class="rm_input rm_checkbox">  
		 <label for="<?php echo $value['id']; ?>"><?php echo $value['name']; ?></label>  
	   
	 <?php if(get_option($value['id'])){ $checked = "checked=\"checked\""; }else{ $checked = "";} ?>  
	 <input type="checkbox" name="<?php echo $value['id']; ?>" id="<?php echo $value['id']; ?>" value="true" <?php echo $checked; ?> />  
	   
		 <small><?php echo $value['desc']; ?></small><div class="clearfix"></div>  
	  </div>  
	 <?php break;

Add

	 case "upload":
	 ?>
	 <div class="rm_input rm_upload">
		<?php if($img = get_option($value['id'])){ echo "<img src='$img' />"; ?>  
		<label for="<?php echo $value['id']; ?>"><?php echo $value['name']; ?></label>  
		<input type="file" name="<?php echo $value['id'] ?>" size="40" />
		<small><?php echo $value['desc']; ?></small><div class="clearfix"></div>  
	</div>
	 <?php
	 break;

Please send me a message from my profile incase you have any problems with this.

Solution - 2

Hi Edwin, it's very late here, and at a glance it looks like Utkarsh may have provided a solution, otherwise I would attempt this myself. I know this isnt what you're asking, but here are a couple of suggestions, for what they're worth; 1) Build a child theme of the default Twenty Ten theme. That default theme already includes the ability to upload a header image. With some code changes, I'm sure you could tweak this to your needs. 2) I recently read a very useful sitepoint tutorial, written by jeffrey way, one of the people who run nettuts. It's called Creating Custom Options Pages in wordpress. It shows how to code an image upload. And how to use that option. It's here; http://articles.sitepoint.com/article/wordpress-options-panel Hope this helps.

Wordpress

Related
Need to create a link in admin that uses the WP thickbox - Wordpress Solution
Formatting my Word Document into an HTML E-mail! - Wordpress Solution
Can you convert my comments form to comment_form arrays? - Wordpress Solution
CSS menu issue - Wordpress Solution
Pagination for list of posts by category? - Wordpress Solution

Type:	Code Example
Category:	Coding
Sub Category:	Code Example
Uploaded by:	Admin
Views:	8