How To Add A Custom Button To WordPress Editor

In this WordPress Tutorial I will explain how to add a new custom quick tag button in WordPress editor.
You can use this method in your theme or plugin to add a new quick tag button in WordPress editor.

Default Quick Tags Buttons

By default WordPress has following quick tags buttons.
image

Now we are going to a new quick tag button
Add following codes at the bottom of functions.php of your theme or plugin's main php file.

<?php
// Add New Custom Quicktags
function gelcode_add_quicktags() {
if (wp_script_is('quicktags')){
?>
<script type="text/javascript">
QTags.addButton( 'eg_gelcode', 'GelCode', '<gelcode>', '</gelcode>', 'GelCode', 'My New custom Tag', 201 );
</script>
<?php
}
}
add_action( 'admin_print_footer_scripts', 'gelcode_add_quicktags' );
?>

Result

After adding above codes, here is the result.
image

Similarly, you can use this method to add your custom shortcodes buttons in WordPress editor. Like below code will add button for shortcode [box]

<?php
// Add New Custom Quicktags
function box_add_quicktags() {
if (wp_script_is('quicktags')){
?>
<script type="text/javascript">
QTags.addButton( 'eg_box', 'Box', '[box]', '[/box]', 'Box', 'Box shortcode', 202 );
</script>
<?php
}
}
add_action( 'admin_print_footer_scripts', 'box_add_quicktags' );
?>

Result

image

Hope this article helped you.