How to Create a Continuous Ordered List in WordPress

by Elaine on March 5, 2013

If you only have one ordered list to create your on site, the numeric list works.  But if you have different sub-headings and sections with ordered lists and you want the numbers to be continuous, Wordpress does not easily allow for this.  With a simple HTML edit, you can start off each section with the next number.

The Problem:  I have 5 fruits to list and I want to place them into sections.  I want Banana to be #3, but it shows #1 again.

Fruits Red

  1. Apples
  2. Strawberries

Fruits Yellow

  1. Banana
  2. Lemon
  3. Mountain Dew

What I want:  Show fruits number 1 to 5 even with the sections.

Fruits Red

  1. Apples
  2. Strawberries

Fruits Yellow

  1. Banana
  2. Lemon
  3. Mountain Dew

How to Have a Continuous Ordered List in Wordpress

Using the same example I have above, here is what I did to have a continuous ordered list even through sections.

 1.  Create your list as normal.  Below is the list I created, same as the one I had above.

Fruits Red

    1. Apples
    2. Strawberries

Fruits Yellow

    1. Banana
    2. Lemon
    3. Mountain Dew

2.  Clicked on the ‘Text‘ tab (beside the ‘Visual’ tab at the top right corner of the edit box).  Here you will see the HTML version of your post.  Using my same example above, I will see the following HTML code:

<p style=”padding-left: 30px;”>Fruits Red</p>

<ol>
<li><span style=”line-height: 13px;”>Apples</span></li>
<li>Strawberries</li>
</ol>
<p style=”padding-left: 30px;”>Fruits Yellow</p>

<ol>
<li><span style=”line-height: 13px;”>Banana</span></li>
<li>Lemon</li>
<li>Mountain Dew</li>
</ol>

3.  Search for the <ol> after the ‘Fruits Yellow’ heading.  I highlighted it in RED.

<p style=”padding-left: 30px;”>Fruits Red</p>

<ol>
<li><span style=”line-height: 13px;”>Apples</span></li>
<li>Strawberries</li>
</ol>
<p style=”padding-left: 30px;”>Fruits Yellow</p>

<ol>
<li><span style=”line-height: 13px;”>Banana</span></li>
<li>Lemon</li>
<li>Mountain Dew</li>
</ol>

4.  Add a start=”N” to the <ol>, where N is the number you want the list to start at.  In my example, I want my list to start at 3.  I will change <ol> to <ol start=”3″>.

<p style=”padding-left: 30px;”>Fruits Red</p>

<ol>
<li><span style=”line-height: 13px;”>Apples</span></li>
<li>Strawberries</li>
</ol>
<p style=”padding-left: 30px;”>Fruits Yellow</p>

<ol start=”3″>
<li><span style=”line-height: 13px;”>Banana</span></li>
<li>Lemon</li>
<li>Mountain Dew</li>
</ol>

5.  Now you will have your ordered list with continuous numbering across different sections.  Change the tab back to ‘Visual’ and you will see what your ordered list now looks like.  It should have the continuous numbering.  It will look like this:

Fruits Red

  1. Apples
  2. Strawberries

Fruits Yellow

  1. Banana
  2. Lemon
  3. Mountain Dew

Hope that helps.  Please leave me a comment if you have any questions.  You can also see another example of a continuous ordered list that I created in another post here.

Thanks,

Elaine

 

 How to Create a Continuous Ordered List in Wordpress

Elaine

Elaine is the founder of CmsMind, an online blog providing Joomla and Wordpress tutorials. Elaine lives in Toronto and when she is not online, she is either Marathon and Triathlon training or travelling and racing somewhere in the world. Find her also at: Save Money, Premium Themes and Templates, and at Webhosting Tips.

More Posts - Website

Leave a Comment

Captcha Captcha Reload

Older Post:

Newer Post: