Skip navigation

WordPress School – Lists

Badge - Learn WordPress with Lorelle VanFossen at WordPress School.Today in Lorelle’s WordPress School online course learning WordPress from the inside out, we are going to learn how to create lists in WordPress.

A list is just that, a list of items. The list may contain a wide variety of information and be presented in many different ways. Let’s start with simple lists and move into more sophisticated list making as we go through the course.

We begin with exploring the HTML tags that make up a list and the two basic types of lists found on a web page.

The HTML List Tags

While it is not important to know HTML to blog or use WordPress, learning WordPress from the inside out means learning how web publishing works from the inside out as well. Don’t worry. I’ll go easy on you. NOT.

There are two basic types of lists found on a web page: numbered and unnumbered (bullet).

  • Item one
  • Item two
  • Item three

The above is an Unordered List known as a bullet or bulleted list, and its HTML tag name are the initials for Unnumbered List: <ul>.

<ul>
<li>Item one</li>
<li>Item two</li>
<li>Item three</li>
</ul>

The unordered list is used for lists without sequence, like a shopping list. Unordered lists are good for recipe ingredients, general lists, and any list that doesn’t require order.

The next list is a numbered list, called an Ordered List in HTML featuring the <ol> tag.

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

Viewed in the HTML as:

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

The ordered list features a list of items in a sequential order, one, two, three, and so on. Ordered lists are used for anything that requires a count or step-by-step sequence such as driving directions, cooking instructions, or the technical instructions highlighted below demonstrating how to create lists in WordPress.

Note that the center HTML tags are <li>, which stands for list item. The HTML tags are the same for the list items in each list, with only the opening HTML tags for the Unordered List and Ordered List changing. Each list opens with the tag designating the type of list, includes each list item, then closes the list.

You thought this would be hard.

Why do we use these lists and HTML tags?

People like lists. We make them daily as part of our personal and work life. They are important to us in our life so when we see them, we pay attention to lists to what we are reading. They tell us that there is order and structure in the world, and we better follow it.

Not everything should be in list form. Lists are like all design elements found on a website, a little may go a long way. Be judicious and use lists appropriately. Still, many will tell you that posts like “The Top 10 Ways to…” or “99 Tips to…” are hot tickets on the web. We like numbered things and things in order.

In an article on ClarkWP WordPress Magazine by one of my Clark College students, Tonya Bower, she researched web accessibility laws and guidelines on the usage of lists for compliance and said this:

Using ul, ol, and dl elements for defining list content ensures users with disabilities can easily distinguish a list from the rest of the content and move between items of a list and between lists themselves…

…Lists must be displayed as HTML lists not lines of text so they are visually and contextually recognized as lists. The use of list HTML tags helps to reinforce the visual design element of a list, and screen readers for the visually impaired read these as lists.

Humans love patterns, seeking order in disorder and anarchy. Bullets denote specific points of interest for the eye, and a number sequence just begs to be followed from one to end.

List are visually compelling. By visibly turning a group of words into a list on the web, it pulls the eye down through the list, and through the article.

How to Make a List in WordPress

Screenshot of the WordPress Editors - Text and Visual - Lorelle's WordPress School.WordPress features two post/Page editors for publishing content. For most of you, this will be your first introduction to these. I will keep this brief and simple, explaining the different editors more next week. Found in Edit Post and Edit Page screens, the two WordPress editors are called visual and text.

NOTE:WordPress.com is currently working on a new Visual Editor called the “new and exciting interface” on the Admin Screens. We will be learning the Classic Editor until the new editor is finalized in its development.

The Visual Editor is a WYSIWYMG editor. Ah, you thought I wrote WYSIWYG (pronounced whizzy-wig). I spelled that WYSIWYMG (pronounced whizzy-mig), What You See Is What You MIGHT Get.

While WordPress developers continue to work on the Visual Editor, it still may not represent the publish results on the front end view of the website. This is where the Preview button comes in. It permits you to see a preview of the post as it would appear to readers before you publish the post.

I’ll explore these more later, but for now, treat the Visual Editor like you would a word processor.

Screenshot of Lists - Numbered or Ordered List in the WordPress Visual Editor - Lorelle WordPress School.

To make a list in the Visual Editor:

  1. Place your cursor in the post text area where you wish to begin your list.
  2. Click the Numbered or Ordered List button in the WordPress toolbar.

    Screenshot of Lists - Start the Bullet List - Lorelle WordPress School.

  3. Start typing your first list item. Hit enter at the end of the line. Keep making list items until finished.
  4. Hit enter button on your keyboard twice or click the List button to discontinue making a list.

    Screenshot of Lists - Finish the list in the Visual Editor - Lorelle WordPress School.

The cursor will move back from the indented list to the left margin.

Move your cursor back into the list by clicking within the list. Look down at the bottom of the post text box (textarea) and see some characters, letters that spell out ul > li. This is the HTML tags hint area. Move your cursor above or below the list and it will change to a p to indicate that you are now typing a paragraph within a paragraph HTML tag.

Screenshot of Lists - Visual Editor HTML Status Bar - Lorelle WordPress School.

The Text Editor used to be called the HTML Editor in WordPress and you may find that mentioned in some books and tutorials. It is an editor that permits the user to type in HTML.

