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:

H<sub>2</sub>0

Superscript characters can be added like this:

My reference<sup>1</sup>

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:

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.

6 Comments


  1. Worth knowing Sarah
    I notice that you are in visual mode there – do you work in visual mode?

    I always work in text mode and disable the visual mode so that I don’t activate it by mistake and mess up the html.

    Report


    1. Have you ever used a theme that utilizes editor-style.css? If not, you should try it sometime with the visual editor enabled. In most cases this style sheet will match the content within the visual editor to what you would see on a published post. It’s reignited my interest and use of the visual editor. I don’t stick with one or the other. I switch between the two when it makes sense. Being able to use keyboard shortcuts in the visual editor is enough to get me to use it.

      Report


  2. 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

    Report


  3. Hi Sarah,
    I added this code to my themes functions.php file and the icons do not show up.
    Is the functions.php file the correct place to put the code? Or is there something else that I need to do?
    Thanks

    Report

Comments are closed.