Adding Image Upload Ability To Options Panel WordPress
- SOLVED
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!
Answers (2)
Utkarsh Kukreti answers:
Change
<form method="post">
to
<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'] ); } }
to
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.
Edwin comments:
Hi Utkarsh,
Message send.
Duncan O'Neill answers:
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.
Edwin comments:
Hi Duncan,
Thank you for your reply,
I've worked with the sitepoint article, but I had problems integrating the upload function from it into the linked tutorial in my question. The child theme route will probably get me stuck again.
A straightforward solution is more the kind of option I'm looking for right now.