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.

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.

1
2
3
4
5
6
7
8
9
10
11
12
13

<?php
// Add New Custom Quicktag button
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.

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

1
2
3
4
5
6
7
8
9
10
11
12
13

<?php
// Add New Custom Quicktag button
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

Hope this article helped you.

Default Quick Tags Buttons

Result

Result

Related Posts

Leave a Reply Cancel reply