How to Add Subscript and Superscript Texts in WordPress

Are you aware that WordPress seamlessly accommodates subscript and superscript characters? This gem of a feature is somewhat of a hidden treasure, subtly nestled within the Editing Help section of the WordPress codex.

Despite the WordPress editor not flaunting dedicated buttons for subscript and superscript, you have the freedom to incorporate these elements effortlessly using the sub or sup tags. For instance, if you want to showcase H2O with proper scientific notation, here’s how you do it:

Using the Block Editor (Gutenberg):

• Select the text you want to format.
• Click on the “More rich text controls” toolbar button (it looks like a down arrow).
• Choose either “Subscript” or “Superscript” from the dropdown menu.

Using the Classic Editor:

• Select the text you want to format.
• Use the subscript (< sub >) or superscript (< sup >) buttons in the toolbar. If these buttons are not visible, you might need to click the “Toolbar Toggle” button to see more formatting options.

Using HTML:

• You can also apply these formats manually by editing the HTML of your post or page.
• Wrap the text you want to format in (< sub >) tags for subscript and (< sup >) tags for superscript.

Keep in mind that the availability of these features may depend on your WordPress theme and the plugins you have installed. Some themes or page builders might offer additional options for subscript and superscript formatting.

Certainly! If you’re looking to include subscript and superscript text in your WordPress content directly through HTML, here’s a simple code snippet you can use. This snippet demonstrates how to wrap your text with “sub” and “sup” tags, which you can insert into the HTML editor of your WordPress post or page.

This is a regular sentence with a subscript element.

And here's another one with a superscript touch.

How to add it to the Visual Editor

In the vast array of TinyMCE buttons, many are not activated by default to avoid overloading the WordPress editor with seldom-used options. However, if you frequently find yourself needing to insert characters that sit above or below the standard line of text, it might be worth considering the addition of the Subscript and Superscript buttons for easier access in the visual editor.

The WordPress codex provides guidance on enabling these hidden MCE buttons, showcasing how to customize the button list through filtering. You can effortlessly create a functionality plugin using the PHP snippet below:

/**
 * Add Subscript and Superscript buttons to the TinyMCE editor in WordPress.
 *
 * @param array $buttons Existing buttons on the second row of the editor.
 * @return array Updated button array including subscript and superscript.
 */
function my_mce_buttons_2($buttons) {
    // Add subscript button
    $buttons[] = 'sub';

    // Add superscript button
    $buttons[] = 'sup';

    return $buttons;
}

// Hook into the second row of the TinyMCE editor to add buttons
add_filter('mce_buttons_2', 'my_mce_buttons_2');

Applying a filter to mce_buttons_2 will position the buttons on the second row of the visual editor. If you prefer them on a third row, use mce_buttons_3 instead.

For more complex technical writing that extends beyond basic subscript and superscript usage, additional tools may be necessary. For instance, the open-source LaTeX typesetting system is ideal for posting intricate scientific and mathematical equations. WordPress’s Jetpack offers a LaTeX module, and you can also find a variety of LaTeX plugins in the WordPress Plugin Directory.