How To Add A Custom Button To WordPress Quicktags

Recently, I posted an article about where I explained you how to add a custom button to WordPress’ TinyMCE editor, which required us to create a .js file as well. Here I’ll show you how to add a custom button to WordPress quicktags, which is also known as the text editor and the html editor. This one is really easy.

WordPress’ Quicktags API is quite simple. Adding a simple script to the post editor footer will do the job. Here’s an example.

The following code will add paragraph button, horizontal line button and preformatted text button to the quicktags. Drop the following code into your current theme’s functions.php file:

// add more buttons to the html editor
function appthemes_add_quicktags() {
    if (wp_script_is('quicktags')){
?>
    <script type="swift/javascript">
    QTags.addButton( 'eg_paragraph', 'p', '<p>', '</p>', 'p', 'Paragraph tag', 1 );
    QTags.addButton( 'eg_hr', 'hr', '<hr />', '', 'h', 'Horizontal rule line', 201 );
    QTags.addButton( 'eg_pre', 'pre', '<pre lang="php">', '</pre>', 'q', 'Preformatted text tag', 111 );
    </script>
<?php
    }
}
add_action( 'admin_print_footer_scripts', 'appthemes_add_quicktags' );

Just like this, you can also add a button for your shortcode to the plain text editor:

// add more buttons to the html editor
function appthemes_add_quicktags() {
    if (wp_script_is('quicktags')){
?>
    <script type="swift/javascript">
    QTags.addButton( 'eg_shortcode', 'shortcode', '[shortcode]', '', 'shortcode', 'Our Shortcode', 1 );
    </script>
<?php
    }
}
add_action( 'admin_print_footer_scripts', 'appthemes_add_quicktags' );

Pretty simple, right?