Zelf heb ik vaak een media selector nodig bij het ontwikkelen van themes en/of plugins in WordPress. Hieronder staat een snippet die dit allemaal demonstreert. Deze code is ook in zijn geheel te knippen en te plakken als plugin.

De plugin zal een menu aanmaken (CMSE) en zal een pagina weergeven waar de functionaliteit van de Custom media selector wordt weergegeven.

<?php
/*
Plugin Name: Custom media selector example
Plugin URI: http://www.atomicon.nl
Description: This is an example on how to use the media selector on the admin page
Author: Yvo van Dillen
Version: 1.0
Author URI: http://www.atomicon.nl/about
*/

/**
 * Register the admin menu
 */
function cmse_register_admin_menu() {
	add_menu_page('Custom media selector example',
				  'CMSE',
				  'manage_options',
				  'cmse',
				  'cmse_admin_page'
	);
} // end of cmse_register_admin_menu
add_action( 'admin_menu', 'cmse_register_admin_menu' );

/**
 * Register the admin scripts
 */
function cmse_register_admin_scripts() {
    wp_enqueue_media();
} //end of cmse_register_admin_scripts
add_action('admin_enqueue_scripts', 'cmse_register_admin_scripts');

/**
 * Display the admin page
 */
function cmse_admin_page() {
?>

<!--HTML-->
<div class="wrap">

	<div id="icon-options-general" class="icon32"></div>
	<h2>Custom media selector example</h2>
	<div id="poststuff">

		<label for="image">
			<input id="image" type="text" class="regular-text" name="image" value="" />
			<input id="select-image-button" class="button-secondary" type="button" value="Select Image..." />
			<p class="description">Enter a URL or select an image</p>
		</label>

	</div>

</div>

<!--Javascript-->
<script>

function atomicon_media_selector( selector, callback ) {

	var custom_uploader; //wp.media object

	// have we called wp_enqueue_media and added jQuery?
	if (typeof(wp.media) == 'undefined' || typeof(jQuery) == 'undefined') {
		alert('Please call wp_enqueue_media() and wp_enqueue_script("jquery") in your "admin_enqueue_scripts" action');
		return;
	}

	// When clicked on the button
    jQuery(selector).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: true
        });

        //When a file is selected, grab the URL and set it as the text field's value
        custom_uploader.on('select', function() {

			custom_uploader.state().get('selection').map( function (attachment) {
				attachment = attachment.toJSON();
				callback(attachment);
			} );

        });

        //Open the uploader dialog
        custom_uploader.open();
    });
}

jQuery(document).ready(function($){

	atomicon_media_selector('#select-image-button', function(attachment){
		console.debug( attachment );
		$('#image').val( attachment.url );
	});

});

</script>

<?php
} // end of cmse_admin_page

Installatie methode 1

1. Kopieer de code die hierboven staat en plaats deze met FTP op je site onder: /wp-content/plugins/custom-media-selector.php
2. Log in op je site en navigeer naar: Plugins » Geïnstalleerde plugins
3. Activeer “Custom media selector example” en er zal een CMSE menu verschijnen in het menu

Installatie methode 2

1. Download de plugin en sla deze op ergens op je computer.
2. Log in op je site en navigeer naar: Plugins » Nieuwe plugin » Uploaden
3. Selecteer de plugin die je net heeft ge-download en kies “Installeren”
4. Navigeer naar: Plugins » Geïnstalleerde plugins
5. Activeer “Custom media selector example” en er zal een CMSE menu verschijnen in het menu