Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

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
}
?>
share|improve this question
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Browse other questions tagged or ask your own question.