Loading...
Wordpress Tutorials

How to Create a Continuous Ordered List in WordPress

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

 

Leave a Reply

Your email address will not be published. Required fields are marked *

Captcha Captcha Reload