Styling Ordered Lists with Letters in WordPress

WordPress is the best thing to happen to the web since the web really. If you are a lawyer or work with documents that have nested lists that use numbers and letters you might be frustrated that ordered lists only show numbers. The good news is that WordPress has built in some CSS extras that you can tap into quickly and easily.

Styling Ordered Lists with Letters in WordPress

The first step you have to take if you want to make a list with numbers in WordPress is to change to the Text Editor in the Page or Post you are working on. While the visual editor is great and getting better all the time it cannot take advantage of this feature. Prepare to step into HTML!

Building an Ordered list by Default

To create an ordered lists you use the <ol></ol> tag and then within that use the <li></li> tag for each item that needs to be listed.

Ordered Example:

<ol>
<li>Item One</li>
<li>Item Two</li>
<li>Item Three</li>
</ol>

Creates this:

1. Item One
2. Item Two
3. Item Three

Notice that the default value for ordered lists is a decimal number. In WordPress a bunch of CSS attributes are already loaded in by default.

Styling Ordered Lists with Letters

If you want to have a letter or roman numeral you just have to add some CSS to your <ol> tag:
style="list-style:INSERT_PROPERTY_VALUE_HERE"

Upper Case Alphabet Example:

<ol style="list-style:upper-alpha">
<li>Item One</li>
<li>Item Two</li>
<li>Item Three</li>
</ol>
Creates this:

1. Item One
2. Item Two
3. Item Three

Common List Styling Options in WordPress for Legal work

• upper-alpha The marker is upper-alpha (A, B, C, D, E, etc.)
• lower-alpha The marker is lower-alpha (a, b, c, d, e, etc.)
• upper-roman The marker is upper-roman (I, II, III, IV, V, etc.)
• lower-roman The marker is lower-roman (i, ii, iii, iv, v, etc.)

Nesting Ordered Lists with Various Styling Options

If you want to get tricky, which you do, you can nest <ol></ol> tags with various styling options listed above.

Nested Ordered List with Various Styling Example:

<ol>
<li>Item 1</li>
<li>Item 2 <ol style="list-style:upper-alpha">
<li>Item A</li>
<li>Item B
<ol style="list-style:lower-alpha">
<li>Item a
<ol style="list-style:upper-roman">
<li>Item I</li>
<li>Item II</li>
<li>Item III
<ol style="list-style:lower-roman">
<li>Item i</li>
<li>Item ii</li>
<li>Item iii</li>
<li>Item iv</li>
</ol>
</li>
<li>Item IV</li>
</ol>
<li>Item b</li>
<li>Item c</li>
</li>
</ol>
</li>
<li>Item C</li>
</ol>
</li>
<li>Item 3</li>
</ol>


Creates this:

1. Item 1
2. Item 2
   1. Item A
   2. Item B
      1. Item a
         1. Item I
         2. Item II
         3. Item III
            1. Item i
            2. Item ii
            3. Item iii
            4. Item iv
         4. Item IV
      2. Item b
      3. Item c
   3. Item C
3. Item 3

Learn more about Styling Lists with CSS here: W3Schools CSS list-style-type Property