Learning How to Use UH WordPress


Using Theme

A new Top Navigation that allows a user to override the default UH Manoa main navigation. On Mobile and Desktop versions of the Top Navigation, the navigation will only list the first level of the menu hierarchy.

Menu settings screen with display location 'Top Navigation' checkbox ticked.

Top ↑

 

Mobile View

Top Navigation (main menu) and Primary Navigation (sub menu) are listed together in the mobile menu.

Mobile view screenshot

Top ↑

 

Desktop View

The Top Navigation appears above the banner, and the Primary Navigation appears below the banner as a submenu. Any links below the first level of the Primary Navigation hierarchy appear on hover.

Desktop view screenshot

Top ↑

 

  1. Log in to your WordPress Administration Screen (Dashboard).
  2. Select Appearance → Menus.
Top ↑

 

Each menu is customized and managed as its own. First, select which menu to work on from the dropdown box and click 'Select'.

Menu dropdown screenshot
To edit a menu, you'll need to first select the menu by name from the dropdown menu.

Top ↑

 

First level menu items will appear on the main menu bar. Second level items behave as submenu option and appear on-hover of the main menu item it belongs to.

Menu layout including submenu items
Menu items that are indented will be treated as a submenu item of the first menu item above that is not indented like it.

Top ↑

 

Editing Menu Items

Simply check the pages, articles, or posts from the 'Add menu items' list and hit 'Add to Menu' button. It will create menu items to the right, where you can drag it to rearrange the menu order or place it under an existing menu item as a submenu item.

Menu items ticked off and added with the 'Add to Menu' button

Top ↑

 

Landing Page and Global Styles

The University of Hawaii has added the following format styles to its WordPress theme.

New List Style

Items listed with an orange colored right-facing arrow bullet

Top ↑

 

New Paragraph Styles

General Notice

A block of text in a light blue box to indicate that the content in here is important and informational

Warning Notice

A block of text in a yellow box to indicate the content in here is important or serves as a warning

Top ↑

 

Set Styles

First, create a paragraph block by pressing the + sign to open the block menu.

The block inserter displayed upon clicking the + sign. The paragraph block type is selected.

Once you fill your block with text/content, select the block, then select 'Styles' on the right-hand side.

The default paragraph style is selected, which is text against a white background

Then select your desired style option.

The General Notice style is selected, changing the text to be placed against a blue blackground within the block it is typed in

Top ↑

 

Editing and Selecting Blocks

When you’re working on a page or a post, you can easily create, customize, and arrange your content using the Blocks feature, which allows you to add various content in containers that can be moved around easily without impacting the format of other containers.

There are two selection options: 'Edit' to interact and edit with the content inside the box, while 'Select' to click on and manage the block without impacting the content inside.

The Block editor screen with the cursor icon selected, where a dropdown is presented either to select or edit the block

Top ↑

 

Block Navigation

The icon to the left is the Block Navigation, which shows how your page’s content is organized — and as an easy way to select each block to jump to it.

Block navigation displayed showing the contents that make up the page in the order the blocks are presented from top to bottom

From there, you have the option to quickly move it up or down the page’s hierarchy without breaking the format of photos or text from other blocks/containers.

An up/down toggle is displayed to the left of the block allowing the individual editing the page to move the selected Block among other Block content

Top ↑

 

Upload Department Banner

The banner image (above the main menu) can be updated at any time. It is recommended you choose a high-quality image with dimensions similar to the template’s native
banner dimension (1492 pixels × 132 pixels), and set a transparent background if your banner image is text-only.

  1. Log in to your WordPress Administration Screen (Dashboard).
  2. Go to Appearance → Customize.
  3. Choose 'Site Identity'.
  4. Click 'Select Image'. You will have the option of choosing an existing image from your Media library or uploading a new image.

If you are looking to format your department banner to incorporate the look and feel used on the University of Hawaii System and University of Hawaii at Manoa websites, you will need Trajan Pro for the main part and Trump Mediaeval for the "of", and "at" if applicable. Because the Trump Mediaeval font doesn’t include a kahako, it’s drawn by hand over the “a” in Mānoa.

UH Manoa nameplate featuring fonts used

You can learn more about the University of Hawaii university licensing regulations and graphics standards at https://www.hawaii.edu/offices/communications/standards/graphics-standards.

Top ↑