To make a list in the Text Editor:

  1. Place your cursor in the post text area where you wish to begin your list.
  2. If you know HTML, start typing the HTML tags to create your list. If you do not know HTML, you may use the buttons:
    1. Click the list button type. OL is Ordered List (numbers) and UL is Unordered List (bullets).

      Screenshot of Lists - Start the HTML Bullet List - Lorelle WordPress School.

    2. Click LI for the first list item and type it.

      Screenshot of Lists - Start the next HTML list item - Lorelle WordPress School.

    3. Click the /LI button at the end of the list item and hit ENTER to go to a new row.

      Screenshot of Lists - Close the HTML list item - Lorelle WordPress School.

    4. Click LI for the next list item and type it.
    5. Click the /LI button at the end of the list item and hit ENTER to go to a new row.
    6. Rinse and repeat.
    7. When ready to finish or close the list, click the /OL or /UL button to close the HTML list tag.

      Screenshot of Lists - Close  the HTML list - Lorelle WordPress School.

Avoid Switching Between Editors

Lorelle WordPress School Tips and Techniques Badge.For the most part, nothing will be technically hurt if you switch between the Text and Visual Editors, but it can mess up your HTML if you are using HTML tables or other nit-picky HTML code. WordPress does its best to fix broken code and make content code meet web and WordPress code standards, but switching back and forth also strips spacing, mangles code, and sometimes breaks the structure of your carefully crafted post content. Not often, but when it does, remember this warning.

The buttons and numbers for the basic lists will not appear visually in the post text area. To see them, AVOID switching to the Visual Editor. Simply Save Draft and Preview the post using the two tab method.

The look and feel of the HTML lists in your post is dictated by the WordPress Theme. Bullet lists may feature square, round, or check marks of varying colors and sizes. They may be graphic images representing the visual bullets, too. Numbered lists, however, are usually just numbers rather than different types of numbers such as Roman Numerals or legal numbering.

When viewing the front page view of a post with lists, notice the format and spacing.

  • Are the bullets indented from the left margin or against the left margin?
  • How much spacing is there between the bullet and the number and the start of the words in the line?
  • How much space is there between the lines? Is it the same for numbers and bullets or different?
  • How large are the bullets and numbers in relationship to the size of the font?

When we move into site customization and WordPress Themes, you may have a chance to change the look and feel of the lists on your site, so pay attention to these design details.

There are many ways to do lists in WordPress. This is just the first lesson in making lists.

For more information on lists:

Assignment

Lorelle's WordPress School Assignment Badge.Your assignment today is to make HTML lists on your previously published post and Page, as well as tomorrow’s assignment.

Number 1Revisit your first post in the article series and add a list. It may be an ordered or unordered list. Simply edit the post and add the list, and hit Update to update the post.

Consider carefully which type of list format to use. Remember that unordered lists have no need for sequence, though some unordered lists work better when alphabetized. Ordered lists take us on a numbered journey through information and instructions on your site.

Number 2.Have a list on your About? Edit the Page and update it to a properly formed HTML list, or add one if you wish.

In tomorrow’s assignment, you will be creating the second article in the article series as we learn about how to write and and publish content in WordPress. We are now moving into the section I call “What Can You Put Into WordPress” covering all the things people stuff into WordPress.

This is a tutorial from Lorelle’s WordPress School. For more information, and to join this free, year-long, online WordPress School, see:

Subscribe to Lorelle on WordPress. Feed on Lorelle on WordPress Follow on Twitter. Give and Donate to Lorelle VanFossen of Lorelle on WordPress.


7 Comments

  1. Posted February 16, 2015 at 8:40 am | Permalink

    Reblogged this on Guy R Cook …. thinking aloud and commented:
    Lists for WordPress

  2. Kamal
    Posted February 16, 2015 at 5:05 pm | Permalink

    Great post. It’s also useful to mention that lists can be embed within lists.

    • Posted February 17, 2015 at 10:00 am | Permalink

      These are called nested lists, not embedded lists, just to keep the language clear for everyone in this class. That comes later.😀 The confusing jargon as well as nested lists. LOL! Thanks.

    • Kamal
      Posted February 18, 2015 at 2:05 am | Permalink

      Yes nested lists, sorry🙂

  3. Posted February 24, 2015 at 8:39 pm | Permalink

    I remember the first time I used a ul list on a post. I guessed from MSWord what it might be and sure enough. It was all uptown then. That and headings. Yee haw. I love a magazine page look. Old school here. I mean, you aren’t going to break anything, you know. In most instances you just “Ctrl Z” your way back out if somethings goes sideways on you. Really enjoying this. Thanks again, Lorelle. I’m the kind of guy that likes to know how and why it works, not just how to do it. Let’s keep taking this clock apart.

    • Posted February 25, 2015 at 5:11 pm | Permalink

      LOL! It’s all part of the learning. Glad you are having fun with it. I’m breaking it down into its smallest bits to help those often overwhelmed. Thanks.

  4. Posted April 6, 2015 at 10:33 pm | Permalink

    Reblogged this on Just Cause.


10 Trackbacks/Pingbacks

  1. […] « WordPress School – Lists […]

  2. […] five posts. On that unpublished post, which we will work on this week and into next, you will have added lists and today we are working on headings. As we progress forward with the second post, you will be […]

  3. […] WordPress School – Lists […]

  4. […] to your series. In the second post in the series you were to write a tutorial featuring headings, lists, and images. Today we are going to add […]

  5. […] been working through some basic content features in WordPress including links, lists, headings, preparing images to upload to WordPress, embedding video, and exploring the visual and […]

  6. […] The article series in this WordPress School requires several sets of HTML lists. […]

  7. […] one exploring different content features and functions of WordPress. So far, you’ve explored lists, headings, preparing images to upload to WordPress, embedding video, the visual and text editors, […]

  8. […] Lists of tools, supplies, ingredients, and other […]

  9. […] the tutorial on creating links in your WordPress content, I mentioned that I’d love to do an entire college course dedicated solely to the power of […]

  10. […] have some specific tutorials or reading guides to help people with your blogging topic? Consider creating a list of links to those articles such as a series on learning how to paint, knit, or buy a new home, […]

Post a Comment

%d bloggers like this: