Last active
August 29, 2015 14:11
-
-
Save chriskoelle/35f7f8b644bbf70d16f2 to your computer and use it in GitHub Desktop.
Add a button above TinyMCE to generate a shortcode
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?php | |
/** | |
* Create a button that generates a shortcode to be added to TinyMCE. | |
* | |
* @todo Add an option to change the template file path. | |
* Add the ability to specify what admin pages the button is displayed on. | |
*/ | |
class NH_Shortcode_Generator { | |
private $form_id = null; | |
private $opts = array(); | |
private $defaults = array( | |
'button_text' => 'Add Shortcode', | |
'button_icon' => 'dashicons-plus-alt', | |
'shortcode' => false | |
); | |
public function __construct($args) { | |
$this->opts = wp_parse_args( $args, $this->defaults ); | |
// Verify that shortcode is valid | |
if(!$this->shortcode || !shortcode_exists($this->shortcode)) return false; | |
$this->form_id = sanitize_html_class( 'shortcode_popup_' . $this->shortcode ); | |
add_action( 'media_buttons_context', array($this, 'add_button') ); | |
add_action( 'admin_footer', array($this, 'popup_content') ); | |
} | |
/** | |
* Add button above TinyMCE | |
* | |
* @param string HTML for the media buttons section. | |
* @return string HTML containing the new button. | |
*/ | |
public function add_button($context) { | |
$context .= sprintf('<a class="button thickbox" title="%s" href="#TB_inline?width=480&inlineId=%s"><span class="wp-media-buttons-icon dashicons %s" style="width:auto; margin-left:0;"></span> %s</a>', | |
$this->button_text, | |
$this->form_id, | |
$this->button_icon, | |
$this->button_text | |
); | |
return $context; | |
} | |
/** | |
* Create the popup form using template parts | |
*/ | |
public function popup_content() { | |
?> | |
<div id="<?php echo $this->form_id; ?>" style="display:none;"> | |
<h2><?php echo $this->button_text; ?></h2> | |
<div class="form-body"> | |
<?php get_template_part( 'templates/shortcode-popup', $this->shortcode ); ?> | |
</div> | |
<button type="button" class="button-primary" id="button-<?php echo $this->shortcode; ?>"><?php echo $this->button_text; ?></button> | |
<a class="button" href="#" onclick="tb_remove(); return false;" style="margin-left:10px;">Cancel</a> | |
<script> | |
jQuery(function($) { | |
var opts = <?php echo json_encode($this->opts); ?>; | |
var btn = '#button-'+opts.shortcode; | |
var content = false; | |
var s_code = ''; | |
$(document).on('click', btn, function(e) { | |
e.preventDefault(); | |
var atts = ''; | |
$(this).parent().find('.form-body').find('input, textarea, select').each(function() { | |
var name = $(this).attr('name'); | |
var val = $(this).val().trim(); | |
if(val.trim() === '') continue; | |
if(name === 'content') { | |
content = $(this).val(); | |
continue; | |
} | |
if( $(this).val() !== '' ) { | |
atts += ' ' + name + '="' + $(this).val() + '"'; | |
} | |
}); | |
s_code = '['+opts.shortcode + atts + ']'; | |
window.send_to_editor(); | |
}); | |
}); | |
</script> | |
</div> | |
<?php | |
} | |
/** | |
* Magic Functions!! | |
*/ | |
public function __set($name, $value) { | |
$this->opts[$name] = $value; | |
} | |
public function __get($name) { | |
if (array_key_exists($name, $this->opts)) { | |
return $this->opts[$name]; | |
} | |
return null; | |
} | |
} |
Sample Usage:
new NH_Shortcode_Generator(array(
'shortcode' => 'experiences',
'button_icon' => 'dashicons-nametag',
'button_text' => 'Add Experiences'
));
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Sample Popup Form
Save file as shortcode-popup-{SHORTCODENAME}.php within a templates folder in your theme root