Iâd like to build a simple and clean Options page with two upload fields and a preview of the uploaded images. I tried a lot of frameworks like NHP and UpThemes but they are way to heavy for my purpose (e.g. I donât need several options tabs).
I found this which fits to my needs but I donât know how to add a second upload field. Any help would be appreciated!
<?php
function wptuts_get_default_options() {
$options = array(
'logo' => ''
);
return $options;
}
function wptuts_options_init() {
$wptuts_options = get_option( 'theme_wptuts_options' );
// Are our options saved in the DB?
if ( false === $wptuts_options ) {
// If not, we'll save our default options
$wptuts_options = wptuts_get_default_options();
add_option( 'theme_wptuts_options', $wptuts_options );
}
// In other case we don't need to update the DB
}
// Initialize Theme options
add_action( 'after_setup_theme', 'wptuts_options_init' );
function wptuts_options_setup() {
global $pagenow;
if ('media-upload.php' == $pagenow || 'async-upload.php' == $pagenow) {
// Now we'll replace the 'Insert into Post Button inside Thickbox'
add_filter( 'gettext', 'replace_thickbox_text' , 1, 2 );
}
}
add_action( 'admin_init', 'wptuts_options_setup' );
function replace_thickbox_text($translated_text, $text ) {
if ( 'Insert into Post' == $text ) {
$referer = strpos( wp_get_referer(), 'wptuts-settings' );
if ( $referer != '' ) {
return __('I want this to be my logo!', 'wptuts' );
}
}
return $translated_text;
}
// Add "Options" link to the "Appearance" menu
function wptuts_menu_options() {
//add_theme_page( $page_title, $menu_title, $capability, $menu_slug, $function);
add_theme_page('WPTuts Options', 'Options', 'edit_theme_options', 'wptuts-settings', 'wptuts_admin_options_page');
}
// Load the Admin Options page
add_action('admin_menu', 'wptuts_menu_options');
function wptuts_admin_options_page() {
?>
<div class="wrap">
<div id="icon-themes" class="icon32"><br /></div>
<h2><?php _e( 'Options', 'wptuts' ); ?></h2>
<!-- If we have any error by submiting the form, they will appear here -->
<?php settings_errors( 'wptuts-settings-errors' ); ?>
<form id="form-wptuts-options" action="options.php" method="post" enctype="multipart/form-data">
<?php
settings_fields('theme_wptuts_options');
do_settings_sections('wptuts');
?>
<p class="submit">
<input name="theme_wptuts_options[submit]" id="submit_options_form" type="submit" class="button-primary" value="<?php esc_attr_e('Save Settings', 'wptuts'); ?>" />
<input name="theme_wptuts_options[reset]" type="submit" class="button-secondary" value="<?php esc_attr_e('Reset Defaults', 'wptuts'); ?>" />
</p>
</form>
</div>
<?php
}
function wptuts_options_validate( $input ) {
$default_options = wptuts_get_default_options();
$valid_input = $default_options;
$wptuts_options = get_option('theme_wptuts_options');
$submit = ! empty($input['submit']) ? true : false;
$reset = ! empty($input['reset']) ? true : false;
$delete_logo = ! empty($input['delete_logo']) ? true : false;
if ( $submit ) {
if ( $wptuts_options['logo'] != $input['logo'] && $wptuts_options['logo'] != '' )
delete_image( $wptuts_options['logo'] );
$valid_input['logo'] = $input['logo'];
}
elseif ( $reset ) {
delete_image( $wptuts_options['logo'] );
$valid_input['logo'] = $default_options['logo'];
}
elseif ( $delete_logo ) {
delete_image( $wptuts_options['logo'] );
$valid_input['logo'] = '';
}
return $valid_input;
}
function delete_image( $image_url ) {
global $wpdb;
// We need to get the image's meta ID..
$query = "SELECT ID FROM wp_posts where guid = '" . esc_url($image_url) . "' AND post_type = 'attachment'";
$results = $wpdb -> get_results($query);
// And delete them (if more than one attachment is in the Library
foreach ( $results as $row ) {
wp_delete_attachment( $row -> ID );
}
}
// JavaScript
function wptuts_options_enqueue_scripts() {
wp_register_script( 'wptuts-upload', get_template_directory_uri() .'/wptuts-options/js/wptuts-upload.js', array('jquery','media-upload','thickbox') );
if ( 'appearance_page_wptuts-settings' == get_current_screen() -> id ) {
wp_enqueue_script('jquery');
wp_enqueue_script('thickbox');
wp_enqueue_style('thickbox');
wp_enqueue_script('media-upload');
wp_enqueue_script('wptuts-upload');
}
}
add_action('admin_enqueue_scripts', 'wptuts_options_enqueue_scripts');
function wptuts_options_settings_init() {
register_setting( 'theme_wptuts_options', 'theme_wptuts_options', 'wptuts_options_validate' );
// Add a form section for the Logo
add_settings_section('wptuts_settings_header', __( 'Logo Options', 'wptuts' ), 'wptuts_settings_header_text', 'wptuts');
// Add Logo uploader
add_settings_field('wptuts_setting_logo', __( 'Logo', 'wptuts' ), 'wptuts_setting_logo', 'wptuts', 'wptuts_settings_header');
// Add Current Image Preview
add_settings_field('wptuts_setting_logo_preview', __( 'Logo Preview', 'wptuts' ), 'wptuts_setting_logo_preview', 'wptuts', 'wptuts_settings_header');
}
add_action( 'admin_init', 'wptuts_options_settings_init' );
function wptuts_setting_logo_preview() {
$wptuts_options = get_option( 'theme_wptuts_options' ); ?>
<div id="upload_logo_preview" style="min-height: 100px;">
<img style="max-width:100%;" src="<?php echo esc_url( $wptuts_options['logo'] ); ?>" />
</div>
<?php
}
function wptuts_settings_header_text() {
?>
<p><?php _e( 'Manage Logo Options', 'wptuts' ); ?></p>
<?php
}
function wptuts_setting_logo() {
$wptuts_options = get_option( 'theme_wptuts_options' );
?>
<input type="hidden" id="logo_url" name="theme_wptuts_options[logo]" value="<?php echo esc_url( $wptuts_options['logo'] ); ?>" />
<input id="upload_logo_button" type="button" class="button" value="<?php _e( 'Upload Logo', 'wptuts' ); ?>" />
<?php if ( '' != $wptuts_options['logo'] ): ?>
<input id="delete_logo_button" name="theme_wptuts_options[delete_logo]" type="submit" class="button" value="<?php _e( 'Delete Logo', 'wptuts' ); ?>" />
<?php endif; ?>
<span class="description"><?php _e('Upload an image.', 'wptuts' ); ?></span>
<?php
}
?>