Page Templates
Depending on the content you want to publish, you can choose from different templates provided in the theme. By choosing a template, you can create an entirely different page design. So, for example, your “About” page doesn’t have to be the same as the “Home” page.
Select a page template from the Template dropdown in the Page Attributes section of the Edit Page screen in WordPress. The following page templates are available in the Boise State WordPress theme.
Default Template
This page and most pages on the Boise State website use the Default template. It allows for page content to be entered via the default WordPress text editor, which will always be displayed at the top of the page.
Panels may also be added to this template. If used, panels will display below the default text editor content and will be displayed the full-width of the available screen.
This template includes the following features:
- Site breadcrumb navigation at the top of the page.
- An optional Section Navigation menu. This is best used for collection of similar topic pages. For details about Section Navigation, visit the Menus page.
Note: The WordPress page title will be used as the Heading 1 (h1) for pages using the Default template. The first heading you should add in the default WordPress text editor is a Heading 2 (h2).
Section Main Page Template
Use this template for a site front page (or “home” page). It can also be utilized for the main, introductory page of a section of a site. An example of this template is the Webguide homepage.
This template contains a specific “Subheader” section in the editor that includes the following fields:
- Accent Title: Add an optional accent title. Note that the accent title is not a heading and should be used for supplemental information, like a tagline.
- Title: Add the name of your website (department, center, college, etc.) to the Subheader Title field. This text will populate the main header at the top of the page and will be the Heading 1 for the page.
- Title Resize? Use this option if the Title includes a long word (12+ characters) that does not fit into the available space on smaller screens. Although this feature will be necessary for some departments and programs, it can impact page load time and site performance if used unnecessarily. This option should be left unchecked unless the Title includes a 12+ character word that exceeds the available space.
- Body Copy: This is an optional field for adding text content below the Title. If you want to briefly describe your purpose, mission, call to action, etc., here’s where you add it. For best results, don’t use more than 20 words. HTML lists are not supported in the Body Copy.
- Button Link: This is an optional URL field for a link in your header, so you can add a button for a call to action in your header section. This field requires a full URL to pass validation (ex. https://www.boisestate.edu). The page will fail to save/update if the address isn’t typed correctly.
- Button Label: This is a text input field for the button label.
- Media Type: Select “Image” or “Video Embed”.
If you select “Image” the recommended image size is 1300px x 687px. The selected image will appear in the left side of the two-column layout for the header. Please note that alt text is required for the Subheader image.
If you select “Video Embed”, add the link to your video; e.g., if the video is hosted on YouTube, paste the “Share” link here. Add an optional video thumbnail image to display before the user plays the video. For best results, keep the Body Copy brief when using the Video Embed option.
If no media is selected, the Section Label and Title will be placed in the left side of the two-column layout.
Note: The Title text will be used as the Heading 1 (h1) for any page using the Section Main Page template.
Note: Forms should not be used in the subheader section because there is not enough contrast between the background and the form field descriptions. Forms should go in the page content areas only.
Panels Template
The Panels template will not display your site’s breadcrumb navigation at the top of the page. The Panels page template is intended for stand-alone pages that do not require links to other similar topic pages within your site and should be used on a very limited basis. To create a consistent user experience, most pages on the site should use the Default page template.
Pages using the Panels template should include only content in panels. Do not add content to the standard WordPress text editor on pages using the Panels template. When you select the Panels page template and save the draft of the page, the standard WordPress text editor will be removed from the Edit Page screen.
Creating Accessible pages with Panels Page Template
The title of the first panel on the page will be used as the Heading 1 (h1) for pages using the Panels template. Be sure the title of your first panel is an accurate representation of the content on the page. Keep in mind, certain panels have additional heading styles built in that could affect the heading order and usability of the page. Please review the table for additional accessibility information for using panels with the Panels page template.
| Panel Type | Accessibility Notes |
|---|---|
| Interstitial Panel | Do not use the Interstitial panel as the first panel on the page. The Interstitial panel is intended to add a large image and engaging text between other panels on a page and should not be used as the first panel on any page. |
| Card Grid Panel | The cards in the Card Grid panel display as a heading 3 and will cause a "Headings are not nested properly" (WCAG AAA) error when used as the first panel on a page using the Panels page template. |
| Events Feed Panel | Each event title in the Events Feed panel will display as a heading 3 and will cause a "Headings are not nested properly" (WCAG AAA) error when used as the first panel on a page using the Panels page template. |
| People List Panel | The person names in the People List panel display as a heading 3 and will cause a "Headings are not nested properly" (WCAG AAA) error when used as the first panel on a page using the Panels page template. |
| News Feed Panel | The post titles in the New Feed panel display as a heading 3 and will cause a "Headings are not nested properly" (WCAG AAA) error when used as the first panel on a page using the Panels page template. |
Editorial Page Template
This page template allows you to choose a Featured Post to appear at the top of the page. This template contains a Featured Post section with a dropdown that pulls all local site Posts as options for display. The featured image for the post will be displayed in the header area at the top of the page. The Featured Post is followed by any content found in the page’s main text editor field, then by any Panel content for the page.
The Editorial Page template can be used as the primary news page for a site.
Note: To avoid heading accessibility errors and improve the user experience on pages using the Editorial page template, please use the following content guidelines.
- If you do not need to use panels on the page, add all of the page content to the default WordPress editor. In this case, the WordPress page title will display on the page and will be the Heading 1 (h1) for the page.
- If you plan to add panels to the page, place all of your content in panels and do not add any content to the default WordPress text editor. The page template will use the title of the first panel on the page as the h1.
Marketing Page Template
The Marketing page template is intended to be used for marketing campaign landing pages only. This page has reduced global navigation and can be used for stand-alone, campaign-focused pages on your site. This template should not be used for standard content pages.
Note: To avoid heading accessibility errors and improve the user experience on pages using the Marketing page template, please use the following content guidelines.
- If you do not need to use panels on the page, add all of the page content to the default WordPress editor. In this case, the WordPress page title will display on the page and will be the Heading 1 (h1) for the page.
- If you plan to add panels to the page, place all of your content in panels and do not add any content to the default WordPress text editor. The page template will use the title of the first panel on the page as the h1.