Creating Headings, Lists, Tables, and Other Core Content Elements in WordPress

Note: Before adding a heading, ensure that you are familiar with the BCIT public website WordPress standards that apply to headings. The most important things to remember are:

• Only use H2, H3 & H4 heading styles: H1 is reserved for the page title, and headings past level 4 are not within the BCIT standard for content.
• Apply the headings in order: In-page headings and panel elements should follow a logical progression and architecture and must not skip levels within a page. All H3s should be preceded by H2s, all, H4s should be preceded by H3s which are themselves preceded by H2s.
• All in-page headings and panel titles should be capitalized in Sentence case (with only page titles and taglines in Title Case)

To add a heading, in WordPress

1. Highlight the text that you would like to set as a heading.
   
2. Click on the Styling drop down menu in the editing toolbar and choose the heading type you would like to assign to this heading.
   
   • Note: The highest level of heading in a page’s content should be assigned Heading 2. Subheadings underneath that highest level of heading should be assigned Heading 3, then Heading 4. These should be applied in order, paying attention to any panel headings that may be automatic.
3. The heading should now appear larger and darker than it did before.

Note: If you are using panels, some of them include a title field. Anything that you put in that field will be formatted for you, usually as a Heading 2.

Bulleted or numbered lists can make lists or instructions far easier to read and are a good way to break up information. WordPress makes this very easy by including both list buttons in the editing toolbar.

Simple bulleted list

1. In the content editing window, highlight the set of list items.
2. Click on the Bulleted List tool in the toolbar.
   

Your list items will now have a bullet at the beginning of each line and will automatically indent wrapped text.

Simple numbered list

Numbered lists should usually only be used when there is a sequential set of items where the order matters.

1. In the content editing window, highlight the set of list items.
2. Click on the Numbered List tool in the toolbar.
   

Your list items will now have a number at the beginning of each line and will automatically indent wrapped text.

Occasionally, something in a list needs to be broken out into more detail. This is a good time for a nested list.

1. In the content editing window, highlight the set of items that are part of the sub-list.
2. Click on the Increase Indent tool in the toolbar.
   

Your list items will now be indented and work as a separate list inside the first list. You should also be able to make a bulleted list under a numbered list item or vice versa, simply by clicking the appropriate list-type button in the toolbar.

Important: Tables are very useful methods of displaying information that is too detailed or complex to describe adequately in the text. However, it’s very important to follow the published standards on tables, and to never use to tables purely as a method of applying formatting or layout to content.

Table accessibility

When we think about table accessibility, we are frequently considering the needs of, in particular, screen reader users. Tables that are correctly formed (with correctly identified table headers) can be an accessible method of displaying information, especially if the information contained in the table is also briefly described or summarized in the paragraph preceding it so that screen reader users can choose to skip the table content if they do not immediately need that level of detail. Unfortunately, it is exceptionally easy to produce tables that don’t meet the minimum standards for accessibility. Following the steps below will help you to create tables that not only meet accessibility standards, but which are also more readable for sighted users.

Inserting a table with the built-in table tool

In WordPress:

1. Put the cursor where you want to add the table in the content editing area and click the table tool in the formatting toolbar. Hover your mouse cursor over the Table menu item, and then use the grid to select the number of columns you want to add, with at least two rows of cells (it’s easy to add more rows later).
   • Note: If the table tool is not visible, you may need to click the Toolbar Toggle tool in the toolbar to make the second row of editing tools visible.
2. Put the cursor anywhere in the top row of cells and click the Table tool in the toolbar. Hover your mouse over the Row item, then click Table row properties.
3. Click the Row type drop-down menu and change the row type from Body to Header.
4. For each column, put the cursor in the top cell and click the Table tool in the toolbar. Hover your mouse over the Cell item and choose Table cell properties in the submenu.
5. Click the Cell type drop-down menu and change the cell type from Cell to Header cell.
   • Note: When you change the cells into Header cells, the background colour and text formatting will automatically change to match the BCIT standard appearance for table headers, even before you add any text.
6. Add the column title to each of the cells in the top row and then fill in the rest of your table with your data.
   • Note: Hitting tab with your cursor in the last cell in a row adds a new row to the bottom. You can also use the table tool to insert rows above or below existing rows as necessary.

The table and columns will expand to fit the content you add and to fit the page and viewport of the user. It’s usually best to let it find its own size.