How to Add HTML Button Tags to the WordPress Editor
Posted onThe 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:
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:
And you can see below that pressing the “div” button outputs the opening <div> complete with my custom class and everything.
For those who constantly need to create special custom HTML tags for large parts of their posts, the Quicktags functionality is tremendously useful.
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?
Try the TinyMCE Editor: https://wordpress.org/plugins/ultimate-tinymce/
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 textQTags.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' );
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. theothers 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 textQTags.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' );
*/