How to Add HTML Button Tags to the WordPress Editor

How to Add HTML Button Tags to the WordPress Editor

The WordPress visual editor is a fine tool for most articles. And it’s only getting better with every subsequent revision. However, not all blog posts are dominated by plaintext. Sometimes when you need to add more complex objects to your posts such as images with specific attributes, I-frames, and most importantly – code, the visual editor starts to lack finesse. For this reason, many individuals prefer to either write or at least modify their code using the HTML editor marked by the “Text” tab.

Using this, content creators can insert very specific HTML tags and style their elements the way they please. Since the visual editor merely guesses what you actually wish to display, there’s a lot of room for error. The HTML editor delivers pinpoint accuracy and I myself use it on a regular basis. However, many individuals find the list of tags above the editor to be somewhat insufficient. These are the buttons that I’m referring to:

we need to add more

Everyone’s needs are different, so the WordPress team has only included those tags which it thinks will be of most value to everyone. However, in the spirit of WordPress’s flexibility, they have also provided us a means of adding custom tags of our own. For example, say you have a specific class that you want to include on specific HTML elements. You can create a WordPress “Quicktag” that provides you with a button outputting any kind of opening and closing tags you want.

Let’s take a look at how to do this using two tags that I regularly use – pre, and div.

Adding Quicktags

Quicktags in the WordPress editor are not generated via PHP, but via JavaScript instead. This means that we won’t be using PHP functions but rather JavaScript ones. Specifically, we’re going to manipulate the object called QTags that gets created whenever its functionality is called for on the editing screen. The JavaScript file responsible for creating QTags is called “quicktags”. So we first check whether or not the “quicktags” JavaScript file is enqueued and ready via:

if (wp_script_is('quicktags'))

Once you’re satisfied that the script has been loaded, we use the following Javascript function below to generate a new button. In this example, I’m creating a “pre” tag

QTags.addButton( 'pre_code', 'pre', '<pre>', '</pre>', '' , 'Pre tag', 1 );

This calls the “addButton” function of Qtags to add a new button. You can get the complete documentation of the function on the WordPress Codex page. Only the first two arguments are required, namely the HTML ID and the string to be displayed on the button. The next two arguments provide the opening and closing tags. The one after that deals with something called an “accesskey” and has been deprecated, so I leave it blank, and the “Pre tag” is the pop-up that appears when you hover over the button. Finally, we have the “priority” number which indicates the position at which you want the button to appear. Putting all of this together, we have the final piece of code here:

function add_pre_and_div_quicktags() {
if (wp_script_is('quicktags')){
?>
<script type="text/javascript">
QTags.addButton( 'pre_code', 'pre', '<pre>', '</pre>', '' , 'Pre tag', 1 );
QTags.addButton( 'div_code', 'div code', '<div class="divSourceCode">', '</div>', '',
 'Div for code', 1 );
</script>
<?php
}
}
add_action( 'admin_print_footer_scripts', 'add_pre_and_div_quicktags' );

I hook into the ” admin_print_footer_scripts” action tag and output a piece of JavaScript code – note how I close the PHP tags in between and reopen them for the ending brackets. You can add this either to a functions.php file or any place where you insert custom PHP code. After I save my changes, I get the following output on my HTML editor:

pre and div tags added

And you can see below that pressing the “div” button outputs the opening <div> complete with my custom class and everything.

div tag working

For those who constantly need to create special custom HTML tags for large parts of their posts, the Quicktags functionality is tremendously useful.

4 Comments on “How to Add HTML Button Tags to the WordPress Editor”!

  1. Avatar

    Hi, i was searching all over the place how could i add a “search and replace” function into the text editor, but could not find that anywhere. Do you know how do that?

  2. Thank you. i have been searching for 3 hours on internet for this code finally i found your code i just add function.php in theme dir (not in quicktags)

    i add a line in your code that is what i need

    wrapper in your code. and it is working. the others that i found on internet are not working. but urs is working thank you very much.

    is there any way to add this in visual editor?

    i add just this code for selected text

    QTags.addButton( 'pre_code', 'pre', '', '', '' , 'Pre tag', 1 );
    QTags.addButton( 'pre_code', 'precode', '', '', '' , 'Pre tag', 1 );
    QTags.addButton( 'div_code', 'div code', '', '', '',
    'Div for code', 1 );

    <?php
    }
    }
    add_action( 'admin_print_footer_scripts', 'add_pre_and_div_quicktags' );

  3. Thank you. i have been searching for 3 hours on internet for this
    code finally i found your code i just add function.php in theme dir (not
    in quicktags)

    i add a line in your code that is what i need

    wrapper in your code. and it is working. the
    others that i found on internet are not working. but urs is working
    thank you very much.

    is there any way to add this in visual editor?
    /*
    Thank you. i have been searching for 3 hours on internet for this code finally i found your code i just add function.php in theme dir (not in quicktags)

    i add a line in your code that is what i need

    wrapper in your code. and it is working. the others that i found on internet are not working. but urs is working thank you very much.

    is there any way to add this in visual editor?

    i add just this code for selected text

    QTags.addButton( 'pre_code', 'pre', '', '', '' , 'Pre tag', 1 );
    QTags.addButton( 'pre_code', 'precode', '', '', '' , 'Pre tag', 1 );
    QTags.addButton( 'div_code', 'div code', '', '', '',
    'Div for code', 1 );

    <?php
    }
    }
    add_action( 'admin_print_footer_scripts', 'add_pre_and_div_quicktags' );
    */

Leave a Reply

This Website is Hosted by

Powered by RamNode

Disclosure: We receive a compensation from some of the companies whose products or services are presented on our website.