Glossary and How-To Guide

When you first set up a page, you’ll notice a Page Attributes module on the right-hand side of your WP Admin view. There are two template options to choose from: Sidebar and Full Width.

The sidebar template is best used for a secondary, information based page. The template will include a sidebar navigation component allowing for a native WordPress menu to be shown, a custom set of links, and a custom widget area for additional text.

The full width template is best used as a landing page, or a parent page for collection of secondary pages. Component blocks that are added will span the full width of the page.

You have the option to add a sidebar menu to your pages. These are useful on many sites where there are multiple child pages of a primary parent page.

If you choose to include a sidebar, you have two ways to populate the menu:

1. Pick a custom pre-built menu that you’ve made within the Menus area of WP Admin
2. Populate the sidebar automatically based on the website’s structure. If you have a very large site with many parent and child pages, tread carefully if you want to use this option, as the sidebar menu can get very long.

You also have the option to add in additional text that will populate underneath the menu in the Custom Text field. This can be a helpful content card to drive folks to another relevant area of the website that may not be surfaced in a sidebar menu.

Within WP Admin, you’ll see two different areas where you can add and build out your components: Narrow Width Content and Varied Width Content.

Narrow Width Content only shows on pages that are using the sidebar template. The Narrow width content allows administrators to style and place component blocks adjacent to the sidebar navigation menu.

Varied Width Content is the only option available in the full-width template, and will show beneath the Narrow Width Content component section when using the sidebar template. Varied Width Content will span the full width of the page, with additional settings to limit the components max-width to 843px wide or 1280px wide.

A Block Anchor ID is an optional field that allows you to have an anchor, or jump link, to a specified component. you can use this new URL to have users jump down the page to a specified area. An example use case is if you have a lot of content on a single page, you can use navigational cards at the top of the page and anchor links to have folks jump down the page to a specific topic of interest.

Note: You don’t need to add a “#” before the text in the Block Anchor ID field. Your new anchor link will be the page URL, plus a “#”, plus your Block Anchor ID.

Example: https://www.rochester.edu/components/glossary-and-how-to-guide#test. The “test” is what would have been input into the Block Anchor ID field.

These are optional additional codes that let you customize how a specific component displays on a page. Learn more about these on our CSS Classes page.

The Block Width is how far across the page a particular component will span. In most instances, you’ll have three width options:

1. Narrow: This is the smallest option and allows content to be aligned consistently down pages where you’re using a sidebar. This means content will be staggered slightly to the right-hand side of a page.
2. Default: This is a standard width option.
3. Full Width: This option has a larger bleed across pages. Content will expand almost all the way across the webpage.

Within the title and content fields of almost every component, you’ll see a “What You See Is What You Get” (WYSIWYG) text editor. This is a helpful way to visually see how the updates you’re making will look. We wanted to provide users with as many customization options for their text as possible.

The WYSIWYG editor includes a variety of ways to style your text. You can see visual mock-ups of these options on our Formatting Options page.

A few other helpful features in the WYSIWYG editor include:

• Using the Blockquote button to add a pull quote treatment to text
• Using the Toolbar Toggle button to open up additional text editing options
• Using the Paste as Text option to paste content from a Word document or another source. This ensures no extraneous styling code is applied, which can sometimes be difficult to catch.

We encourage you to play around with the text editor to get comfortable. This WYSIWYG editor is present across multiple types of components, and will play a big role as you’re building your website or updating your webpages.

Note: If you prefer to write copy in a more traditional code-editing format, you can toggle to Text in the top right.