Special Formatting Options in Public Website WordPress

You may occasionally need to apply special formatting, such as an alert box or peekaboo, to content on your pages. You’ll need to edit the HTML directly to apply these special formatting options. If you are not comfortable doing this, please ask your Publisher or IT Services for help.

In WordPress, you can usually use Panels to make certain parts of your content display or function differently. However, sometimes you need to format your content in an alert box. Also, Panels are not available for Programs. The formatting options below provide an alternative.

The following areas allow the use of alert boxes:

Core content area
- All main pages
- Program Catalogue
- Umbrella pages
Panels
- WYSIWYG simple
- WYSIWYG column
- Accordion

Mark important content

The best place for your most important content is right at the top of your page or Program Overview subpage (not in a pageblock). If you need to mark a small section of content as more important, there are three options.

Important and time-sensitive announcement
This blue box is calling attention to your notice. Are you really, really sure this is important and timely information? Appropriate usage might relate to information about a major change to a program. This is the default alert colour, and is consistent with Banner-generated alerts. If in doubt, choose blue.

Important, less time-sensitive announcement
This grey version is making a note that is worthy of the user’s attention. Have you checked that it’s not competing with other key messages on the page? Is this really the most important piece of content on the page? Appropriate usage might include highlighting a change in program requirements for the upcoming term.

Alternative important and time-sensitive alert
This is an alternative alert to the default blue alert for a temporary-yet-important update. Appropriate usage might include information about an office closure.

You can add either option to either a single element, or a selection of them together. For each option, switch to the Text view to add the HTML.

To add a class to a single line or paragraph, use the following HTML:

<p class="attention">Please note, this program...</p>

Which will look like this:

The BCIT Alumni Relations team is working remotely and continues to support our valued alumni and partners. Please call 604-432-8847 ahead of time if you need to visit our office. The health, safety, and well-being of our staff and the wider community is very important to us. For updates from BCIT, visit the Breaking News page.

To add a class to a group of elements on a page, like a heading and a paragraph, you’ll need to add a container div to your content.

The HTML:

<div class="attention">
<h2>Tuition payment</h2>
<p>Please note, BCIT <strong>does not accept credit cards</strong> for payment of tuition and related student fees or for rent.</p>
</div>

Which will look like this:

Tuition payment

Please note, BCIT does not accept credit cards for payment of tuition and related student fees or for rent.

Because we recommend always including an explanatory intro with your bulleted list, once again you’ll need to add a container div to your content.

The HTML:

<div class="ofnote">
<p>Customers can choose from a variety of in-person payment options including:</p>
<ul>
<li>Cash</li>
<li> Debit card</li>
<li> Cheque</li>
<li> Bank draft</li>
<li> Money order</li>
</ul>
</div>

Which will look like this:

Customers can choose from a variety of in-person payment options including:

Cash
Debit card
Cheque
Bank draft
Money order

To add a class to a single line or paragraph, use the following HTML:

<p class="alert">The department will be closed...</p>

Which will look like this:

Accessibility Services will be closed from 8:00-11:00 am on Friday, May 21.

Peekaboo (“click to expand/contract” content)

The markup below will produce something similar to the Accordion Panel. Adding it to your content correctly will require significant care and attention to detail, and is best done by those with significant HTML experience. To add the Peekaboo markup:

Note: Do not use this in lieu of an Accordion panel if one is available.

Add your content as usual.
If there is not already a wrapper (a <div></div> pairing at the start and finish) around the content you want to affect, create one.
Add class=”peekaboo” to the wrapper/div.
Add class=”clicktoshow_off” on the initial line of text that the user would click on to show the rest. This should be inside the wrapper/div.
Use more sub-wrappers (divs, paragraphs, etc.) to identify what you want hidden and add class=”hide” to the sub-wrappers.
Important: Don’t hide the initial line of text identified above.

<div class="peekaboo">
<h3 class="clicktoshow_off">Header text to be clicked</h3>
<div class="hide">
<p>Text to be hidden.</p>
<p>Text to be hidden.</p>
<p>Text to be hidden.</p>
</div>
</div>

Special Formatting Options in Public Website WordPress

Mark important content

Example 1: Add "attention" to a single paragraph

Example 2: Add "attention" to a paragraph and heading together

Tuition payment

Example 3: Add "ofnote" to a bulleted list

Example 4: Add "alert" to a single paragraph

Peekaboo (“click to expand/contract” content)

Example markup

More information about working with content and formatting

More information about managing public website WordPress content