Lists and Outlines

Basic Lists

When creating lists, you are able to choose between bulleted lists (aka unordered lists) and numbered lists (aka ordered lists).

  • Here is an example of the default bulleted list
  • Example
  • Example
  • Example
  1. Here is an example of the default numbered list
  2. Example
  3. Example
  4. Example

Alternate List Markers

The bullet or number to the left of a list item is called the marker. There are many possible options for marker styles but each one needs to be enabled manually site-wide before it’s available to use on a given page. If you would like options other than the ones listed below, or would like assistance with applying the alternate markers, please contact Web Operations.

How To Use An Alternate List Marker

  1. Using the WordPress editor, create your bulleted or numbered list as normal.
  2. Click the Text tab in the upper right hand corner of the editor to switch to HTML view.
  3. Locate the starting tag of your list:
    1. For an unordered list, the tag will be <ul>
    2. For an ordered list, the tag will be <ol>
  4. Add the relevant class to the marker from the list below, using this syntax:
    1. <ul> will become: <ul class=”sample-class”>
    2. <ol> will become: <ol class=”sample-class”>
  5. Save the page and check your work

Alternate List Marker Options

Alternate Markers for Unordered Lists

None currently available

Alternate Markers for Ordered Lists

  • Uppercase Roman Numerals – use class “roman-numeral”
  • Lowercase Roman Numerals – use class “lower-roman-numeral”
  • Uppercase Alphabet Markers – use class “upper-alpha”
  • Lowercase Alphabet Markers – use class “lower-alpha”

Outlines

Using a combination of nested lists and alternate list markers, it’s possible to create an outline on a page. See here for an example.

Hints and Tips on Making Outlines

  • When copy/pasting content from Word that includes nested lists, WordPress will sometimes transfer the formatting improperly. It’s recommended to manually reconstruct the document in the WordPress editor when possible, rather than directly copy/pasting. If you run into this problem, contact Web Operations for assistance.
  • When constructing nested lists in the WordPress editor, press Tab on your keyboard to indent by one step, and press Shift + Tab to outdent by one step. This allows you to easily nest and un-nest lists.
  • Try constructing the entire outline first without changing the marker styles, and then apply the classes to each <ul> or <ol> tag, rather than doing both at the same time.