How to Add Superscript & Subscript Buttons to your WordPress Visual Editor

---
My Gear (づ⌐■ ͜ʖ■)づ
Follow me ┴┬┴┤( ͡° ͜ʖ├┬┴┬
---
TinyMCE is the name of the visual editor that comes with WordPress, which can be used to edit post and page content. It comes with a variety of buttons, but it is also possible to add your own buttons to the editor toolbar, and otherwise change the editor's behavior. A powerful way to do this is by adding a "plugin" to the MCE editor, and this article demonstrates how to set up a WordPress plugin to do that.

Enabling hidden MCE buttons

In implementing TinyMCE WordPress chooses to avoid a messy editor by not display many of the available buttons. In some cases creating a custom MCE button is unnecessary because a button already exists that does what you want and you just need to add it to one of the rows of buttons to have access. Common examples include the hr (horizontal rule), sub (subscript) and sup (superscript) buttons, as well as the powerful styleselect button mentioned above. See the full list of buttons on the TinyMCE site.

As of WordPress 3.9 and TinyMCE 4.0 sup has been renamed to superscript and sub has been renamed to subscript.

Hidden buttons can be enabled by filtering the array of buttons for the row you wish to edit. The filter for the second row is mce_buttons_2, while mce_buttons_3 will create a new third row of buttons.

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' );

Did you know that WordPress has built-in support for subscript and superscript characters? This information is not easy to find, as it’s tucked away under the Editing Help page in the codex.

Although the WordPress editor doesn’t show subscript and superscript buttons, you can add these characters anytime using the sub or sup tags. For example, to display H20, you would write it like this:
H sub 2 /sub 0

Superscript characters can be added like this:
My reference sup 1 /sup

Add Subscript and Superscript Buttons to the Visual Editor

There are many TinyMCE buttons that are disabled by default so as not to clutter up the WordPress editor with buttons that most people rarely use. If you find that you often need to add characters above or below the normal line of type, you may want to consider adding the Subscript and Superscript buttons to the visual editor for your own convenience.

The WordPress codex section on enabling hidden MCE buttons, which demonstrates how to filter the button list. You can create a quick functionality plugin using the snippet below:
1
function my_mce_buttons_2($buttons) {/*** Add in a core button that's disabled by default*/$buttons[] = 'sup';$buttons[] = 'sub';return $buttons;}add_filter('mce_buttons_2', 'my_mce_buttons_2');

Filtering mce_buttons_2 will add the buttons to the second line in the visual editor. Filtering mce_buttons_3 will display the added buttons on a third line.

new-buttons

For more technical writing that goes beyond basic subscript and superscript characters, you may need to employ an additional tool such as the open source LaTeX typesetting system. LaTeX makes it possible to post complex scientific and mathematical equations. Jetpack includes a LaTeX module and the WordPress Plugin Directory also has a wide assortment of LaTeX plugins.

[barbaramorris]

Was so excited when I found your video, sadly it didn't work in the Divi theme. Still trying to get a superscript ® to work.

[piotrhaasiewicz]

So, for example:
function my_mce_buttons_2( $buttons ) {
$buttons[] = 'superscript';

return $buttons;
}

add_filter( 'mce_buttons', 'my_mce_buttons_2', 11 );

[robertvanpiggelen]

Or you could just copy paste a superscript element from word into your editor...