So in this tutorial I show you how to add the hidden SuperScript & SubScript buttons that are available for WordPress visual editor that all WordPress CMS websites use- the tinyMCE visual editor. The code to add these hidden buttons to your visual editor UI I have left at the bottom of this page; remember that when you make any theme changes you should make them to a child theme.
So first thing you need to do is go to Appearance > Editor.
Then from the sidebar listing the theme files, choose functions.php.
Scroll down to the end of the functions.php file. Add this code to the end:
function my_mce_buttons_2( $buttons ) {
/**
* Add in a core button that's disabled by default
*/
$buttons[] = 'superscript';
$buttons[] = 'subscript';
return $buttons;
}
add_filter( 'mce_buttons_2', 'my_mce_buttons_2' );
Later on, I figured out that adding “code” or “anchor” didn’t work as expected. Below I outline two plugins that solve this problem as well as providing other useful functionalities:
1. The TinyMCE Code Formatting plugin adds the Pre and Code buttons to the visual toolbar.
2. The TinyMCE Advance plugin seems to unlock a bunch more buttons for formatting your WordPress page. I don’t immediately see any buttons for code or anchor, but it does allow you to “configure up to four rows of buttons including Font Sizes, Font Family, text and background colors, tables, etc.”
And the most lightweight option that I am currently using is the Inline Code Command plugin, which I show in the video below that it still works for WordPress’s latest version:
