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?

enter image description here

7 Answers 7


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


  • This is amazing, I have been searching for this thank you
    – JasonDavis
    Commented Sep 28, 2011 at 10:19
  • The plugin is broken now. So I googled a bit, and found this: http://wordpress.org/extend/plugins/post-editor-buttons-fork/. Hope that helps.
    – its_me
    Commented Jan 3, 2012 at 13:25
  • @its_me α I just realized all the plugins similar to this are broke with the new WP, even the Fork one does not work for me
    – JasonDavis
    Commented Jan 4, 2012 at 3:12
  • @jasondavis but the fork plugin worked flawlessly for me. Aren't you looking for the button in the HTML editor tab? (The button won't show in the visual editor tab!)
    – its_me
    Commented Jan 4, 2012 at 3:22
  • I only use HTML tab, I found a better solution though, I am going to add to my new question here wordpress.stackexchange.com/questions/37849/…
    – JasonDavis
    Commented Jan 4, 2012 at 4:37

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
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("#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" />');

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
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' );

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.

  • I fell in love with the plugin mentioned above for adding these custom buttons, after viewing source, I just realized the plugin works the same way as your code here, I love it even more now, thank you very much, a MUST HAVE for any wordpress function file!
    – JasonDavis
    Commented Oct 11, 2011 at 1:55
  • The new Wordpress 3.3 has broke this along with all the plugins that do this, if you happened to find another way would really appreciate an update if you get a chance
    – JasonDavis
    Commented Jan 4, 2012 at 3:16
  • The old edbutton solution works in 3.4-alpha. Just to let you know that the code is still in there. But possible is depreciated, so it would be better to use the QTags solution. Commented Jan 8, 2012 at 1:09
  • Could not find the documention in codex, possibly not added yet. But found the QTags js file in wp-includes/js/quicktags.dev.js. edButton function is simply calling the QTags.addButton, so that is why it still works for me. The JS file has some good documentation in it. Commented Jan 8, 2012 at 1:15

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 ) {

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



Here is my example of how to add buttons & & to editor text wp

add this code to functions.php and save file after check your editor text

i hope help u ^^

/* Add Text Editor Buttons
function urban_add_quicktags() {
//check to see if the 'quicktags' script is in use to avoid errors
 if (wp_script_is('quicktags')){
 <script type="text/javascript">
 QTags.addButton( 'h4-subheader', 'SubHeader4', '<h4>', '</h4>', '4', 'Sub Header', 1 );
 QTags.addButton( 'h3-subheader', 'SubHeader3', '<h3>', '</h3>', '3', 'Sub Header', 2 );
 QTags.addButton( 'bold', '<b>', '<b>', '</b>', '3', 'Paraphraph', 3 );
//Print to admin footer
add_action( 'admin_print_footer_scripts', 'urban_add_quicktags' );

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



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.


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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.