Technical Tips

Mike’s Technical Tip: Superscripts and Subscripts in WordPress Blocks

Registered Copyright Symbol

The Gutenberg Block Editor in WordPress (as opposed to the original, Classic Editor) is very flexible and easy to use when it comes to adding content. However, if you ever need to add a superscript or subscript, there are a few less obvious things you need to know.

First and most importantly, how you add a superscript or subscript depends on whether you want to add it to the post/page title or the post/page body. I’ll show you how to do both with this example:

Superscript 01

Let’s jump into the editor (or “back end”) of that “public-facing” or “front end” example above:

Superscript 02

First, let’s handle the registered trademark in the body copy. Select it with your cursor, and when the toolbar appears, click the little downward-pointing chevron:

Superscript 03

In the menu that pops up, choose Superscript (or Subscript):

Superscript 04

You can see in the editor that it worked…

Superscript 05

…and can be confirmed in the front end as well:

Superscript 06

All good and pretty straightforward. Let’s now try the same thing for the one in the title. Select the registered trademark, and…

Superscript 07

Nothing! No toolbar appears when you try to style title text. Not to fear – there’s an old-school trick you can try that was always available in the Classic Editor. Just add the <sup> and </sup> tags (or <sub> and </sub> if you want a subscript) around the registered trademark in the title:

Superscript 08

Make sure you check the front end to confirm that it worked…

Superscript 09

Wait… what?! That’s right – that trick no longer works! WordPress clamped down on directly adding things like HTML tags to post/page titles for security’s sake.

But don’t worry, there’s still a way to achieve what you’re going for.

Back in the editor, look for the vertical ellipses Options in the top-right:

Superscript 10

In the menu that appears, choose “Code editor”:

Superscript 11

The content of your post/page will switch to code instead of the styled text you’ve been seeing up to this point. By the way, note the tags surrounding the registered trademark in the body copy we already worked on:

Superscript 12

Now, simply add those tags to the title text as we unsuccessfully tried previously, and then either click “Exit code editor”…

Superscript 13

…or return to the vertical ellipses and choose “Visual editor”:

Superscript 14

Now you can see the effect both in the back end…

Superscript 15

…and, happily, in the front end too:

Superscript 16

In Your Inbox