Saving values in media upload option in WordPress theme settings

Question

I have a new theme I'm working on and I really need 3 image upload options which trigger the popup media upload box.

I know the customizer is recommended now but it only really makes sense to me to use that for styles (ie. colours and fonts) and still have a theme settings section which is what I have done.

After trying many solutions, Rushabh Dave's solution here works a treat, nearly perfect but not quite...

My issue is I get the popup box, select the image and I then have the URL to that image but when I hit save, the page refreshes but my image isn't saved, the URL disappears therefore I can't pick it up the front end.

I'm not sure what I may be doing wrong.

In functions.php

<?php
// jQuery
wp_enqueue_script('jquery');
// This will enqueue the Media Uploader script  
wp_enqueue_media();
?>
<div>
<label for="image_url">Image</label>
<input type="text" name="image_url" id="image_url" class="regular-text" />
<input type="button" name="upload-btn" id="upload-btn" class="button-secondary" value="Upload Image">

</div>
<script type="text/javascript">
jQuery(document).ready(function($){
$('#upload-btn').click(function(e) {
    e.preventDefault();
    var image = wp.media({ 
        title: 'Upload Image',
        // mutiple: true if you want to upload multiple files at once
        multiple: false
    }).open()
    .on('select', function(e){
        // This will return the selected image from the Media Uploader, the result is an object
        var uploaded_image = image.state().get('selection').first();
        // We convert uploaded_image to a JSON object to make accessing it easier
        // Output to the console uploaded_image
        console.log(uploaded_image);
        var image_url = uploaded_image.toJSON().url;
        // Let's assign the url value to the input field
        $('#image_url').val(image_url);
    });
});
});
</script>

On the front-end

<div><img src="<?php echo $options['image_url']; ?>" /></div>

Answer 1

First you want to enqueue your scripts on the backend only. In functions.php add

add_action( 'after_setup_theme', 'yourthemeslug_theme_setup' );
if ( ! function_exists( 'yourthemeslug_theme_setup' ) ) {
    /**
     * Sets up theme defaults and registers support for various WordPress features.
     *
     * Note that this function is hooked into the after_setup_theme hook, which
     * runs before the init hook. The init hook is too late for some features, such
     * as indicating support for post thumbnails.
     *
     * @since  1.0.0
     */
    function yourthemeslug_theme_setup() {

        add_action( 'admin_enqueue_scripts', 'yourthemeslug_backend_scripts' );
    }
}

if ( ! function_exists( 'yourthemeslug_backend_scripts' ) ) {
    /**
     * Enqueue back end scripts and styles.
     *
     * @param  string $hook Hook string to check the page, so that not all scripts are loaded
     *                      unnecessarily on every page.
     * @since 1.0.0
     */
    function yourthemeslug_backend_scripts( $hook ) {
        if ( 'your_subpage_slug' === $hook ) {
            wp_enqueue_media();
            wp_enqueue_script( 'yourthemeslug_image_upload', get_template_directory_uri(). '/js/admin.js', array('jquery') );
        }
    }
}

Or just add to existing after_setup_theme hook, and function that hooks to admin_enqueue_scripts.

The your_subpage_slug in the yourthemeslug_backend_scripts function has to be replaced by the the string that describes your custom built subpage. The best way to see what it is is to do a print_r($hook); before the if condition and see what the string will be (in the inspector it should be right under the body tag).

In your page you should have

<div>
    <label for="image_url">Image</label>
    <div class="image"><img src="<?php echo esc_url( $image ); ?>" /></div>
    <input type="text" name="image_url" id="image_url" class="regular-text" />
    <input type="button" name="upload-btn" id="upload-btn" class="button-secondary" value="Upload Image">
</div>

Where $image is

$image = ( isset( $options['image_url'] ) && '' !== $options['image_url'] ) ? $options['image_url'] : '';

The value you need to fetch from the database.

So when one click on #upload-btn the media uploader has to open.

In the admin.js file that we enqueued add

jQuery( document ).ready(function( $) {
    "use strict";

    $(document).on('click', '#upload-btn', upload_image_button);

    function upload_image_button(e) {
        e.preventDefault();
        var $input_field = $('#image_url');
        var $image = $('.image');
        var custom_uploader = wp.media.frames.file_frame = wp.media({
            title: 'Add Image',
            button: {
                text: 'Add Image'
            },
            multiple: false
        });
        custom_uploader.on('select', function() {
            var attachment = custom_uploader.state().get('selection').first().toJSON();
            $input_field.val(attachment.url);
            $image.html('').html('<img width="254" src="'+attachment.url+'" />');
        });
        custom_uploader.open();
    }

});

This triggers the media upload. But you still need to save it.

In the page where you are saving the options, you need to check if the input field with the image url is set, is not empty and then you can save that to your options (I'd include a nonce check for a safe measure)

if ( isset($_POST['image_url'] ) && '' !== $_POST['image_url'] ) {
    update_option( $_POST['image_url'], 'image_url' );
}

Now I don't know how you are saving these options, since you haven't specified that, but there should be some kind of hook you're using when saving them. Just place this in there, and it should do it.

Answer 2

     <?php
 add_action( 'after_setup_theme', 'yourthemeslug_theme_setup' );
 if ( ! function_exists( 'yourthemeslug_theme_setup' ) ) {
 /**
 * Sets up theme defaults and registers support for various WordPress features.
 *
 * Note that this function is hooked into the after_setup_theme hook, which
 * runs before the init hook. The init hook is too late for some features, such
 * as indicating support for post thumbnails.
 *
 * @since  1.0.0
 */
 function yourthemeslug_theme_setup() {

    add_action( 'admin_enqueue_scripts', 'yourthemeslug_backend_scripts' );
 }
 }

 if ( ! function_exists( 'yourthemeslug_backend_scripts' ) ) {
 /**
 * Enqueue back end scripts and styles.
 *
 * @param  string $hook Hook string to check the page, so that not all scripts are loaded
 *                      unnecessarily on every page.
 * @since 1.0.0
 */
 function yourthemeslug_backend_scripts( $hook ) {
    if ( 'theme_settings' === $hook ) {
        wp_enqueue_media();
        wp_enqueue_script( 'yourthemeslug_image_upload', UTTER_TEMPPATH . '/js/admin.js', array('jquery') );
    }
 }
 }
 ?>
 <div>
 <label for="image_url">Image</label>
 <div class="image"><img src="<?php echo esc_url( $image ); ?>" /></div>
 <input type="text" name="image_url" id="image_url" class="regular-text" />
 <input type="button" name="upload-btn" id="upload-btn" class="button-secondary" value="Upload Image">
 </div>

 <?php
 if ( isset($_POST['image_url'] ) && '' !== $_POST['image_url'] ) {
 update_option( $_POST['image_url'], 'image_url' );
 }
 ?>