How to Add Subscript and Superscript Characters in WordPress

photo credit: Lori Greig - cc
photo credit: Lori Greigcc

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:

[php light=”true”]H<sub>2</sub>0[/php]

Superscript characters can be added like this:

[php light=”true”]My reference<sup>1</sup>[/php]

That above example would display: My reference1

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:

[php]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’);[/php]

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.

6

6 responses to “How to Add Subscript and Superscript Characters in WordPress”

  1. This is a good tip. Modifying the TinyMCE editor is great for sites where clients have limited or specific formatting needs.

    In WordPress 3.9, TinyMCE is moving to version 4.0 and the above code snippet won’t work anymore (at least as of testing today). Instead, you’ll need to use “superscript” and “subscript” instead of “sup” and “sub.”

    A full list of buttons is here: http://www.tinymce.com/wiki.php/Controls

Newsletter

Subscribe Via Email

Enter your email address to subscribe to this blog and receive notifications of new posts by email.