php code:
<?php
function themename_admin_enqueue_scripts() {
wp_register_style( 'themename-admin-style', get_template_directory_uri() . '/css/themename-admin.css', array(), '1.0', 'all' );
wp_enqueue_style( 'themename-admin-style' );
}
add_action( 'admin_enqueue_scripts', 'themename_admin_enqueue_scripts' );
// ===================== btn =====================
function themename_add_btn_button() {
// Don't bother doing this stuff if the current user lacks permissions
if ( ! current_user_can('edit_posts') && ! current_user_can('edit_pages') )
return;
if ( get_user_option( 'rich_editing' ) == 'true' ) { // add only in Rich Editor mode
add_filter( 'mce_external_plugins', 'themename_add_btn_tinymce_plugin' );
add_filter( 'mce_buttons', 'themename_register_btn_button' );
}
}
function themename_register_btn_button( $buttons ) {
array_push( $buttons, "|", "btn" );
return $buttons;
}
function themename_add_btn_tinymce_plugin( $plugin_array ) { // load the TinyMCE plugin - plugin_embed.js
$plugin_array['btn'] = get_template_directory_uri() . '/js/shortcode_btn.js';
return $plugin_array;
}
function themename_btn_refresh_mce( $ver ) {
$ver += 3;
return $ver;
}
// init process for button control
add_filter( 'tiny_mce_version', 'themename_btn_refresh_mce' );
add_action( 'init', 'themename_add_btn_button' );
function themename_btn_shortcode( $atts ) {
$return = '';
extract( shortcode_atts( array(
'text' => '',
'link' => ''
), $atts ) );
$return .= '<a class="btn btn-custom" href="'.$link.'">'.$text.'</a>';
return $return;
}
add_shortcode( 'btn', 'themename_btn_shortcode' );
?>
javascript code:
// closure to avoid namespace collision
(function(){
// creates the plugin
tinymce.create('tinymce.plugins.btn', {
init : function(ed, url) { // creates control instances based on the control's id
ed.addButton('btn', {
title : 'Button Shortcode', // title of the button
image : url+'/../img/tinymce_btn.png', // path to the button's image
onclick : function() { // triggers the thickbox
tb_show( 'Tabs Shortcode', '#TB_inline?width=600&height=400&inlineId=btn-form' );
jQuery('#TB_ajaxContent').css({'width': '640', 'height': (jQuery('#TB_window').height()-50)+'px'});
jQuery(window).resize(function(){
jQuery('#TB_ajaxContent').css({'width': '640', 'height': (jQuery('#TB_window').height()-50)+'px'});
});
}
});
}
});
tinymce.PluginManager.add('btn', tinymce.plugins.btn); // registers the plugin
jQuery(function(){ // executes this when the DOM is ready
// creates a form to be displayed everytime the button is clicked
// you should achieve this using AJAX instead of direct html code like this
var form = jQuery('<div id="btn-form">\
<p class="popup_submit_wrap"><input type="button" id="btn-submit" class="button-primary" value="Insert Button" name="submit" /></p>\
<div class="popup_content">\
<p><strong><label for="btn-text">Button text</label></strong><br>\
<input type="text" class="widefat" id="btn-text" name="text" value="" /></p>\
<p><strong><label for="btn-link">Button link</label></strong><br>\
<input type="text" class="widefat" id="btn-link" name="link" value="" /></p>\
</div>\
</div>');
var popup_content = form.find('.popup_content');
form.appendTo('body').hide();
form.find('#btn-submit').click(function(){ // handles the click event of the submit button
var shortcode = '[btn';
var btn_text = popup_content.find('#btn-text').val();
var btn_link = popup_content.find('#btn-link').val();
shortcode += ' text="'+btn_text+'"';
shortcode += ' link="'+btn_link+'"';
shortcode += ']';
tinyMCE.activeEditor.execCommand('mceInsertContent', 0, shortcode); // inserts the shortcode into the active editor
tb_remove(); // closes Thickbox
});
});
})()
css code:
/* ============== shortcodes ============== */
.popup_submit_wrap {
position: fixed;
display: block;
margin: -2px 0 0!important;
width: 625px;
height: 30px;
padding: 20px 0!important;
text-align: right;
background-color: rgba(255,255,255,0.7);
border-bottom: 1px solid #cfcfcf;
z-index: 20;
}
.popup_content {
position: relative;
padding: 85px 0 20px;
}