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.
Trademark< span style=”vertical-align:super;” >TM</span > would give you TrademarkTM
If you want to get a little fancier, you can even adjust the size of the text which is superscripted by using a variation that allows you to set a percentage on the size of the superscript:
< span style=”font-size:PERCENTAGE HERE;vertical-align:super;”>TEXT HERE</span >
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
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?
Twitter: 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.
Thanks for the good post.
However, I tried many times with your code and the ” 50% ” keeps disappearing whenever I update my codes.
For example:
TM
Will appear after updating (or saving) as:
TM
Twitter: KarileeO
May 7, 2015
It can depend on the CSS in your Theme too, Simon. What Theme are you using?
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! 🙂
Twitter: 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.
I really like following your blog as the articles are so simple to read and follow. Excellent. Please keep up the good work. Thanks.
You RULE!! Thanks for this!!
Check it – the font I’m using didn’t automatically make superscripts smaller font, so I tweaked your thing to make my thing: (extra spaces added) 1
Tadaaaaaa!
Thank you!!
Leo’s Pet Care recently posted..Does Your Dog Need Training or Behavior Modification?
Twitter: KarileeO
April 13, 2012
@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
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.
Twitter: 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.
Karilee,
Is there a way to superscript a character in the site title, tagline and menu?
Twitter: KarileeO
June 1, 2014
As far as I know, you could only (appear to) do this through the use of custom graphics, Ed.
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
Twitter: KarileeO
April 14, 2015
You’re welcome, Roisin. If you can edit your custom CSS, you could try something like this:
sup,sub {
font-size: 10px;
height: 0;
line-height: 1;
position: relative;
vertical-align: baseline;
}
sup {
bottom: 1ex;
}
sub {
top: .5ex;
}
I haven’t tried it, I found it here. Looks like it might help though.
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).