Lists

About Lists

Lists are some of the most common elements after text and headings. DO NOT simply copy/paste a list from a text document; use the WYSIWYG editor or html code to build your list. Below is a comparison between a list copied over from MS Word and one created in the WYSIWYG. Notice how it isn’t indented or have any special spacing to show it’s a list?

My Badly Formatted List

• Oranges
• Avocados
• Eggs
• Milk
• Yogurt
• Bananas

My Correctly Formatted List

  • Oranges
  • Avocados
  • Eggs
  • Milk
  • Yogurt
  • Bananas

How to Make Lists

If you’re new to WordPress or HTML, you might be wondering “Well how do I make a formatted list?” No worries it’s very easy. A list is made of two parts, the list container, and the list items.

There are two types of list containers, the <ul> and the <ol>. The <ul> makes an “unordered” list, which uses bullet points. Use this for data that is presented in no particular order. The <ol> by contrast, is for “ordered” lists; use these only when the data is meant to displayed in a specific order: for instance, step-by-step directions, or ranking items.

The list items are even easier. All list items use the same tag, <li>.

Putting it all together, the code for our example list looks like


<ul>
<li>Oranges</li>
<li>Avocados</li>
<li>Eggs</li>
<li>Milk</li>
<li>Yogurt</li>
</ul>

If you don’t want to write out the code, or can’t remember it, the WYSIWYG editor can help you do it easily.

  1. First, click the “Text” button to get into the text editor.
  2. Then, click the “ul” or “ol” button to open your list
  3. Next, click the “li” button to open your list item. Type or paste in your list item. Hit the “li” button again to close the item
    Alternatively, type or copy your item first. Then highlight/select the item. While it’s selected, click the “li” button.
  4. Repeat step three as necessary.
  5. Finally, click “/ul” or “/ol” to close the list. Be sure to click the same one you did before.

Issues

Our WordPress theme sometimes doesn’t format list items correctly and can result in some sentences or items having very tiny text. This is especially common when a list item includes multiple paragraphs. If this happens to you, don’t panic! Just add paragraph tags(<p>) around whatever text isn’t formatting correctly. Make sure your paragraph tags are nested inside your “li”‘s’

For instance:


<li><p>Next, click the "li" button to open your list item. Type or paste in your list item. Hit the "li" button again to close the item</p>
<p> Alternatively, type or copy your item first. Then highlight/select the item. While it's selected, click the "li" button.</p></li>