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'm trying to add a custom button or two to the TinyMCE rich text editor. The tutorials I've seen so far are either outdated or explain how to do it with a custom plugin. How can I do this without creating a plugin, perhaps in the functions.php file instead? To be specific, I want to add a "h2" button that will add in a <h2></h2> into the body.

share|improve this question

1 Answer 1

up vote 9 down vote accepted

It is almost code golf, but this is the smallest piece of code that I could up with that will create a button on the Visual editor to turn the current paragraph in a <h2> block.

add_filter( 'tiny_mce_before_init', 'wpse18719_tiny_mce_before_init' );
function wpse18719_tiny_mce_before_init( $initArray )
{
    $initArray['setup'] = <<<JS
[function(ed) {
    ed.addButton('h2', {
        title : 'H2',
        image : 'img/example.gif',
        onclick : function() {
            ed.formatter.toggle( 'h2' );
        }
    });
}][0]
JS;
    return $initArray;
}

add_filter( 'mce_buttons', 'wpse18719_mce_buttons' );
function wpse18719_mce_buttons( $mce_buttons )
{
    $mce_buttons[] = 'h2';
    return $mce_buttons;
}

It is based on a TinyMCE code sample and uses a trick to pass a function as the setup variable (which will not be needed in 3.2 anymore).

To add a button to the HTML editor you can extend the much simpler "quicktags" code by enqueuing this extra Javascript file:

jQuery( function( $ ) {
    var h2Idx = edButtons.length;
    edButtons[h2Idx] = new edButton(
        'ed_h2'  // id
        ,'h2'    // display
        ,'<h2>'  // tagStart
        ,'</h2>' // tagEnd
        ,'2'     // access
    );
    var h2Button = $( '<input type="button" id="ed_h2" accesskey="2" class="ed_button" value="h2">' );
    h2Button.click( function() {
        edInsertTag( edCanvas, h2Idx );
    } );
    // Insert it anywhere you want. This is after the <i> button
    h2Button.insertAfter( $( '#ed_em' ) );
    // This is at the end of the toolbar
    // h2Button.appendTo( $( '#ed_toolbar' ) );
} );
share|improve this answer
    
Farby how you can do the same for the HTML editor? thanks a lot!!! –  Philip May 30 '11 at 18:21
2  
@Philip: It turns out that is very easy. I have added the code you should enqueue as an extra Javascript. –  Jan Fabry May 30 '11 at 19:54
    
you are a genius @Jan Fabry, thanks a lot!!! –  Philip May 31 '11 at 9:19
    
Thanks, the JS block is actually what I needed! –  Mark Ursino Jun 1 '11 at 2:51

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.