CDS Degrees & Programs

Degrees & Programs is a "post type" that contains information about various courses, degrees, and programs offered by entities across Boston University that CDS is involved or associated with.

There are 3 types of Degrees & Programs posts: Pages, Programs, and Degrees.

Post Options

Degrees & Programs posts include several navigation components to help users understand where they are within a section. The navigation and post hierarchy is managed by the BU Navigation manager.

Edit the order and hierarchy of posts within the Degrees & Programs segment of your site by logging into the WordPress admin for CDS Faculty and (from the left sidebar) hovering over Degrees & Programs and clicking Edit Order — or: by selecting the “Placement in Navigation” meta box from the right-hand side of an individual Degree & Program post when editing.

A modified image highlighting the location of key navigational parts of a Degrees & Programs post type.

Breadcrumb Navigation

Located across the top of the page, or just under the banner, if the page has a banner. This adapts as users make selections to show the path they've followed in navigating posts.

Sub-Navigation

Located under the breadcrumb navigation and adapts as users make selections to show the next adjacent sub-post(s) to the current post.
It includes a CTA button which is editable from the post type within the admin(See Program Call To Action section below for more.).

Areas of Study, Areas of Interest

Located beneath both the Breadcrumb and Sub-Navigation. This section appears on Program and Degree types. This section includes links back to the landing pages for any related Departments/Divisions focused on an Area of Study. These are controlled by adding the Area of Study taxonomy to a Degrees & Programs post type.

NOTE: Areas of Study and Areas of Interest taxonomy terms will need to be included for every Program & Degree type. Not including them will result in an empty space which still outputs visually as an empty bar.

To set the location for these Areas of Study links, navigate to Degrees & Programs > Area of Study. To set the link for the Area of Study, choose the Landing Page you would like to set it to by editing the term from the list of available Areas of Study. At the bottom of the editor, there is a dropdown labeled “Landing Page”. Choose the appropriate landing page for the selected Area of Study.

Section Navigation

Located at the bottom of the post — between the main page content and the footer. This area gives the user an overview of all Degrees & Programs posts and sub-posts within them.

Activating Degrees & Programs

To enable the public to access Degrees & Programs posts, a custom link needs to be added to the BU Navigation manager. This can be done by in the WordPress admin and navigating to Pages > Edit Order. From there, click Custom Link and paste the URL path of your main, parent Degrees & Programs post.

Block Editor

The content area for Degrees & Programs posts utilizes the new block editor from WordPress.

  • Page Type Blocks ( Example ) — suitable for a parent Landing Page and additional child sub-post(s) within a Program or Degree post.
  • Program Type Blocks ( Example ) — suitable for an overview of a program dedicated to a field subject (i.e.: Data Analytics, etc.)
  • Degree Type Blocks ( Example ) — suitable for detailing a specific degree offered (i.e.: MS in Data Analytics, etc.) and listing any applicable courses.

See examples, and learn more about each block below:

BU Degrees & Programs List

Used to display available programs or degrees at-a-glance, this block can be a vital way of demonstrating or curating an easy, consolidated range of offering CDS is associated with by providing featured imagery, excerpts and program page settings.

It comes with the ability to rename the title of the block, define a button with a URL to link elsewhere[to view more], and a layout selection of either List or Grid/Cards view. CDS is advised to use the Grid/Cards view. There's also options to hide featured images, excerpts, or details. Settings are of preference but it's recommended to show all to take full advantage of this blocks capabilities.

Which programs and/or degrees are displayed are defined by the Mode selection. Setting Mode to Query Mode allows you to automatically pull in and narrow to programs and degrees based on options defined in  their Program Page Settings(see below). It also allows you to limit the number of entries and how they're ordered which is great for quickly getting things up and running. Setting Mode to Manual allows you to search for specific programs or degrees to include. This approach is great for curation if you're looking to showcase new or featured programs and/or degrees as there can be multiple BU Degrees & Programs List blocks to a single post.

It's best advised to define a BU Degrees & Programs List with either programs OR degrees: rarely should both be put together in the same block, in order to avoid contextual confusion.

Media & Text

