Custom Media Buttons Button

media_buttons.php

<?php

add_action( 'admin_footer', 'wp_doin_mce_popup' );
add_action( 'media_buttons', 'wp_doin_media_buttons' );

/**
 * Utility to add MCE Popup fired by custom Media Buttons button
 * 
 * @hook admin_footer
 */
function wp_doin_mce_popup() {
	?>
	<script>
		function InsertContainer() {
			// let's obtain the values of the fields
			var content = jQuery('#wp_doin_content_container').val();
			var heading = jQuery('#wp_doin_heading').val();
			var subheading = jQuery('#wp_doin_sheading').val();

			window.send_to_editor("[div heading='"+heading+"' subheading='"+ subheading +"']" +content + '[/div]');
		}
	</script>

	<div id="wp_doin_div_shortcode" style="display:none;">
		<div class="wrap wp_doin_shortcode">
			<div>
				<div style="padding:15px 15px 0 15px;">
					<h3 style="color:#5A5A5A!important; font-family:Georgia,Times New Roman,Times,serif!important; font-size:1.8em!important; font-weight:normal!important;">Sample shortcode</h3>
					<p>The following is a sample shortcode window. It creates a div element with heading, subheading and a content.</p>
					<hr />
					<div class="field-container">
						<div class="label-desc">
							<label for="wp_doin_heading">Heading</label>
						</div>
						<div class="content">
							<input type="text" name="heading" id="wp_doin_heading" />
						</div>
					</div>
					<div class="field-container">
						<div class="label-desc">
							<label for="wp_doin_sheading">Subheading</label>
						</div>
						<div class="content">
							<input type="text" name="sheading" id="wp_doin_sheading" />
						</div>
					</div>
					<div class="field-container">
						<div class="label-desc">
							<label for="wp_doin_content_container">Content</label>
						</div>
						<div class="content">
							<textarea name="content" id="wp_doin_content_container" class="widefat"></textarea>
						</div>
					</div>
				</div>

				<hr />
				<div style="padding:15px;">
					<input type="button" class="button-primary" value="Insert Shortcode" onclick="InsertContainer();"/>&nbsp;&nbsp;&nbsp;
					<a class="button" href="#" onclick="tb_remove();
							return false;">Cancel</a>
				</div>
			</div>
		</div>
	</div>
	<?php
}

/**
 * Utility to add MCE Popup button to the Media Buttons section which lies directly 
 * above the Visual / Text Editor
 * 
 * @hook media_buttons
 */
function wp_doin_media_buttons() {
	?>
	<style>
		.wp-core-ui a.editr_media_link {
			padding-left: 0.4em;
		}

		.label-desc {
			width: 27%;
			margin-right: 3%;
			float: left;
			font-weight: bold;
			text-align: right;
			padding-top: 2px;
		}
		.wp_doin_shortcode .content {
			float: left;
			width: 70%;
		}
		.field-container {
			margin: 5px 0;
			display: inline-block;
			width: 100%;
		}
		#TB_ajaxContent h3 {
			margin-bottom: 20px;
		}
	</style>
	<a href = "#TB_inline?width=480&height=500&inlineId=wp_doin_div_shortcode" class = "button thickbox wp_doin_media_link" id = "add_div_shortcode" title = "Sample shortcode">Shortcode</a></li>
	<?php
}