How to create superscript in WordPress? Well, it’s really easy – no need for a WordPress superscript plugin. All you need to do is add a tiny bit of HTML code for superscript – in your WordPress classic editor, or any other editor. Find out how to create superscript numbers and symbols in blog posts and titles right here in this tutorial!
How do you superscript in WordPress?
You don’t have to be an Einstein to find yourself needing to create superscript in WordPress (think ‘E=mc2‘).
Sometimes, it’s enough to be a digital artist to have that happening to you… 😉
Did you know that Albert Einstein was a highly creative person? There are many quotes that he made about creativity.
If you’ve been using a drawing tablet with screen (or thinking about getting one), then you know that screen brightness is measured in candela per square meter, aka cd/m2.
Let’s say you have a WordPress site and you want to write about the Top 10 Wacom Tablets With Screen on your blog. This is where you would need a superscript 2 in WordPress, right?
Related: → Learn everything about building your own artist website.
Of course, you could just type in the number like cd/m2 and leave it there. But let’s be honest: numbers and other symbols like the Copyright©, TrademarkTM or Registered® look 1010 times better when they are superscript, don’t they?
So, how can you do superscript in WordPress? This tutorial will show you step-by-step how to create superscript in WordPress. It’s very simple and easy. You don’t even need a WordPress superscript plugin.
All you need to do is add a tiny bit of HTML code for superscript, and that’s it. You can use the HTML superscript code wherever you want: in your classic WordPress editor, in your blog post title, or any other editor that you’re using with WordPress, such as Elementor.
Related: → Elementor For Photographers And Artists – QUICK & EASY Page Builder
So without further ado, let’s get started with this WordPress superscript tutorial!
To create superscript in WordPress, these are the four steps you'll need to follow:
Step-by-Step WordPress Tutorial
How to create superscript in WordPress
STEP 1: Open your preferred WordPress editor
In Step #1, you just open the WordPress editor you use to work with.
This can be the classic WordPress Gutenberg editor, Elementor, Divi, Beaver Builder, or whatever else is out there on the market.
STEP 2: Type in text and numbers to superscribe
How do you type a superscript?
In Step #2, you simply type in all the text that you need, including all numbers and other symbols that you want to add superscript to.
For the example, I’m using the classic WordPress Gutenberg editor, and I’m pretending to be a little Einstein who needs to create superscript of the number 2… 😏
STEP 3: Switch to source code mode
How do you add superscript in HTML?
As I mentioned at the beginning, we’ll need to use some HTML code to create superscript in WordPress.
So, to be able to make use of HTML code in WordPress, we first of all need to switch to source code mode.
In the Gutenberg editor, you need to click on the three little dots in top menu bar and select ‘Edit as HTML‘ from the dropdown menu.
Depending on the editor you’re using, the source code mode might come with different names.
In Elementor, for example, you can access the source code by clicking on ‘Text‘ view – as opposed to ‘Visual‘ for regular editing (more on that later on in this tutorial).
Once, you’ve entered source code mode, your text should look something like in the example below.
You’ll most likely see some HTML code elements within angle brackets ( < > ), as well as other commands within quotations marks ( ” ” ).
STEP 4: Add the following code for superscript
What is the code for superscript?
In Step #4 of our tutorial on how to create superscript in WordPress, you first of all need to locate the number or symbol that you want to superscribe. Then we can add the superscript in HTML.
In the example, I want to add superscript to the number 2. Therefore, I’m going to place the number between two HTML code tags.
Please note that both HTML code tags for the superscript are within angle brackets, with no spaces between the brackets.
Likewise, you don’t want to add any spaces before or after the tags towards the other letters. After all, the superscript 2 is supposed to appear right next to the letter.
Once you’ve added the code for superscript in your WordPress editor, you can switch back to the regular visual editing mode.
In the WordPress Gutenberg editor, you do so by clicking once again on the three little dots in the top menu bar. This time, you select ‘Edit visually‘ from the dropdown menu.
And here we are. This is what our little Einstein formula looks like with a superscript number 2 in WordPress.
Congratulations, you’ve just learned how to create superscript in WordPress! See how easy it is!
You can use this code with any page builder for WordPress and anywhere on your WordPress site.
That way, it’s also possible to create superscript in WordPress titles. As you see in the title of this tutorial, I’ve named it ‘How To Create Superscript In WordPress – Step-by-Step WordPress Tutorial2 ‘.
If you could look into my WordPress source text, you’d see that it looks like this:
You can use the same HTML code to create superscript in Elementor.
In the example right here, I’m showing you how to use the exact same method to add superscript in Elementor.
The good thing about Elementor is that it comes with some kind of WordPress superscript plugin.
A click on the Omega Ω symbol in the text editor will open a dialog window with Special Characters.
From there, you can insert superscript numbers from 1 to 3. If you want to superscribe any number higher than three or any other letter or symbol, though, you still need to use the HTML code for superscript… 😜
I hope you enjoyed this little tutorial on how to create superscript in WordPress and were able to learn something from it. If so, please drop me a comment and share it with other WordPress users! Catch you in the next post, Angie 💗
Howdy this is kinda of off topic but I was wondering if blogs use WYSIWYG editors or if you have to manually code with HTML. I’m starting a blog soon but have no coding know-how so I wanted to get guidance from someone with experience. Any help would be greatly appreciated!
Hi Resetar, I recommend building your site with WordPress. When you install Elementor, you have a very powerful and easy-to-use WYSIWYG editor. I’m sometimes using a bit of HTML code to format things on my site exactly the way you want. I have an HTML course for beginners, if you’re interested.