Bootstrap Snippet wp admin setting image up load using HTML Javascript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<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");
    }
?>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
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();
    });
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"wp admin setting image up load"
Bootstrap 4.1.1 Snippet by amit0511989

Related: See More

Questions / Comments:

"wp admin setting image up load" Bootstrap 4.1.1 Snippet by amit0511989

Related: See More

Questions / Comments:

"wp admin setting image up load"
Bootstrap 4.1.1 Snippet by amit0511989