Lists

When to use

Our WordPress Visual editor lets us create both ordered and un-ordered lists. However, we have found that users frequently prefer to remove bullets from their lists. While it may be tempting to give up on lists and simply hit return in-between list items, this decreases the accessibility of your page. The Web Team Gurus have developed a list shortcode that allows you to manipulate unordered lists with ease. We do not support changes to ordered lists at this time. This shortcode requires at least one attribute. Note that the list style will not change in your editor. It will only change when you view the page.

Default list behavior (no shortcodes)

Unordered list

  • Unordered list first item
  • Unordered list second item
  • Unordered list third item

Usage:

[list anAttribute="anAttributeValue"][endlist]
Here we remove the bullets from a list

  1. Enter the list opening element and style attribute with the value no-bullets
    [list style="no-bullets"]
  2. Use the text editor to format your list.
    • Unordered list first item
    • Unordered list second item
    • Unordered list third item
  3. Close the list:
    [endlist]

Results

Code


[list style="no-bullets"]
  • Unordered list first item
  • Unordered list second item
  • Unordered list third item

[endlist]

Rendering


  • Unordered list first item
  • Unordered list second item
  • Unordered list third item

Attributes: style, left-padding, vspace

style

style is the attribute used above to remove the bullets from a list. This attribute takes only one value: no-bullets. As you can see above, this code maintains the indention from the bullet list.

left-padding

Many users do not like the jagged look produced by the style="no-bullets" attribute alone. left-padding is used to pull text even further left to the margin. left-padding can accept 3 values: min, zero, and custom value

5 pixel indention: left-padding="min"

Code


[list style="no-bullets" left-padding="min"]
  • Unordered list first item
  • Unordered list second item
  • Unordered list third item

[endlist]

Rendering


  • Unordered list first item
  • Unordered list second item
  • Unordered list third item

Example in use: IAS International Safety and Security

Custom pixel indentation: Use numbers to increase the padding, like this left-padding=”50″

Code


[list style="no-bullets" left-padding="50"]
  • Unordered list first item
  • Unordered list second item
  • Unordered list third item

[endlist]

Rendering


  • Unordered list first item
  • Unordered list second item
  • Unordered list third item

Zero indention: left-padding="zero"

Code


[list style="no-bullets" left-padding="zero"]
  • Unordered list first item
  • Unordered list second item
  • Unordered list third item

[endlist]

Rendering


  • Unordered list first item
  • Unordered list second item
  • Unordered list third item

Example in use: Math Library

vspace="compact"

vspace decreases the vertical spacing between list items, creating a more compact look. vspace takes only compact as a value.

Code


[list vspace="compact"]
  • Unordered list first item
  • Unordered list second item
  • Unordered list third item

[endlist]

Rendering

  • Unordered list first item
  • Unordered list second item
  • Unordered list third item


Further work: Inline lists? Font Awesome substitution lists?

Why this is important

Making sure that lists of things are marked-up as lists is important in increasing the accessibility and discoverability of our pages.