How to Create and Customize Nested Lists in WordPress

In this handy guide I will show you how to create and customize nested lists in WordPress using different methods. The instructions are for both ordered and unordered lists.

How to create nested lists in WordPress (3 methods)

Before you create a nested list there are a few things to keep in mind:

• You can have multiple sub-lists in your nested list
• The appearance of the list is inherited from the WordPress theme, so your list can look different if you change the theme
• If you want to change the way your list looks, you’ll need to use a plugin or add some CSS code

1. Create a nested list in Classic Editor

Follow these steps:

• Create an ordered or unordered list
• Select the items you want to nest
• Click on Increase indent

2. Create a nested list in Gutenberg Editor

Follow these steps:

• Add a List block
• Select the items you want to nest
• Click on Indent

3. Create a nested list using HTML

Follow these steps:

• Add a Custom HTML block
• Insert the following code in the block (adjust for your own needs)

<ul>
<li>Item
<ul>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ul>
</li>
</ul>

<ul></ul> tags are used to start and close an unordered list (also known as a bulleted list) and <ol></ol> tags are used to start and close an ordered list (also known as a numbered list). <li></li> tags are used to start and close an item.

You can combine <ol> and <ul> tags in your nested lists.

How to customize a nested list in WordPress

The appearance of the list depends on your WordPress theme. The default themes like Twenty Twenty Three have a specific styling, other themes might have different styling.

For this tutorial, I’ve used the Kadence theme and it doesn’t seem to have consistent styling for nested lists. To fix that, you can style the list by using a dedicated plugin or by adding some CSS code.

How to style a nested list using CSS

In WordPress, the style of a list is defined by list-style-type CSS property and the default value is disc (the most popular list symbol).

Some of the most common values for list-style-type property are:

• disc
• circle
• square
• decimal
• decimal-leading-zero
• lower-roman
• upper-roman
• lower-greek
• lower-latin
• upper-latin
• lower-alpha
• upper-alpha

Now, let’s say you want to use upper roman numerals in your unordered nested list. Simply add this inline CSS code to your list:

<ul>
<li>Item
<ul style="list-style: upper-roman">
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ul>
</li>
</ul>

These values work for ordered and unordered lists.

How to style all nested lists on your website using CSS

If you want to change the appearance of all your nested lists, you will need to adjust the CSS code of your WordPress theme. Let’s say you want to display all your unordered nested lists with square bullets.

Here is how to do it:

• Find the class name of your content. In my case it’s entry-content
• Go to WordPress admin – Appearance – Customize – Additional CSS
• Add the following code and click on Publish (adjust the code for your own needs)

.entry-content ul li {
list-style: square;
}

Here is how it looks:

Note: to adjust the appearance of each sub-list in your theme, you will need to further customize the CSS code. Here is more info and an example of code below.

.entry-content > ul {
  list-style-type: disc;
}

.entry-content > ul li > ul {
  list-style-type: circle;
}

.entry-content > ul li > ul li > ul {
  list-style-type: square;
}

.entry-content > ul li > ul li > ul li > ul {
  list-style-type: lower-greek;
}

And here is the result:

That’s it, you have learned how to create and customize your WordPress nested lists. Let me know if you have any questions in the comments below.