How to Start Numbered List with Different Number in a WordPress Post
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:
- Web Design
- SEO
- Ad Agency
- Digital Ads
- Page 1 Ranking
- Online Strategy
- 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:
- Brochure Design
- Print Ads
- Newspaper Ads
- Magazine Ads
- Marriage Mail
- Direct Mail
- 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.)
- Search Engine Optimization
- SEO
- 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:
