Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

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

share|improve this question
add comment

6 Answers 6

up vote 1 down vote accepted

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/

share|improve this answer
    
This is amazing, I have been searching for this thank you –  jasondavis Sep 28 '11 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 Jan 3 '12 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 Jan 4 '12 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 Jan 4 '12 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 Jan 4 '12 at 4:37
show 1 more comment

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.

share|improve this answer
    
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 Oct 11 '11 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 Jan 4 '12 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. –  emrahgunduz Jan 8 '12 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. –  emrahgunduz Jan 8 '12 at 1:15
add comment

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 ) {
share|improve this answer
add comment

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

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

share|improve this answer
add comment

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

share|improve this answer
add comment

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.

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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