How to Use WordPress Uploader into your theme

When we develop a WordPress Theme for our clients then it would be great to customize all the website design according to clients requirement. In this article, we are talking about WordPress Uploader, one of the good feature of WordPress. This media uploader helps you to re-size your uploaded images, and even more useful features to increase your productivity to finish a task.

First of all, we have to add a file with option/value pair in the “options” table. And “add_option()” is the secure way to add an option. We have to check if the field is not created into the “options” table then we have to create it with “add_option()”.

$omnizzOption = get_option("omnizz_logo");

// Determine if field is not in Database
if($omnizzOption === FALSE) add_option("omnizz_logo");

Now we finished the creating field into the table, and move on the Upload Logo button.

<?php $omnizzOption = get_option("omnizz_logo"); ?>
<form id="form-options" action="" type="post" enctype="multipart/form-data">
<table>
    <tr>
        <td valign='top'><label>Logo Image : </label></td>
        <td valign='top'>
            <input type='text' id='logo_url' readonly='readonly' name='logo' size='40' value='" . esc_url( $omnizzOption ) . "' />"
            <input id='upload_button' type='button' class='button' value='<?php _e( 'Upload Logo', 'omnizz' ); ?>' />
            <br />
            <em>size should be 188x69</em>
        </td>
    </tr>
    <tr>
        <td colspan="2">
           <input name="submit" id="submit_option" type="submit" class="button button-primary" value="<?php esc_attr_e('Save Settings', 'omnizz'); ?>" />
        </td>
    <tr>
</table>
</form>

Necessary files for our WordPress Uploader:

Now we have to add the necessary JavaScript and CSS for our wordpress uploader that is thikbox(JS), thikbox(CSS), Media Upload (JS) and Your Own JS. Do the following to Load all these files.

 
// Load WordPress Uploader Script
function omnizz_options_enqueue_scripts() {
    wp_register_script( 'omnizz-upload', get_template_directory_uri() .'/init/js/omnizz-upload.js', array('jquery','media-upload','thickbox') );

    wp_enqueue_script('jquery');
    wp_enqueue_script('thickbox');
    wp_enqueue_style('thickbox');

    wp_enqueue_script('media-upload');
    wp_enqueue_script('omnizz-upload');

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

Now just one step ahead to load our uploader, just open the file “omnizz-upload.js” and do the following:

jQuery(document).ready(function($) {
    $('#upload_button').click(function() {
        tb_show('Upload a logo', 'media-upload.php?type=image&TB_iframe=true&post_id=0', false);
        return false;
    });

    // Display the Image link in TEXT Field
    window.send_to_editor = function(html) {
        var image_url = $('img',html).attr('src');
        $('#logo_url').val(image_url);
        tb_remove();
    }
});

Now just click on the “Upload Logo” button, if you find to get the wordpress uploader window according to screen-shoot then everything goes fine.

Now we just have to save the appeared image link into our created option, and “update_option()” do that for us.

if( isset($_POST['submit']) ) update_option("omnizz_logo", $_POST['logo']);

Display Logo on the front page:

After uploading the logo image now we have to control the logo image from the back-end of our website.

<?php $omnizzOption = get_option('omnizz_logo'); ?>

<?php if ( $omnizzOption != '' ): ?>
<img src="<?php echo $omnizzOption; ?>" />
<?php endif; ?>

Now we have successfully use wordpress uploader. Please do not hesitate to contact me for any suggestion or update through comments or contact form.