WordPress School – Lists

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

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.

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.

   

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.

   

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.

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).

      

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

      

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

      

   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.

      

Avoid Switching Between Editors

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:

• How to Make HTML Lists – ClarkWP Magazine
• Tutorial: How to Create a Link List – ClarkWP Magazine
• Web Accessibility: Lists – ClarkWP Magazine
• Blog Exercises: Making Lists
• Blog Exercises: The Art of List Making

Assignment

Your assignment today is to make HTML lists on your previously published post and Page, as well as tomorrow’s assignment.

Revisit 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.

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:

• Lorelle’s WordPress School Introduction
• Lorelle’s WordPress School Description
• WordPress School Tutorials List
• WordPress School Google+ Community
• WordPress Publishing Checklist
• How to Give Feedback and Criticism

---