When you work with Text Editor, more often than not you will need quicktag buttons to help you generate simple HTML tags which you use on a regular basis. WordPress already has a few of standard elements which will add tags for italic, bold or help you in creating links, for example. But what if you need some other HTML tag which is not listed in the buttons? You can add one yourself.
Let’s say you need a DIV tag which centers your text or you often use one of the heading tags for your titles. If you use them on a regular basis, you would have to manually type the tag every time you want it to appear and you think it would be easier just to add a button which contains everything you need.
But in this article we aren’t going to talk about those plugins. Instead, here you can find the entire code you need for manually adding custom quicktag button:
- Open functions.php file
- Copy and paste the following code:
- Save changes
The part you want to change in order to customize your button is a QTags.addButton API:
QTags.addButton( id, display, arg1, arg2, access_key, title, priority, instance );
Don’t worry; it isn’t that hard and the following descriptions will help you:
- id: This the HTML ID of your button which you can use later to recognize it; make it simple
- display: Text which will be shown on your button
- arg1: Starting part of your tag or a callback which is being executed once you click on the button
- arg2: Ending part of the tag; leave empty if your tag does not need one
- access_key: Shortcut to your button; leave empty if you don’t need one
- title: The HTML title value for the button
- priority: A number which tells in which position your button will appear. 1 – 9 = first, 11 – 19 = second, 21 – 29 = third, etc.
- instance: Limit the button to a specific instance of quicktags
QTags.addButton( ‘eg_paragraph’, ‘p’, ‘<p>’, ‘</p>’, ‘p’, ‘Paragraph tag’, 1 );
QTags.addButton( ‘eg_hr’, ‘hr’, ‘<hr />’, ”, ‘h’, ‘Horizontal rule line’, 201 );
QTags.addButton( ‘eg_pre’, ‘pre’, ‘<pre lang=”php”>’, ‘</pre>’, ‘q’, ‘Preformatted text tag’, 111 );
But hey, who says it is the HTML element you have to put in the button. Maybe it is a word or a phrase you need to write over and over and again. Yeah, you can put one into a button. In that case, all you have to do is write the word/phrase into ‘arg1’ and leave ‘arg2’ empty:
QTags.addButton( ‘my_word’, ‘My Word’, ‘This is my sentence’, ”, ‘w’, ‘My Word’, 1 );