Adding Custom Buttons to the WordPress HTML Editor

As a WordPress user, you may have noticed that the default HTML editor lacks some of the features that you need for your content. Fortunately, you can add custom buttons to the WordPress HTML editor to make your content creation experience more efficient and productive.

In this post, we will explore how to add custom buttons to the WordPress HTML editor.

In the function.php file or a plugin that is loaded into during the run time, add the following PHP code snippet. Here, we use an example to add 2 tags wiki and Markdown.

function wplm_add_quicktags2() {
  wp_add_inline_script(
    'quicktags',
    "QTags.addButton('eg_yadawiki', 'wiki', '[yadawiki link=\"\" show=\"\"]', '', 'wiki', 'wiki', 200);
     QTags.addButton('eg_markdown', 'Markdown', '[md]', '', 'Markdown', 'Markdown', 200);"
  );
}

add_action('admin_enqueue_scripts', 'wplm_add_quicktags2');

This code adds two custom buttons to the WordPress HTML editor using the wp_add_inline_script function and the add_action function.

The wp_add_inline_script function allows us to add custom JavaScript code to a specific script in WordPress. In this case, we are adding the custom code to the quicktags script, which is for adding the buttons to the HTML editor.

The custom JavaScript code that we are adding with wp_add_inline_script consists of two QTags.addButton calls, which add the custom buttons to the HTML editor.

The first QTags.addButton call creates a button with the label wiki and the HTML code [yadawiki link="" show=""]. When the button is clicked, this code will be inserted at the cursor position in the editor.

The second QTags.addButton call creates a button with the label Markdown and the HTML code [md]. When this button is clicked, the HTML code [md] will be inserted at the cursor position in the editor. This is useful for users who prefer to write in Markdown syntax instead of HTML.

Finally, the add_action function is used to add the wplm_add_quicktags2 function to the admin_enqueue_scripts action hook. This ensures that the custom buttons are added to the HTML editor when the admin scripts are enqueued.

In summary, this code adds two custom buttons to the WordPress HTML editor using the wp_add_inline_script function and the add_action function. The custom buttons provide a convenient way for users to insert frequently used HTML or Markdown code into their content.