WordPress – Nested and Styled HTML Lists

Posted on by Michael Lane

Overview

In WordPress it is easy to make a numbered list using the List block. If we want to go beyond that, and create nested lists with numbers and letters, we need to learn some basic HTML and CSS code.

First let’s take a look at a simple numbered list.

WordPress List Blocks and HTML

In WordPress we use the List block to create a simple ordered list like this:

  1. Item one.
  2. Item two.
  3. Item three.

To modify the contents of this block we need to change it to a Custom HTML block.

This is the HTML code for our basic numbered list:

<ol>
<li>Item one.</li>
<li>Item two. </li>
<li>Item three.</li>
</ol>

There are only two pairs of HTML tags here. The opening and closing tags for the ordered list: <ol> and </ol>, and the opening and closing list item tags: <li> and </li>.

We are interested in the <ol> tags because we can use them to do two things.

First, we can add more <ol> tags to create nested lists. Second, we can style the lists to be numerical or alphabetical.

Let’s take a look at our main styling options.

Common Styling Options for Lists

To set a style for an ordered list we use the following template code:

<ol style="list-style:style-name">

The variable in this code is style-name. Table1 shows the most commonly used style-name variables:

Table 1 Ordered List Styles.
Style-name Description
lower-alpha Lower case alphabetical.
upper-alpha Upper case alphabetical.
decimal Numeric.
decimal-leading-zero Numeric, with a leading zero.
lower-roman Lower case Roman numerals.
upper-roman Upper case Roman numerlas.

Pairing our style-name variables to our template code gives us control over how we style our lists.

Let’s take a look at an example of a nested list using two different style-name variables.

Example

In this example we have a standard numerical list with a nested lower case alphabetical list:

  1. Introduction
  2. Heading One
  3. Heading Two
    1. Sub Heading One
    2. Sub Heading Two
    3. Sub Heading Three
  4. Heading Three
  5. Conclusion
  6. References

The HTML for our example list is below:

<ol>
<li>Introduction</li>
<li>Heading One</li>
<li>Heading Two <ol style="list-style:lower-alpha">
<li>Sub Heading One</li>
<li>Sub Heading Two</li>
<li>Sub Heading Three</li>
</ol>
<li>Heading Three</li>
<li>Conclusion</li>
<li>References</li>
</ol>

Notice that when we nest one list inside another we lose the closing list item </li> tag on that line. In our example, above, this is on line 4.

If for any reason your list gets interrupted by other content you can resume numbering by adding the following code within an <ol> tag:

start="number"

Here the variable number represents a numerical value. To resume numbering at the number seven, for example, we would use the following code:

start="7"

Leave a comment