I’m having a problem with my custom options page in WordPress. The issue concerns the media uploader I have put a while ago. It works properly, but when re-saving options the url in the field, where the file was uploaded, disappears and no image is displayed in my html code. This happens just when I save options two consecutive times in the same options page. The url should remain in the field, but this does not happen.
The code of the media uploader to put in functions.php is:
//Media Uploader Scripts
wp_enqueue_script('media-upload');
wp_enqueue_script('thickbox');
wp_register_script('my-upload', get_bloginfo( 'stylesheet_directory' ) . '/js/uploader.js', array('jquery','media-upload','thickbox'));
wp_enqueue_script('my-upload');
//Media Uploader Style
wp_enqueue_style('thickbox');
if (isset($_GET['page']) && $_GET['page'] == 'my_plugin_page') {
add_action('admin_print_scripts', 'my_admin_scripts');
add_action('admin_print_styles', 'my_admin_styles');
}
Where the content of the uploader.js is
jQuery(document).ready(function() {
jQuery('#upload_image_button').click(function() {
formfield = jQuery('#upload_image').attr('name');
tb_show('', 'media-upload.php?type=image&TB_iframe=true');
return false;
});
window.send_to_editor = function(html) {
imgurl = jQuery('img',html).attr('src');
jQuery('#upload_image').val(imgurl);
tb_remove();
}
});
And this was the code added to functions.php
<?php
add_action( 'init', 'th_admin_init' );
add_action( 'admin_menu', 'th_options_page_init' );
function th_admin_init() {
$options = get_option( "th_theme_options" );
if ( empty( $options ) ) {
$options = array(
'th_intro' => 'Some intro text for the home page',
'th_tag_class' => false,
'th_ga' => false,
'upload_image' => ''
);
add_option( "th_theme_options", $options, '', 'yes' );
}
}
function th_options_page_init() {
$theme_data = get_theme_data( TEMPLATEPATH . '/style.css' );
$options_page = add_theme_page( $theme_data['Name']. ' Theme options', $theme_data['Name']. ' Opzioni', 'edit_theme_options', 'theme-options', 'th_options_page' );
add_action( "load-{$options_page}", 'th_load_options_page' );
}
function th_load_options_page() {
if ( $_POST["th-options-submit"] == 'Y' ) {
check_admin_referer( "th-options-page" );
th_save_theme_options();
$url_parameters = isset($_GET['tab'])? 'updated=true&tab='.$_GET['tab'] : 'updated=true';
wp_redirect(admin_url('themes.php?page=theme-options&'.$url_parameters));
exit;
}
}
function th_save_theme_options() {
global $pagenow;
$options = get_option( "th_theme_options" );
if ( $pagenow == 'themes.php' && $_GET['page'] == 'theme-options' ){
if ( isset ( $_GET['tab'] ) )
$tab = $_GET['tab'];
else
$tab = 'homepage';
switch ( $tab ){
case 'general' :
$options['th_tag_class'] = $_POST['th_tag_class'];
break;
case 'footer' :
$options['th_ga'] = $_POST['th_ga'];
break;
case 'homepage' :
$options['th_intro'] = $_POST['th_intro'];
$options['upload_image'] = $_POST['upload_image'];
break;
}
}
if( !current_user_can( 'unfiltered_html' ) ){
if ( $options['th_ga'] )
$options['th_ga'] = stripslashes( esc_textarea( wp_filter_post_kses( $options['th_ga'] ) ) );
if ( $options['th_intro'] )
$options['th_intro'] = stripslashes( esc_textarea( wp_filter_post_kses( $options['th_intro'] ) ) );
if ( $options['upload_image'] )
$options['upload_image'] = stripslashes( esc_textarea( wp_filter_post_kses( $options['upload_image'] ) ) );
}
$updated = update_option( "th_theme_options", $options );
}
function th_admin_tabs( $current = 'homepage' ) {
$tabs = array( 'homepage' => 'Home', 'general' => 'Generali', 'footer' => 'Footer' );
$links = array();
echo '<div id="icon-themes" class="icon32"><br></div>';
echo '<h2 class="nav-tab-wrapper">';
foreach( $tabs as $tab => $name ){
$class = ( $tab == $current ) ? ' nav-tab-active' : '';
echo "<a class='nav-tab$class' href='?page=theme-options&tab=$tab'>$name</a>";
}
echo '</h2>';
}
function th_options_page() {
global $pagenow;
$options = get_option( "th_theme_options" );
$theme_data = get_theme_data( TEMPLATEPATH . '/style.css' );
//Media Uploader Scripts
wp_enqueue_script('media-upload');
wp_enqueue_script('thickbox');
wp_register_script('my-upload', get_bloginfo( 'stylesheet_directory' ) . '/js/uploader.js', array('jquery','media-upload','thickbox'));
wp_enqueue_script('my-upload');
//Media Uploader Style
wp_enqueue_style('thickbox');
if (isset($_GET['page']) && $_GET['page'] == 'theme_options') {
add_action('admin_print_scripts', 'my_admin_scripts');
add_action('admin_print_styles', 'my_admin_styles');
}
?>
<div class="wrap">
<h2><?php echo $theme_data['Name']; ?> Opzioni</h2>
<?php
if ( 'true' == esc_attr( $_GET['updated'] ) ) echo '<div class="updated" ><p>Modifiche salvate.</p></div>';
if ( isset ( $_GET['tab'] ) ) th_admin_tabs($_GET['tab']); else th_admin_tabs('homepage');
?>
<div id="poststuff">
<form method="post" action="<?php admin_url( 'themes.php?page=theme-options' ); ?>">
<?php
wp_nonce_field( "th-options-page" );
if ( $pagenow == 'themes.php' && $_GET['page'] == 'theme-options' ){
if ( isset ( $_GET['tab'] ) ) $tab = $_GET['tab'];
else $tab = 'homepage';
echo '<table class="form-table">';
switch ( $tab ){
case 'general' :
?>
<tr>
<th><label for="th_tag_class">Tags with CSS classes:</label></th>
<td>
<input id="th_tag_class" name="th_tag_class" type="checkbox" <?php if ( $options["th_tag_class"] ) echo 'checked="checked"'; ?> value="true" />
<span class="description">Output each post tag with a specific CSS class using its slug.</span>
</td>
</tr>
<?php
break;
case 'footer' :
?>
<tr>
<th><label for="th_ga">Insert tracking code:</label></th>
<td>
<textarea id="th_ga" name="th_ga" cols="60" rows="5"><?php echo esc_html( stripslashes( $options["th_ga"] ) ); ?></textarea><br/>
<span class="description">Enter your Google Analytics tracking code:</span>
</td>
</tr>
<?php
break;
case 'homepage' :
?>
<tr>
<th><label for="th_intro">Introduction</label></th>
<td>
<textarea id="th_intro" name="th_intro" cols="60" rows="5" ><?php echo esc_html( stripslashes( $options["th_intro"] ) ); ?></textarea><br/>
<span class="description">Enter the introductory text for the home page:</span>
</td>
</tr>
<tr>
<th><label for="upload_image">Upload Image</label></th>
<td>
<input id="upload_image" type="text" size="36" name="upload_image" value="" />
<input id="upload_image_button" type="button" class="button-secondary" value="Carica Immagine" />
<br /><span class="description">Enter an URL or upload an image for the banner.</span>
</td>
</tr>
<?php
break;
}
echo '</table>';
}
?>
<p class="submit" style="clear: both;">
<input type="submit" name="Submit" class="button-primary" value="Update options" />
<input type="hidden" name="th-options-submit" value="Y" />
</p>
</form>
</div>
</div>
<?php
}
?>
Anyone can help me?
Thank you in advance!
———— SOLUTION ————
It was not a DB problem. It was just an HTML problem, because the value element inside the input named upload_image was setted on "". So change the code, inside the form in the function.php file, from:
<input id="upload_image" type="text" size="36" name="upload_image" value="" />
to:
<input id="upload_image" type="text" size="36" name="upload_image" value="<?php echo esc_html( stripslashes( $options["upload_image"] ) ); ?>" />
