<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<?php
function my_admin_scripts() {
wp_enqueue_media();
wp_register_script('my-admin-js', theme_url.'/my-admin.js', array('jquery'));
wp_enqueue_script('my-admin-js');
}
add_action( 'admin_enqueue_scripts', 'my_admin_scripts' );
function display_topbar_text()
{
?>
<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" />
<?php
}
function display_theme_panel_fields()
{
add_settings_section("section", "All Settings", null, "theme-options");
add_settings_field("ad_image", "Top Bar", "display_topbar_text", "theme-options", "section");
register_setting("section", "ad_image");
}
?>
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();
});
});