An example of a Media & Text block using a "Show Media on Left" layout.

Used to display an image next to a short amount of text, this block is a great way to add some visual interest to the page, help break up content, and make an offering more readable and interesting for users. The image portion has a treatment exclusive to this theme applied on both left and right hand sides to make it feel like it's part of the page.

You have the option to choose whether you want the image media to be positioned on the right or left of the text. You have a number of options of content blocks that you can add to the content section of this block, including a heading, paragraph, button, etc. — however it's important to be mindful that content doesn't visually disrupt the equal balance between the two. It is recommended that both the “Stack on mobile” and “Crop image to fit entire column” options are turned on for best results.

Cover

Used to display a large background image with text overlaid, this block is another great way to lead in content and/or break up content on a page to add visual interest. A number of different content blocks can be included on top of the image (specifically a heading, paragraph, button, etc.) when set in a Group. To get the specific background treatment demonstrated above(in place of a background image), use the word shaded in the Custom CSS<CSS field located under the Advanced section within Cover Block Options.

Column Block

An example of a simple 2 column equal layout using an image on the left and textual information on the right.

Used to display a large image with text overlaid, the column block is another great way to break up content on a page and add visual interest. You can add a number of different content blocks within one column and a solid image in the other, with plenty of column layout options to build from. The recommended usage would be the equal 2 column treatment.

Shortcode

This block is used to include shortcodes within the block editor. An example of a great way to utilize this block on Degree pages is to use BU Profile shortcodes to show related faculty or staff profiles. You can also use this block to pull in Course Feeds, which display courses required for a particular degree.

Form

The Form block is used to display a Gravity Form on a page. It requires an established Gravity Form to work. Select the desired Gravity Form from the dropdown of the block.

Editor Templates

An example showcasing how to access the Select Editor Template tab within the Degrees & Programs post type editor.

Included with the Degrees & Programs post type are select templates of predefined content blocks. These are accessible under a Select Editor Template button located next to the Preview, Update and Settings buttons in the top-right corner of the post editor. The most commonly used and appropriate templates are Program Content and Degree Content. You can choose either to Replace, Append, Prepend, or Merge these preset blocks with your existing content or if starting a post from scratch.

Program Page Settings

When creating a Degrees & Programs post (underneath the main post block space) there are various options from which selections can be made depending on the type:

Page Type


Program Type


Degree Type

Program Call To Action

Towards the bottom of the page, under “Program Call to Action” you can enable a CTA button that will appear in the Sub-Navigation. This is great for directing users to a post or 3rd party page to either apply or to a page with a form for requesting more information. You can also select whether it will appear on all of a posts child sub-posts.

SEO, Custom Metadata Tags

Also at the bottom of the page, under “SEO, Custom Metadata Tags” you can make adjustments to the Page Title and meta data displayed by search engines such as Google to optimize your SEO.

Featured Image

A Featured Image for a post being edited can be attached in the right sidebar, under the Document tab. Uploading or selecting an image here will show it as a thumbnail image for the post on a Related Program block used on program or page posts.

Excerpt

An excerpt for a post being edited can be attached in the right sidebar — also under the Document tab. This will show a brief description for the post on a Related Program block used on program or page posts. It's advised this be written to align with the program's summary and/or degree's details.

Enable Degree Options

To enable degree options for the Degrees & Programs posts, navigate to Degrees & Programs > Enable Degree Options within the WordPress Admin. Select any degree options available. This will make it easier for site editors to create or edit Degree & Programs posts, as only the available options selected from this will show up within the posts editor site-wide instead of providing you with the full list of degree options. Once all degree options have been checked, click Save Changes.

An example image showcasing the Enable Degree Options settings within the WordPress admin.

At This Time…

Important Considerations:

  • Rounded Corner Treatments and colors for Button Blocks are disabled by the theme.
  • All colors supplied are included to visually align with treatments used elsewhere on the CDS Faculty site. Please exercise visual discretion when combining colors and consider contrast.
  • At this time: all content within a Cover Block needs to be grouped and assigned a white background color in the block editor in order to be legible against an image backdrop.
    Images in the background should be supplemental and complementary in these instances and not a central focus.