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:

<sup> and </sup> codes to Superscript in WordPress

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

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.

Posted on by Karilee in WordPress Tips

17 Responses to How to Superscript in WordPress

  1. Lion

    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?

     
    • Karilee
      Twitter: KarileeO

      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

        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

         
        • Karilee
          Twitter: KarileeO

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

           
  2. Cassi Karakas

    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! 🙂

     
    • Karilee
      Twitter: KarileeO

      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.

       
  3. Myles Sallies

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

     
  4. Leo's Pet Care

    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?My Profile

     
  5. Leo's Pet Care

    LOL! Now your blog won’t print the superscript I made in the way it prints on my blog. Crazy blogs!!!
    Leo’s Pet Care recently posted..Does Your Dog Need Training or Behavior Modification?My Profile

     
    • Karilee
      Twitter: KarileeO

      @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!

       
  6. candice michelle

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

     
  7. Hume Vance

    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.

     
    • Karilee
      Twitter: KarileeO

      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.

       
  8. ed libich

    Karilee,
    Is there a way to superscript a character in the site title, tagline and menu?

     
    • Karilee
      Twitter: KarileeO

      As far as I know, you could only (appear to) do this through the use of custom graphics, Ed.

       
  9. Roisin

    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 MiserableMy Profile

     
    • Karilee
      Twitter: KarileeO

      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).

       

Add a Comment


CommentLuv badge

Get 5 Special Bonuses Including Your Free Small Business Marketing Self-Assessment!