How to Superscript in WordPress

Today’s post is short – but since I had to hunt a bit to find out how to superscript in WordPress, I thought I’d put it here for you. One of my clients needed a trademark symbol displayed frequently on their site. Simple enough, but the WordPress default user interface doesn’t offer that feature. So how would I, for example, display Outcome MarketingTM?

Superscript in WordPress

Simple enough – to display Superscript in WordPress, you just add a < sup > code before the text in your HTML editor, and a < /sup > code after it. I added extra spaces so those codes wouldn’t mess up my text display, so see this image if what I mean isn’t clear:

Subscript in WordPress

If, for example, I wanted to display a subscript in WordPress instead, using a dropped character such as you’d see in H2O, I simply need to use the < sub > and < /sub > codes (remove the spaces from inside the codes).

What if That Doesn’t Work?

Of course, like all things computer, sometimes you don’t get the results you expect. It may vary depending on the Theme you’re using, and changing Themes could impact your results. In that case, you may have to use a slightly more complex example of code.

So I could use Trademark< span style=”font-size:50%;vertical-align:super;” >TM</span > to get TrademarkTM

Looks good, doesn’t it? That should work no matter what Theme you’re using, so is probably the safest and most attractive method to superscript in WordPress. If you change the “super” part of the code to “sub”, you’ll subscript instead. Please post if you have any questions, and subscribe so you don’t miss useful WordPress tips!

About the author

Karilee

I'm a big fan of entrepreneurship. Most of my learning, teaching and business is focused on effectively creating "freedom businesses" that allow you to focus on your strengths, and bring what you're really good at to the world - profitably.
My clients are looking for more of the right customers - and I show them how to make that happen. I help them develop their web presence through their website, SEO, social media and other marketing tactics.

17 Responses to How to Superscript in WordPress

Hey! I just wanted to ask if you ever have any trouble with hackers? My last blog (wordpress) was hacked and I ended up losing many months of hard work due to no back up. Do you have any solutions to prevent hackers?

KarileeTwitter: KarileeO
February 17, 2011

Well, I recommend using automatic backup plugins. I use WordPress Database Backup by Austin Matzko, and WordPress Backup (by BTE). They respectively back up my database and my WordPress uploads/configuration. Using more challenging passwords can also help.

Simon Charwey
May 1, 2015

Thanks for the good post.

However, I tried many times with your code and the ” 50% ” keeps disappearing whenever I update my codes.

It can depend on the CSS in your Theme too, Simon. What Theme are you using?

Cassi Karakas
March 14, 2011

Hello, this might seem a bit off topic but I was wondering if you’d recommend the blog platform that you’re using? I’m considering starting a blog and trying to pick between starting with wordpress or blogger, which are the main two that seem most popular in all the articles I’ve found online. Any input would be greatly appreciated. Thanks! 🙂

KarileeTwitter: KarileeO
March 15, 2011

Hi, Cassi;

I’m using self-hosted WordPress, from wordpress.org. I truly believe that’s the best solution for almost every small business website. I set up WordPress websites for small businesses who don’t want to do it themselves.

Myles Sallies
March 17, 2011

I really like following your blog as the articles are so simple to read and follow. Excellent. Please keep up the good work. Thanks.

@Leo’s Pet Care, I suspect different versions of WordPress or even different fonts could affect our results… a lot of font substitution can happen when printing too. This stuff can definitely get more complex than you’d expect!

You have just made my life that much easier. Thank you so much!!candice michelle recently posted..glock holsters

Hume Vance
February 18, 2013

Thank you, this worked great–however, I had first to remove the spaces before and after the angle brackets () in your sample:
TEXT HERE

75% works for me.

KarileeTwitter: KarileeO
February 19, 2013

You’re absolutely right, Hume. I had to place those spaces so that the code would show up for you, instead of becoming commands to the page. In all the examples, spaces inside the angle brackets need to be removed. I’ve edited the post to hopefully make that clearer. Glad you figured it out, and left me a note.

Thank you SO much for this. I’ve been searching for ages. When I use this it makes the width between lines wider. Is there any way to correct for this and keep it the same as the rest of the text?Roisin recently posted..Why Pursuing Happiness Could be Making you Miserable

I suspect the only other way would be to make ALL of your line spacing a bit wider to leave enough room for the character that’s getting bumped up or down. I’d play with Firebug a bit and see (you can make changes temporarily and see their results).