How to Start a Numbered List with a Different Number

Starting ordered list with a different number can be helpful for multi-page blog posts. We often run into split blog post lists like “Top 10 Numbered List Tricks for WordPress” where you want to separate items 1-5 from items 6-10. It’s a pretty simple tweak through HTML5 or CSS.

The first thing to do is create your post just like you would any other. Then click on the “Text” tab in the upper right hand corner. This will change from a visual editor to text editor. Some of the code will appear in between your text paragraphs.

A typical simple numbered list looks like this in the text editor:

<ol>
<li>Web Design</li>
<li>SEO</li>
<li>Ad Agency</li>
<li>Digital Ads</li>
<li>Page 1 Ranking</li>
<li>Online Strategy</li>
<li>Responsive Website Design</li>
</ol>

This would appear on page like this:

1. Web Design
2. SEO
3. Ad Agency
4. Digital Ads
5. Page 1 Ranking
6. Online Strategy
7. Responsive Website Design

But if you wanted to start the ordered list with a number other than 1, what’s the trick? All you have to do is add a “start=”x” inside of the first line of the ordered list where x is the number you want to start at.

So this code in text editor:

<ol start=”10″>
<li>Brochure Design</li>
<li>Print Ads</li>
<li>Newspaper Ads</li>
<li>Magazine Ads</li>
<li>Marriage Mail</li>
<li>Direct Mail</li>
<li>Annual Reports</li>
</ol>

Will output like this:

10. Brochure Design
11. Print Ads
12. Newspaper Ads
13. Magazine Ads
14. Marriage Mail
15. Direct Mail
16. Annual Reports

There are a lot of other more complex solutions to this including a CSS solution like this using counter reset. Keep in mind that CSS is zero indexed so to start with the number 10, you would input a 9 as below.

Here is the CSS required to start with the number 10.

ol {counter-reset: start 9}
li {display: block }
li:before {content: counter(start) ". "; counter-increment: start}

This is how the ordered list is rendered in your browser (it should start with the number 10.)

10. Search Engine Optimization
11. SEO
12. SERPS

Hopefully this helps you split pages for blog posts. If you need any other help, feel free to reach out to our team at getyourshare@liontreegroup.com.

For more information on other bulleted or ordered lists in WordPress check out these posts:

Paragraph Spacing Issues
Custom Bullet Point Lists