How To Add Custom Tag In wp_editor

Here we will learn about How to add custom tag in wp_editor.

For this, WordPress provides this function QTags.addButton.
QTags.addButton function allows you to include additional buttons in the Text (HTML) mode of the wp_editor.

Here is a syntax of QTags.addButton function:

QTags.addButton( button_id, display_name, start_tag, end_tag, shortcut_key, title, priority, instance );

Parameters:

• button_id (required):  The id for the button.
• display_name (required): Display value for the button.
• start_tag (required): Starting tag for HTML like “<u>”.
• end_tag (optional): Ending tag for HTML like “</u>”.
• shortcut_key (optional): Shortcut key for the button.
• title (optional): Title value for the button.
• priority (optional): Priority of the display button.
• instance (optional): Limit the button to a specific instance.

Here is a small Example:

In this example, I have added an underline tag in wp_editer.

Before:

After add this code:

// add Underline tag to the html editor
function underline_tag_add_quicktags() {
  if ( wp_script_is('quicktags') ){ ?>
  <script type="text/javascript">
    QTags.addButton( 'underline_tag', 'U', '<u>', '</u>', 'underline', 'underline', 20, '' );
  </script>
<?php
  }
}
add_action( 'admin_print_footer_scripts', 'underline_tag_add_quicktags' );

Output: