Who doesn’t love a good list? Whether it’s a to-do list, a grocery list, the menu for a dinner party, a gratitude list, or any other kind, there’s something about lists that helps us to digest information. Perhaps it’s the arrangement of pieces of information into bite-sized chunks or just the plain simplicity of one point per item. In any case, lists are one of the best ways to learn and retain information. So it’s no wonder that they’re so prevalent on websites.

To make your web pages’ content the most effective for your site viewers, it’s important to organize the information in a logical manner. Headings, sub-headings, sub-sub-headings, short paragraphs (when possible), proper emphasis (bold, italics, underline), complementary graphics, and white space are all good methods of achieving that. Bulleted and numbered lists are also part of the arsenal. All of these techniques make the page easier to scan through and grab the most relevant details, for those who don’t have time to read every word. (And, does anyone have time these days?)

SEO (Search Engine Optimization)

Google and other search engines love well structured information. So it should be no surprise that they love lists. Anything that makes a web page’s content better organized will benefit rankings in Google et al. Don’t overdo the lists, of course, but fit them in wherever doing so makes sense.

Basics of Lists in WordPress

Your WordPress editor may vary slightly from mine — particularly if you’ve succumbed to using the Gutenberg editor (I haven’t). If you are using Gutenberg, here’s a good tutorial on how to add a list. Otherwise, I’ll show you the specifics of adding lists in the Classic WordPress editor.

I’ve highlighted the two buttons for creating lists. The one on the left is for bulleted lists; the one on the right is for numbered lists. Whichever one you choose to use, you can either click the button first (which will insert a bullet point or the number 1) and start typing your first item or you can select the text you want to format as a list, then click the appropriate button.

• This is what a bulleted list item looks like.

1. This is what a numbered list item looks like.

No great surprises there. To continue the list, after you’ve entered your first item, simply hit ‘return’ and another bullet or number will appear on the next line.

Slightly more advanced lists

What if you don’t just want the standard form of a list? Well, you probably noticed the little down arrows to the right of each of the highlighted buttons above. Notice what happens when you click on one of those.

Bulleted list drop-down options

The default is, well, “Default” — which is the standard dot. You can also choose from: circle, disc, or square.

• This is what the circle option looks like.

• This is what the disc option looks like. Wait, isn’t that the default? 🙂

• And this is what the square option looks like.

Numbered list drop-down options

For numbered lists, the default is the basic numbers, followed by a dot (i.e., like the “1.” above). The other choices are: lower alpha, lower Greek, lower Roman, upper alpha, and upper Roman. They look something like this:

1. This is what lower alpha looks like. Of course, following would be: b., c., and so on.

1. This is what lower Greek looks like. Wow, you know in more than 20 years of web development, I’ve never used this option! Following would be: β., γ., and so on. Sure brings back memories of my math studies…

1. Here’s what lower Roman looks like. Next up, of course, would be: ii., iii., iv., and so on.

1. This is what upper Alpha looks like. I think you can guess what would follow.

1. Finally, this is how upper Roman looks. Following would be: II., III., IV., etc.

So now you have a basic understanding of how to create a simple bulleted or numbered list. Time to get a bit more complex.

Intermediate level list options

What if you wanted a multi-levelled list, something like this:

• Top level item
  • second level item
    • third level item

Or, something like this:

1. Top level item
   1. second level item
      1. third level item
      2. another third level item
   2. another second level item
2. Another top level item

Take a deep breath. It’s not as difficult as you might think. You get the indented, lower levels simply by using your ‘tab’ key. Each time you press it, the list indents one more level. Then when you hit ‘return’, you’ll get another point at that level. Hitting ‘return’ twice takes you to the previous level, and so on.

Note that in both bulleted and numbered lists, you can choose which type of sub-list item you want, by clicking in (or highlighting) the text at that level and using the drop-down selector, as we did in the instructions in the “Slightly more advanced lists” section above.

To create the first example list above, I just clicked the bulleted list button, typed in my first list item, hit ‘return’, then ‘tab’, typed in my second level item, selected the “circle” option from the bulleted list drop-down options, and so on.

Advanced level list options

What if, for some reason, you needed to start a numbered list at a point other than the first number or letter? This is often necessary in legal documents or if you’ve gone off on a tangent from a previous list item and want to continue the list. How would you, for example, start a list with point number 5? i.e., instead of this:

1. How would you do something like this?
2. Continuing on like so…

You might want something like this:

5. How would you do something like this?
6. Continuing on like so…

If you hit the numbered list button, then start typing, it’ll automatically start at number 1. You can start by creating your list like that. Then you’ll need to get your hands a bit dirty — i.e., go into the code. Normally you’ll be editing your content using the Visual editor. But you may have noticed there’s also a Text editor tab, at the top right. If you click on that, you’ll see what the HTML code for your content looks like. From there, you’ll need to find this bit of code:

In case you’re wondering, the <ol> stands for “ordered list” and the “<li> stands for “list item.” We won’t get bogged down in the rules of coding, though. What you’ll need to do is add in start=”5″ after the first “<ol” — within that tag — so that the code now looks like this:

You can then go back into the Visual editor and should see that, indeed, your list now starts at number 5. Note that if you had selected a different type of numbered list — e.g., lower alpha — and you wanted it to start at “e” instead of “a” — you would still add start=”5″, not start=”e”. You’ll notice a bit more code with the non-default type of list, so the full code to create a list like this:

5. How would you do something like this?
6. Continuing on like so…

Would look like this:

There are more-advanced techniques, in order to customize the spacing, use custom bullets (e.g., checkmarks), etc. However, those involve using CSS (cascading style sheets) and are beyond the scope of this lesson. Speak to your web developer, if you want to get really fancy.

Until next time, use lists and use them wisely!