Add quicktag buttons to the HTML editor

Question

I am trying to figure out how to modify the HTML editor in wordpress; on the image below you can see a screenshot of the editor and the buttons on the top. Is it possible to add new buttons? I would like to add a button that will insert "" tags and some custom short-code tags as well. I know it's not impossible, but does anyone know how to do it?

Answer 1

Download and install HTML Editor Reloaded Plugin and go to setting pages and you can add your own new buttons.

http://wordpress.org/extend/plugins/html-editor-reloaded/

Answer 2

If it's getting too hard and complicated, you can simply add new buttons by using jQuery. Simply clone an existing or create a new button, and append it to the editor's toolbar. You can wrap the javascript with a php function, and run it in the admin footer or something.

Or you can use the edButton function. Here is a dirty and fast written example for adding p and pre buttons.

// Add buttons to html editor
add_action('admin_print_footer_scripts','eg_quicktags');
function eg_quicktags() {
?>
<script type="text/javascript" charset="utf-8">
buttonA = edButtons.length;
edButtons[edButtons.length] = new edButton('ed_paragraph','p','<p>','</p><br />','p');
buttonB = edButtons.length;
edButtons[edButtons.length] = new edButton('ed_pre','pre','<pre lang="php">','</pre>','r');

jQuery(document).ready(function($){
    jQuery("#ed_toolbar").append('<input type="button" value="p" id="ed_paragraph" class="ed_button" onclick="edInsertTag(edCanvas, buttonA);" title="p" />');
    jQuery("#ed_toolbar").append('<input type="button" value="pre" id="ed_pre" class="ed_button" onclick="edInsertTag(edCanvas, buttonB);" title="pre" />');
}); 
</script>
<?php
}

EDIT: In Wordpress 3.3 (and above), the quicktag addition is changed. However, the edButton lazy solution is somehow working, some plugins might cancel it out.

The new and the right way of adding new buttons to html editor is like this :

// Add buttons to html editor
add_action('admin_print_footer_scripts','eg_quicktags');
function eg_quicktags() {
?>
<script type="text/javascript" charset="utf-8">
/* Adding Quicktag buttons to the editor Wordpress ver. 3.3 and above
* - Button HTML ID (required)
* - Button display, value="" attribute (required)
* - Opening Tag (required)
* - Closing Tag (required)
* - Access key, accesskey="" attribute for the button (optional)
* - Title, title="" attribute (optional)
* - Priority/position on bar, 1-9 = first, 11-19 = second, 21-29 = third, etc. (optional)
*/
QTags.addButton( 'eg_paragraph', 'p', '<p>', '</p>', 'p' );
QTags.addButton( 'eg_pre', 'pre','<pre lang="php">', '</pre>', 'q' );
</script>
<?php
}

I don't know if the QTags is added to the Wordpress Codex yet, so I added the required parameters in the comment section of the code.

Answer 3

See the following in wp-includes/js/quicktags.dev.js

/**
     * Main API function for adding a button to Quicktags
     * 
     * Adds qt.Button or qt.TagButton depending on the args. The first three args are always required.
     * To be able to add button(s) to Quicktags, your script should be enqueued as dependent
     * on "quicktags" and outputted in the footer. If you are echoing JS directly from PHP,
     * use add_action( 'admin_print_footer_scripts', 'output_my_js', 100 ) or add_action( 'wp_footer', 'output_my_js', 100 )
     *
     * Minimum required to add a button that calls an external function:
     *     QTags.addButton( 'my_id', 'my button', my_callback );
     *     function my_callback() { alert('yeah!'); }
     *
     * Minimum required to add a button that inserts a tag:
     *     QTags.addButton( 'my_id', 'my button', '<span>', '</span>' );
     *     QTags.addButton( 'my_id2', 'my button', '<br />' );
     *
     * @param id string required Button HTML ID
     * @param display string required Button's value="..."
     * @param arg1 string || function required Either a starting tag to be inserted like "<span>" or a callback that is executed when the button is clicked.
     * @param arg2 string optional Ending tag like "</span>"
     * @param access_key string optional Access key for the button.
     * @param title string optional Button's title="..." 
     * @param priority int optional Number representing the desired position of the button in the toolbar. 1 - 9 = first, 11 - 19 = second, 21 - 29 = third, etc.
     * @param instance string optional Limit the button to a specifric instance of Quicktags, add to all instances if not present.
     * @return mixed null or the button object that is needed for back-compat.
     */             
    qt.addButton = function( id, display, arg1, arg2, access_key, title, priority, instance ) {

Answer 4

This might be helpful to some one as well...

http://scribu.net/wordpress/right-way-to-add-custom-quicktags.html

Answer 5

You need to use the tinymce api to add buttons on the editor http://codex.wordpress.org/TinyMCE_Custom_Buttons

Answer 6

EDIT

Oh, wait: you're using the HTML editor. The below filter is for adding buttons to the Visual editor.

Almost every reference I can find instructs to edit quicktags.js (and is in fact what I used to do), but I do not recommend editing core files. I did find this (completely untested) Plugin that purports to allow for modification/addition of HTML editor quicktag buttons.

ORIGINAL ANSWER

You can add buttons to Row 1, Row 2, or Row 3.

Here is an example of how to add buttons to Row 3:

function mytheme_mce_buttons_row_3( $buttons ) {

    $buttons[] = 'fontselect';
    $buttons[] = 'fontsizeselect';
    $buttons[] = 'code';
    $buttons[] = 'sup';
    $buttons[] = 'sub';
    $buttons[] = 'backcolor';
    $buttons[] = 'separator';
    $buttons[] = 'hr';
    $buttons[] = 'wp_page';

    return $buttons;

}
add_filter( 'mce_buttons_3', 'mytheme_mce_buttons_row_3' );

Obviously, you would use 'mce_buttons_1' to add buttons to Row 1, and 'mce_buttons_2' to add buttons to Row 2.

If you want to add your own, arbitrary button, you need to pass the button markup to the array, rather than just the HTML tag name.