Skip to main content

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.

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.

  1. Add your content as usual.
  2. 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.
  3. Add class=”peekaboo” to the wrapper/div.
  4. 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.
  5. 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.

More information about working with content and formatting

More information about managing public website WordPress content