Skip to content

Instantly share code, notes, and snippets.

@rxnlabs
Last active July 2, 2022 15:28
Show Gist options
  • Star 10 You must be signed in to star a gist
  • Fork 5 You must be signed in to fork a gist
  • Save rxnlabs/10407269 to your computer and use it in GitHub Desktop.
Save rxnlabs/10407269 to your computer and use it in GitHub Desktop.
WordPress - Add button to TinyMCE editor in WordPress. Great for creating menus so users can add shortcodes without having to remember the syntax
<?php
/*Add this code to your functions.php file of current theme OR plugin file if you're making a plugin*/
//add the button to the tinymce editor
add_action('media_buttons_context','add_my_tinymce_media_button');
function add_my_tinymce_media_button($context){
return $context.=__("
<a href=\"#TB_inline?width=480&inlineId=my_shortcode_popup&width=640&height=513\" class=\"button thickbox\" id=\"my_shortcode_popup_button\" title=\"Add My Shortcode\">Add My Shortcode</a>");
}
add_action('admin_footer','my_shortcode_media_button_popup');
//Generate inline content for the popup window when the "my shortcode" button is clicked
function my_shortcode_media_button_popup(){?>
<div id="my_shortcode_popup" style="display:none;">
<--".wrap" class div is needed to make thickbox content look good-->
<div class="wrap">
<div>
<h2>Insert My Shortcode</h2>
<div class="my_shortcode_add">
<input type="text" id="id_of_textbox_user_typed_in"><button class="button-primary" id="id_of_button_clicked">Add Shortcode</button>
</div>
</div>
</div>
</div>
<?php
}
//javascript code needed to make shortcode appear in TinyMCE edtor
add_action('admin_footer','my_shortcode_add_shortcode_to_editor');
function my_shortcode_add_shortcode_to_editor(){?>
<script>
jQuery('#id_of_button_clicked ').on('click',function(){
var user_content = jQuery('#id_of_textbox_user_typed_in').val();
var shortcode = '[my_shortcode attributes="'+user_content+'"/]';
if( !tinyMCE.activeEditor || tinyMCE.activeEditor.isHidden()) {
jQuery('textarea#content').val(shortcode);
} else {
tinyMCE.execCommand('mceInsertContent', false, shortcode);
}
//close the thickbox after adding shortcode to editor
self.parent.tb_remove();
});
</script>
<?php
}
@tmz1970
Copy link

tmz1970 commented Nov 18, 2014

Thanks!
Also, line 15 is missing the ! for the comment

@officinainformatica
Copy link

awesome code! Perfect!

@lajennylove
Copy link

Last comment was on 2017, now in 2021 still awesome. Thanks.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment