University Communications and Marketing

montclair.edu Page Structure

When creating and editing pages on montclair.edu, it can be helpful to understand how the pages are structured and what parts of each page are able to be updated by Content Editors.

Each page on montclair.edu is broken into three main sections:

  • The Header
  • The Middle
  • The Footer

Content editors mainly work within the middle area of the page.

To provide a consistent user experience and branding, as well as ensure that all montclair.edu websites meet accessibility requirements, the header and footer areas are generally the same structure across all pages on any montclair.edu website.

The Header

The header provides consistent site identification and navigation for all sites on montclair.edu in a way that’s tested compatible across a wide array of devices and that’s compliant with WCAG 2.0 Level A/AA accessibility standards.

While some items in the header pull information from the site (like the site name and menu), none of the HTML in the header is directly editable for content creators.

The header of every montclair.edu page contains:

  1. The University Logo, which links to the montclair.edu homepage
  2. The name of the montclair.edu website, which links to the individual website’s homepage (In the case of the above example, the website name is University Admissions)
  3. A white tab that contains the menu for the individual website (see below)
  4. A white tab that provides access to montclair.edu Live Search

Optionally, a montclair.edu website’s header may also include a red tab that links to the relevant montclair.edu Apply page. This can be enabled by Digital Communications when the site is set up, but may only link to either the Apply to Montclair State page, Undergraduate Admissions or Graduate Admissions.

The Middle

The middle part of the web page is the part that holds the page’s content. The middle is significantly different depending on whether you’re using the homepage template or the subpage template.

The Middle for Homepages

When using the homepage template (Advanced MSU Page) the middle of the page is a completely free-form area and everything that appears on the page must be put there explicitly by the content editor. For details on how to do this, see Homepage Band.

The Middle for Subpages

When using the subpage template (Default Template) the middle of the page has a handful of automatically generated elements.

  • Feature Image – content editors can select a featured image per page and WordPress will take care of building the responsive HTML.
  • Left Menu – a view of the site’s menu that shows the visitor which page they’re currently reading.
  • Page Title – this is automatically placed in an H1 tag with the appropriate ID to enable accessible navigation.
  • Content Area – the freeform HTML area where editors can directly place content.

The Content Area is the only part of a sub-page that is directly editable by the content editor. The other parts of the page are generated by the template in order to ensure they’re fully accessible, responsive and up-to-date.

The Footer

The footer area of the page is provided for visitor convenience and is mostly composed of University-wide information and links, but the individual website’s name and list of top-level menu pages both appear here.

The footer of every montclair.edu website page contains:

  1. The Montclair State University logo which links to the montclair.edu homepage
  2. Contact information for the University
  3. Links to Montclair State University’s main social media accounts
  4. The name of the individual website, which links to the website’s homepage
  5. An abbreviated version of the website menu
  6. The name of the University, which links to the University’s homepage along with an abbreviated version of the University’s website Menu
  7. A menu containing links to University policies and other links required for compliance

Content editors are able to influence the footer by changing their menus and by changing the site’s name, but they are not able to directly edit any HTML in the footer.

Site Menu

The Site Menu is a standard WordPress menu edited by the site editor. The first two levels of the menu are displayed in the header, but the menu can go deeper (visitors will be able to see deeper links in the Left Menu).

Also in the header, there is an under-menu content area which can contain additional links that you wouldn’t want to have as part of the navigation. In this example, Undergraduate Admissions uses the under-menu content area to display an additional “Information For” menu that gives visitors access to content based on audience. This area is not editable by content editors but can be configured by Digital Communications upon request.