Wordpress: Upload Image in Admin Options Page

Question

I am developing my first wordpress plugin. It only needs to allow a user to change a logo in a custom template and change a color scheme in the custom template.

I have made an admin options page and now want to add a field to allow a user to upload an image. How can I upload an image to the wp-content/uploads folder. So far, I have this within a table:

<td><input name="logo_image" type="file" id="logo_image" value="" /></td>

Is this the right approach? If so, how do I direct the file to the right folder? Doesn't wordpress have it's own way of handling file uploads?

It will create the upload media directory as empty,but is not rendering the default media popup section — user4970006
– user4970006, Commented Jun 3, 2015 at 14:05

Community · Accepted Answer · 2017-05-23 12:02:18Z

24

Add this code to your global custom option function.

if(function_exists( 'wp_enqueue_media' )){
    wp_enqueue_media();
}else{
    wp_enqueue_style('thickbox');
    wp_enqueue_script('media-upload');
    wp_enqueue_script('thickbox');
}

<p><strong>Header Logo Image URL:</strong><br />
                <img class="header_logo" src="<?php echo get_option('header_logo'); ?>" height="100" width="100"/>
                <input class="header_logo_url" type="text" name="header_logo" size="60" value="<?php echo get_option('header_logo'); ?>">
                <a href="#" class="header_logo_upload">Upload</a>

</p>    


<script>
    jQuery(document).ready(function($) {
        $('.header_logo_upload').click(function(e) {
            e.preventDefault();

            var custom_uploader = wp.media({
                title: 'Custom Image',
                button: {
                    text: 'Upload Image'
                },
                multiple: false  // Set this to true to allow multiple files to be selected
            })
            .on('select', function() {
                var attachment = custom_uploader.state().get('selection').first().toJSON();
                $('.header_logo').attr('src', attachment.url);
                $('.header_logo_url').val(attachment.url);

            })
            .open();
        });
    });
</script>

More info

or

Media uploader in theme and plugin

enter image description here

edited May 23, 2017 at 12:02

CommunityBot

11 silver badge

answered Apr 5, 2014 at 4:28

Ravi Patel

5,2412 gold badges27 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Adeerlike Over a year ago

not sure where to add this... The admin menu is a php file, do i simply add the JS part ??

Ravi Patel Over a year ago

this one depend on your function for your setting. how to create look hear codex.wordpress.org/Creating_Options_Pages

Adeerlike Over a year ago

from what i understand - wordpress recommends using the customizer API instead... developer.wordpress.org/themes/advanced-topics/customizer-api

Magesh Kumaar · Accepted Answer · 2014-04-05 02:39:02Z

2

You can use the inbuilt function of wordpress

<?php wp_handle_upload( $file, $overrides, $time ); ?>

This will automatically move the file to the uploads folder

Or

You can write your own PHP function.

Additional Details can be found here -> Wordpress File Upload

answered Apr 5, 2014 at 2:39

Magesh Kumaar

1,4672 gold badges12 silver badges30 bronze badges

Collectives™ on Stack Overflow

Wordpress: Upload Image in Admin Options Page

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related