Delete Image in Custom Options WordPress
- SOLVED
I have developed a custom options page that allows the user to upload up to 10 images to be used in a slider. I have got this to work no problem. However, I am having a hell of time getting it set up so the user can delete any of the images they do not want any more.
Here's my code that handles the options page:
// Adds Store Hompage option under Appearance in the CMS
add_action('admin_menu', 'create_store_theme_pages_page');
function create_store_theme_pages_page() {
add_pages_page('Storefront Options', 'Storefront', 'editor', 'number-4-studios', 'build_options_page');
}
function build_options_page() { ?>
<div class="wrap theme-options">
<div class="icon32" id="icon-tools"> <br /> </div>
<h2>Storefront Options</h2>
<p>Take control of your storefront, by adding your content and customizing your display.</p>
<form method="post" action="" enctype="multipart/form-data">
<?php settings_fields('store_options'); ?>
<?php do_settings_sections('number-4-studios'); ?>
<p class="submit">
<input name="Submit" type="submit" class="button-primary" value="<?php esc_attr_e('Save Changes'); ?>" />
</p>
</form>
</div><!-- .wrap -->
<?php }
add_action('admin_init', 'register_and_build_fields');
function register_and_build_fields() {
register_setting('store_options', 'store_options', 'validate_setting');
add_settings_section('main_section', 'Main Options', 'section_cb', 'number-4-studios');
add_settings_field('intro', 'Store Introduction', 'store_intro_setting', 'number-4-studios', 'main_section');
add_settings_field('why', 'Why Choose Your Store?', 'why_store_setting', 'number-4-studios', 'main_section');
add_settings_section('slider_section', 'Slideshow Images', 'section_cb', 'number-4-studios');
add_settings_field('slider_image1', 'Image 1:', 'slider_image1_setting', 'number-4-studios', 'slider_section');
add_settings_field('slider_image2', 'Image 2:', 'slider_image2_setting', 'number-4-studios', 'slider_section');
add_settings_field('slider_image3', 'Image 3:', 'slider_image3_setting', 'number-4-studios', 'slider_section');
add_settings_field('slider_image4', 'Image 4:', 'slider_image4_setting', 'number-4-studios', 'slider_section');
add_settings_field('slider_image5', 'Image 5:', 'slider_image5_setting', 'number-4-studios', 'slider_section');
add_settings_field('slider_image6', 'Image 6:', 'slider_image6_setting', 'number-4-studios', 'slider_section');
add_settings_field('slider_image7', 'Image 7:', 'slider_image7_setting', 'number-4-studios', 'slider_section');
add_settings_field('slider_image8', 'Image 8:', 'slider_image8_setting', 'number-4-studios', 'slider_section');
add_settings_field('slider_image9', 'Image 9:', 'slider_image9_setting', 'number-4-studios', 'slider_section');
add_settings_field('slider_image10', 'Image 10:', 'slider_image10_setting', 'number-4-studios', 'slider_section');
add_settings_section('contact_section', 'Contact Information', 'section_cb', 'number-4-studios');
add_settings_field('phone_number', 'Phone Number:', 'phone_number_setting', 'number-4-studios', 'contact_section');
add_settings_field('email', 'Email Address:', 'email_setting', 'number-4-studios', 'contact_section');
add_settings_field('contact_info', 'Contact Information:', 'contact_info_setting', 'number-4-studios', 'contact_section');
add_settings_field('location_map', 'Location Map:', 'location_map_setting', 'number-4-studios', 'contact_section');
add_settings_section('social_section', 'Social Networking', 'section_cb', 'number-4-studios');
add_settings_field('facebookicon', 'Turn on <strong>Facebook</strong> Icon?', 'sfacebook_icon_setting', 'number-4-studios', 'social_section');
add_settings_field('facebook', 'Facebook Page URL:', 'sfacebook_url_setting', 'number-4-studios', 'social_section');
add_settings_field('twittericon', 'Turn on <strong>Twitter</strong> Icon?', 'stwitter_icon_setting', 'number-4-studios', 'social_section');
add_settings_field('twitter', 'Twitter Profile URL:', 'stwitter_url_setting', 'number-4-studios', 'social_section');
add_settings_field('youtubeicon', 'Turn on <strong>YouTube</strong> Icon?', 'syoutube_icon_setting', 'number-4-studios', 'social_section');
add_settings_field('youtube', 'YouTube Page URL:', 'syoutube_url_setting', 'number-4-studios', 'social_section');
}
// Store Intro Content
function store_intro_setting() {
$options = get_option('store_options');
echo "<textarea name='store_options[intro]'>{$options['intro']}</textarea>";
}
// Why Choose Store Content
function why_store_setting() {
$options = get_option('store_options');
echo "<textarea name='store_options[why]'>{$options['why']}</textarea>";
}
//*****************************************************//
//* Slider Images *************************************//
// Slider Image 1
function slider_image1_setting() {
$options = get_option('store_options');
echo '<input type="file" name="slider1" size="50" class="slider" />';
if ($options['slider1']) {
echo '<a id="slider1" href="' . $options['slider1'] . '"><img src="' . $options['slider1'] . '" width="76px" height="50px" /></a>
<input class="slider button" type="submit" name="delete" value="Delete Slide 1" />';
} else {
echo '<img src="' . get_bloginfo('stylesheet_directory') . '/images/no-image.gif" />';
}
}
// Slider Image 2
function slider_image2_setting() {
$options = get_option('store_options');
echo '<input type="file" name="slider2" size="50" class="slider" />';
if ($options['slider2'] != '') {
echo '<img src="' . $options['slider2'] . '" width="76px" height="50px" />';
} else {
echo '<img src="' . get_bloginfo('stylesheet_directory') . '/images/no-image.gif" />';
}
}
// Slider Image 3
function slider_image3_setting() {
$options = get_option('store_options');
echo '<input type="file" name="slider3" size="50" class="slider" />';
if ($options['slider3'] != '') {
echo '<img src="' . $options['slider3'] . '" width="76px" height="50px" />';
} else {
echo '<img src="' . get_bloginfo('stylesheet_directory') . '/images/no-image.gif" />';
}
}
// Slider Image 4
function slider_image4_setting() {
$options = get_option('store_options');
echo '<input type="file" name="slider4" size="50" class="slider" />';
if ($options['slider4'] != '') {
echo '<img src="' . $options['slider4'] . '" width="76px" height="50px" />';
} else {
echo '<img src="' . get_bloginfo('stylesheet_directory') . '/images/no-image.gif" />';
}
}
// Slider Image 5
function slider_image5_setting() {
$options = get_option('store_options');
echo '<input type="file" name="slider5" size="50" class="slider" />';
if ($options['slider5'] != '') {
echo '<img src="' . $options['slider5'] . '" width="76px" height="50px" />';
} else {
echo '<img src="' . get_bloginfo('stylesheet_directory') . '/images/no-image.gif" />';
}
}
// Slider Image 6
function slider_image6_setting() {
$options = get_option('store_options');
echo '<input type="file" name="slider6" size="50" class="slider" />';
if ($options['slider6'] != '') {
echo '<img src="' . $options['slider6'] . '" width="76px" height="50px" />';
} else {
echo '<img src="' . get_bloginfo('stylesheet_directory') . '/images/no-image.gif" />';
}
}
// Slider Image 7
function slider_image7_setting() {
$options = get_option('store_options');
echo '<input type="file" name="slider7" size="50" class="slider" />';
if ($options['slider7'] != '') {
echo '<img src="' . $options['slider7'] . '" width="76px" height="50px" />';
} else {
echo '<img src="' . get_bloginfo('stylesheet_directory') . '/images/no-image.gif" />';
}
}
// Slider Image 8
function slider_image8_setting() {
$options = get_option('store_options');
echo '<input type="file" name="slider8" size="50" class="slider" />';
if ($options['slider8'] != '') {
echo '<img src="' . $options['slider8'] . '" width="76px" height="50px" />';
} else {
echo '<img src="' . get_bloginfo('stylesheet_directory') . '/images/no-image.gif" />';
}
}
// Slider Image 9
function slider_image9_setting() {
$options = get_option('store_options');
echo '<input type="file" name="slider9" size="50" class="slider" />';
if ($options['slider9'] != '') {
echo '<img src="' . $options['slider9'] . '" width="76px" height="50px" />';
} else {
echo '<img src="' . get_bloginfo('stylesheet_directory') . '/images/no-image.gif" />';
}
}
// Slider Image 10
function slider_image10_setting() {
$options = get_option('store_options');
echo '<input type="file" name="slider10" size="50" class="slider" />';
if ($options['slider10'] != '') {
echo '<img src="' . $options['slider10'] . '" width="76px" height="50px" />';
} else {
echo '<img src="' . get_bloginfo('stylesheet_directory') . '/images/no-image.gif" />';
}
}
// Phone number
function phone_number_setting() {
$options = get_option('store_options');
echo '<input type="text" name="store_options[phone_number]" value="' . $options['phone_number'] . '" size="50" />';
}
// Email
function email_setting() {
$options = get_option('store_options');
echo '<input type="text" name="store_options[email]" value="' . $options['email'] . '" size="50" />';
}
// Contact Information
function contact_info_setting() {
$options = get_option('store_options');
echo "<textarea name='store_options[contact_info]'>{$options['contact_info']}</textarea>";
}
// Location Map
function location_map_setting() {
$options = get_option('store_options');
echo '<input type="file" name="location_map" size="50" class="slider" />';
if ($options['location_map'] != '') {
echo '<img src="' . $options['location_map'] . '" width="76px" height="50px" />';
} else {
echo '<img src="' . get_bloginfo('stylesheet_directory') . '/images/no-image.gif" />';
}
}
//*****************************************************//
//* Social Networking *********************************//
// Facebook icon
function sfacebook_icon_setting() {
$options = get_option('store_options');
$checked = '';
if ($options[facebookicon] == 'yes') {
$checked = ' CHECKED';
}
echo '<input type="checkbox" name="store_options[facebookicon]" value="yes"' . $checked . ' /> Yes';
}
// Facebook URL
function sfacebook_url_setting() {
$options = get_option('store_options');
echo 'http://<input type="text" name="store_options[facebook]" value="' . $options['facebook'] . '" size="50" />';
}
// Twitter icon
function stwitter_icon_setting() {
$options = get_option('store_options');
$checked = '';
if ($options[twittericon] == 'yes') {
$checked = ' CHECKED';
}
echo '<input type="checkbox" name="store_options[twittericon]" value="yes"' . $checked . ' /> Yes';
}
// Twitter URL
function stwitter_url_setting() {
$options = get_option('store_options');
echo 'http://<input type="text" name="store_options[twitter]" value="' . $options['twitter'] . '" size="50" />';
}
// YouTube icon
function syoutube_icon_setting() {
$options = get_option('store_options');
$checked = '';
if ($options[youtubeicon] == 'yes') {
$checked = ' CHECKED';
}
echo '<input type="checkbox" name="store_options[youtubeicon]" value="yes"' . $checked . ' /> Yes';
}
// YouTube URL
function syoutube_url_setting() {
$options = get_option('store_options');
echo 'http://<input type="text" name="store_options[youtube]" value="' . $options['youtube'] . '" size="50" />';
}
function section_cb() {}
function validate_setting($store_options) {
$keys = array_keys($_FILES);
$i = 0;
foreach ( $_FILES as $image ) {
// if a file was uploaded
if ($image['size']) {
// is it an image?
if (preg_match('/(jpg|jpeg|png|gif)$/i', $image['type'])) {
$override = array('test_form' => false);
$file = wp_handle_upload($image, $override);
$store_options[$keys[$i]] = $file['url'];
}
else {
wp_die('No image was uploaded');
}
}
else {
$options = get_option('store_options');
$store_options[$keys[$i]] = $options[$keys[$i]];
}
$i++;
}
return $store_options;
}
add_action('admin_head', 'admin_register_head');
function admin_register_head() {
$url = get_bloginfo('stylesheet_directory') . '/css/admin-styles.css';
echo "<link rel='stylesheet' href='$url' />";
}
If you see here I have created a delete button, I just can't fetch the post data to tell it to delete if the button is pressed. Hopefully there is a hook we can utilize that I haven't figured out.
// Slider Image 1
function slider_image1_setting() {
$options = get_option('store_options');
echo '<input type="file" name="slider1" size="50" class="slider" />';
if ($options['slider1']) {
echo '<a id="slider1" href="' . $options['slider1'] . '"><img src="' . $options['slider1'] . '" width="76px" height="50px" /></a>
<input class="slider button" type="submit" name="delete" value="Delete Slide 1" />';
} else {
echo '<img src="' . get_bloginfo('stylesheet_directory') . '/images/no-image.gif" />';
}
}
So if you can figure this our or have a better implementation by all means let me know.
Cheers
Answers (6)
Nick Parsons answers:
I'd suggest modifying each of the slider setting functions like this:
// Slider Image 1
function slider_image1_setting() {
$options = get_option('store_options');
echo '<input type="file" name="slider1" size="50" class="slider" />';
if ($options['slider1']) {
echo '<a id="slider1" href="' . $options['slider1'] . '"><img src="' . $options['slider1'] . '" width="76px" height="50px" /></a>
<a class="slider button" href="?deleteSlide=slider1">Delete Slide 1</a>';
} else {
echo '<img src="' . get_bloginfo('stylesheet_directory') . '/images/no-image.gif" />';
}
}
Note the <a> element that serves as the delete button.
Then modify the build_options_page function like this:
function build_options_page() {
if(isset($_GET['deleteSlide'])){
$options = get_option('store_options');
$delete = $_GET['deleteSlide'];
unset($options[$delete]);
update_option('store_options',$options);
}
?>
<div class="wrap theme-options">
<div class="icon32" id="icon-tools"> <br /> </div>
<h2>Storefront Options</h2>
<p>Take control of your storefront, by adding your content and customizing your display.</p>
<form method="post" action="" enctype="multipart/form-data">
<?php settings_fields('store_options'); ?>
<?php do_settings_sections('number-4-studios'); ?>
<p class="submit">
<input name="Submit" type="submit" class="button-primary" value="<?php esc_attr_e('Save Changes'); ?>" />
</p>
</form>
</div><!-- .wrap -->
<?php }
That should do it :)
<strong>Edit:</strong>
I see what you mean about the lingering GET variables. I can see two ways around it. Probably the best way would be to use POST like you said, and go back to your original submit button:
<input class="slider button" type="submit" name="delete" value="Delete Slide 1" />';
Then modify my addition to the build_options_page function like this:
if ( isset($_POST['delete']) ) {
$options = get_option('store_options');
$delete = str_replace(' ', 'r', strtolower(substr($_POST['delete'], 7)));
unset($options[$delete]);
update_option('store_options',$options);
}
If that doesn't work, another way would be to add an extra conditional to see if the save button has been clicked before we delete the image:
if ( isset($_GET['deleteSlide']) && !isset($_POST['Submit']) ){
$options = get_option('store_options');
$delete = $_GET['deleteSlide'];
unset($options[$delete]);
update_option('store_options',$options);
}
Oleg Butuzov answers:
name="delete[imageid]"
or
name="delete[imagename]"
----
isn't solution?
Bill Johnson comments:
I need it to remove the options entry from the database.
Oleg Butuzov comments:
delete_option($optionkey);
Cosmin Popovici answers:
How about using something like the unlink() function?
<?php
$myFile = $options['slider1'];
unlink($myFile);
?>
Bill Johnson comments:
This will not remove the image from the options in the database.
Maor Barazany answers:
To remove an option from the database you have this function:
<?php delete_option($name); ?>
So, you may use something like this:
<?php delete_option($options['slider1']); ?>
To remove slider1 option from the DB, and so on
rilwis answers:
I think in the slider_image1_setting() and similar functions, you show the delete button like this (I saw you did this already for 1st image):
<input class="slider button" type="submit" name="delete" value="Delete Slide 1" />
And in the validate_setting() function, you should do this:
foreach ( $_FILES as $image ) {...}
if (isset($_REQUEST['delete'])) {
switch ($_REQUEST['delete']) {
case 'Delete Slide 1':
unset($store_options['slider1']);
break;
case 'Delete Slide 2':
unset($store_options['slider2']);
break;
}
}
return ...
Bill Johnson comments:
I like the idea of this. However, the form action is to options.php. I tried using the code you provided and it does not result in anything. It doesn't even make it past the if statement.