How to add Media Selector to add_settings_field in WordPress?

Question

How can I add Media Selector to add_settings_field in WordPress?

This the extra fields I added to Settings -> General page in WordPress:

/**
 * Add more input fields in general settings.
 */
add_action('admin_init', 'extended_general_settings');
function extended_general_settings() {
    add_settings_section(
        'other_site_details', // Section ID
        'Other Site Details', // Section Title
        'extended_general_settings_description_callback', // Callback
        'general' // What Page?  This makes the section show up on the General Settings Page
    );

    add_settings_field( // Content
        'meta_description', // Option ID
        'Meta Description', // Label
        'extended_generals_setting_textarea_callback', // !important - This is where the args go!
        'general', // Page it will be displayed (General Settings)
        'other_site_details', // Name of our section
        array( // The $args
            'meta_description' // Should match Option ID
        )
    );

    add_settings_field( // Keywords
        'meta_keywords', // Option ID
        'Meta Keywords', // Label
        'extended_generals_setting_textarea_callback', // !important - This is where the args go!
        'general', // Page it will be displayed (General Settings)
        'other_site_details', // Name of our section
        array( // The $args
            'meta_keywords' // Should match Option ID
        )
    );

    add_settings_field( // Telephone
        'telephone', // Option ID
        'Telephone', // Label
        'extended_general_settings_textbox_callback', // !important - This is where the args go!
        'general', // Page it will be displayed (General Settings)
        'other_site_details', // Name of our section
        array( // The $args
            'telephone' // Should match Option ID
        )
    );

    add_settings_field( // Email
        'email', // Option ID
        'Email', // Label
        'extended_general_settings_textbox_callback', // !important - This is where the args go!
        'general', // Page it will be displayed
        'other_site_details', // Name of our section (General Settings)
        array( // The $args
            'email' // Should match Option ID
        )
    );

    register_setting('general','meta_description', 'esc_attr');
    register_setting('general','meta_keywords', 'esc_attr');
    register_setting('general','telephone', 'esc_attr');
    register_setting('general','email', 'esc_attr');
}

function extended_general_settings_description_callback() { // Section Callback
    echo '<p>Add additional site info below here:</p>';
}

function extended_general_settings_textbox_callback($args) {  // Textbox Callback
    $option = get_option($args[0]);
    echo '<input type="text" id="'. $args[0] .'" name="'. $args[0] .'" value="' . $option . '" class="regular-text ltr"/>';
}

function extended_generals_setting_textarea_callback($args) {  // Textbox Callback
    $option = get_option($args[0]);
    echo '<textarea rows="6" cols="40" id="'. $args[0] .'" name="'. $args[0] .'" class="regular-text ltr">' . $option . '</textarea>';
}

But I want to add the media selector so that I can select an image from the media library where I have uploaded all my images to.

Is this possible?

Answer 1

Yeah it's definitely possible. I usually use a text input coupled with the builtin WordPress media uploader insert the image URL of an image in the media library to said text field.

First, make sure to enqueue the media uploader script, as well as your own custom script (which in my case I have called my-admin.js):

add_action('admin_enqueue_scripts', 'my_admin_scripts');
function my_admin_scripts() {
    wp_enqueue_media();
    wp_register_script('my-admin-js', '/the-url-location-for/my-admin.js', array('jquery'));
    wp_enqueue_script('my-admin-js');
}

Add the following input on your settings page (you can add it the same way you added your others):

<input id="upload_image" type="text" size="36" name="ad_image" value=<?PHP echo get_option('ad_image'); ?> /> 
<input id="upload_image_button" class="button" type="button" value="Upload Menu" />

Then you can add the following script inside my-admin.js:

jQuery(document).ready(function($){
    var custom_uploader;
    $('#upload_image_button').click(function(e) {
        e.preventDefault();
        //If the uploader object has already been created, reopen the dialog
        if (custom_uploader) {
            custom_uploader.open();
            return;
        }
        //Extend the wp.media object
        custom_uploader = wp.media.frames.file_frame = wp.media({
            title: 'Choose Image',
            button: {
                text: 'Choose Image'
            },
            multiple: false
        });
        //When a file is selected, grab the URL and set it as the text field's value
        custom_uploader.on('select', function() {
            attachment = custom_uploader.state().get('selection').first().toJSON();
            $('#upload_image').val(attachment.url);
        });
        //Open the uploader dialog
        custom_uploader.open();
    });
});

I have personally used this all over the place, however all of this code is based on the example provided on webmaster-source.com.