How To Make Numbered Lists Look Amazing in WordPress

After writing my blog post on 5 reasons to use lists in blogs, I had people email me asking how I made my lists look so good. I’ll admit, before that post my lists looked ugly. But I spent quite a bit of time playing around to get it to look that way.

What I ended up coming across was some css tricks that let you do numbering in different styles. I had to modify it to work with the lists I was making. First, I’ll give you the code to put into your theme’s custom.css file:

.fancy {
    counter-reset: fancy-counter;
    list-style: none;
}

.fancy li:before {
    content: counter(fancy-counter);
    counter-increment: fancy-counter;
    left: -40px;
    position: relative;
    top: 25px;
    font: bold 50px/1 Sans-Serif;
}

.fancy strong {
    margin-left: -30px;
}

Once this is in your theme’s custom.css file, you can create a new numbered list with WordPress just like you always have, with two exceptions:

  1. You must use the bold tag at the begging of each section. As you can see in the css above, strong (which is what WordPress uses for bolding), has a margin that is being offset by 30 pixels. This is to counter the space the numbers take up.
  2. You must add the fancy class to the <ol> tag. This can be done by changing your WordPress Visual Editor from Visual to Text mode. Change the <ol> to <ol class=”fancy”>. This prevents lists outside of your content from getting changed, ensuring your blog doesn’t break.

That’s all there is to it. Seems complicated at first but once you get it figured out it really doesn’t add much to your flow when creating new posts. But it has an amazingly beautiful effect that’ll help your blog look that much better.

5 thoughts on “How To Make Numbered Lists Look Amazing in WordPress

  1. If anyone isn’t that experienced with HTML and CSS, then a simple way of applying this might be to install a custom CSS plugin (I use Custom CSS – Whole Site and Per Post on some sites and it works well) and then adding the code there. It saves modifying the WordPress theme.

Leave a Reply