Intention-based content organization
Site navigation is just one way visitors to the Cornell AAD online ecosystem make sense of the information being presented. Visitors also use content to find their way through the system, and this is especially true on mobile where navigation takes up less visual space. For that reason, it’s as important to think about how your content will lead the user to relevant information as it is to decide where in the site hierarchy it will sit as a discrete page.
On the Alumni and Giving sites, content is organized by the general intention of the user. For instance, content for visitors who are feeling nostalgic and might want to relive memories of their time at Cornell or plan a visit to campus will find what they need in the section of the site titled “Come back.” On Giving, visitors who aren’t sure of the best way to support Cornell will find relevant information under “Ways to give.”
What’s important is that content is organized according to the users’ motivations and needs and not according to internal distinctions that may be opaque to the community.
Global elements
Navigation
![Navigation Front-end](images/navigation-front-end.png “Alumni navigation as viewed by visitors”)
The site’s navigation is editable in the “Menus” panel in the “Appearance” section of the Wordpress admin menu. The button to Giving on the Alumni site is editable from the “Theme Options” panel.
![Navigation Menu Panel](images/navigation-menu-panel.png “Editing navigation in the navigation panel”)
![Navigation Menu Panel](images/navigation-theme-settings.png “Editing call-to-action in the navigation in theme settings”)
Calls-to-action (CTAs)
List of CTA types
There are currently 3 registered CTA types for the site:
- Content
- Form
- Download
Each of these is defined in web/wp-content/plugins/cornell-content/config/fields/cta.php
along with the inputs it supports.
How to add and remove CTA types
To add an additional CTA (or delete an existing one), edit web/wp-content/plugins/cornell-content/config/fields/cta.php
.
Adding new types is a matter of adding additional options to the CTA Type input (approximately line 30 at present). Fields can be defined later in the file.
Adding custom fields for a specific CTA type
The attributes
portion of the field definition can be used to make a field available and visible only to a particular CTA type:
'attributes' => [
'data-conditional-id' => $prefix . 'type',
'data-conditional-value' => wp_json_encode( [ 'content', 'download' ] ),
],
The above example would make the field visible only to the content
and download
CTA types.
Where are CTAs displayed in each template
There are currently 4 positions available for showing CTAs across many of the templates.
- Full-width
- Sitewide Promotion (only for Posts, Pages, and Alumni Profile posts)
- Footer Left
- Footer Right
Some templates make different slots available. All templates leverage the same suite of helper functions and template partials for displaying the CTAs.
- Helper functions:
web/wp-content/themes/cornell/lib/helpers.php
get_cta( $slot_name )
get_cta_by_id( $post_id )
get_fullwidth_cta( $cta_name )
- Template partials:
web/wp-content/themes/cornell/templates/cta/
cta-content.php
cta-download.php
cta-footer.php
cta-form.php
cta-home.php
cta-inline-content.php
In addition to these, there are two other ways to add CTAs to front-end output:
- A
[ctas]
shortcode is available for embedding CTAs virtually anywhere that shortcodes are allowed. A word of caution: the layout could break from misuse due to a particular CTA appearing in a location that was not built to explicitly support CTAs. - A CTA flexible field exists for things like the Landing template.
How CTAs are managed
CTAs follow their own custom hierarchy for determining what should be shown for a given page request.
- First, does the post object for this request have a custom CTA set for this location?
- If not, is there a Global CTA set for this location?
- If not, show nothing.
The Global CTAs are managed in WP Admin in Calls to Action > Global CTAs.
Footer content
![Global Footer](images/footer-front-end.png “Front-end view of the global footer”) Footer menus are editable in the “Menus” panel in the “Appearance” section of the Wordpress admin menu. Other content, such as the text in the footer and the ability to display a form in place of a link menu can be changed in the “Theme Options” panel.
Page templates
Default
Example
Available on
Alumni, Giving
When to use this template
The default page template is the most basic type of page. It’s best used for pages that are mostly text, although this template can accommodate embedded media.
The layout of the default page template is simpler than more specialized templates. It is better used for pages deeper in the site hierarchy that cover relatively few subjects. For example, the default template is well-suited for a description of a program’s history, whereas the page providing the overview of that program would use the more robust “Program” template.
Landing
Example
Available on
Alumni, Giving
When to use this template
The landing page template is best for high-level overview pages that introduce large sections of the site or point in many different directions. This helps users orient themselves in information-rich parts of the site without being overwhelmed by too much content at any one time. Landing pages are generally determined by site hierarchy, but some pages deeper within the site may still benefit from using this template.
For instance, rather than listing all the ways to volunteer, open volunteer opportunities, members of volunteer leadership councils, and news about volunteer awards all on one page, you can create a “Volunteer” landing page that simply points to each of these things. The user will be able to move through the content more confident that they will find what is most relevant to them.
Landing pages can also be used to represent small sets of links in a more visually engaging way than plain text links, using the card layout. As an example, Cornell news sources outside of the Alumni and Giving sites could be linked from a “More Cornell News” landing page.
Landing News
Example
Available on
Alumni, Giving
When to use this template
The landing news template is used to introduce the “News” section of the Alumni site and the “Giving Stories” section of the Giving site. Its purpose is to aggregate recent posts, drive social media and newsletter engagement, and cross-promote content such as events and alumni profiles.
This is a specialized template with large programmatically generated sections, so it is most likely only useful for the pages already using it.
List
Example
Available on
Alumni, Giving
When to use this template
The list template is used for serial information that needs to be listed out manually instead of programmatically (lists of news stories within a specific category is an example of a programmatically generated list for which you would not need to use this template). Examples of content you might use the list template to represent include downloads, off-site resources, or text descriptions of ways to volunteer.
The list template lets you group list items and automatically adds groups to an on-page navigation. Although list items can accommodate a range of content, it’s best to format items in the same group consistently. This aids the user’s ability to scan and process information in the list. For example you wouldn’t want to included photo-less downloads in the same list group as resource links with a preview thumbnail. Instead you should put them in “Downloads” and “Resources” lists groups respectively.
Conciseness and scannability are important for list pages. If you find certain list items become significantly longer than their siblings, you may want to create a page dedicated to that topic and link to it from the list.
Event List
Example
Available on
Alumni
When to use this template
The event list, like news landing, is a largely programmatic page that aggregates upcoming events. The majority of the content on this page is pulled in from the event posts themselves, which in turn are imported from iModules. To update things like event titles and photos, make revisions to the iModules entry. The Alumni site will then sync the updated information.
Editable from this page is the title, featured image, featured event, and footer calls-to-action.
Program
Example
Available on
Alumni, Giving
When to use this template
The program template aggregates content around a single program of Cornell AAD, e.g. the President’s Council of Cornell Women. Similar to a landing template, it directs the user to detailed information about the program but it also accommodates more detailed informative content, contact information, and optional navigation for program sub-pages.
Profile
Example
Available on
Alumni
When to use this template
The profile template highlights a personal connection with Cornell. The profiled person may be an alumnus or alumna, volunteer, family member, or even staff. The point is to illustrate the diverse reasons and ways people support the university in making a difference in the world.
Profiles are longer form and should include imagery and direct quotes to make a personal connection with the reader. They are an evergreen content type that can be featured on other page templates such as programs and landing to add a human presence to more informative pages.
Narrative content like profiles can still drive users to key strategic actions. Whenever possible, which should be most of the time, profiles should be paired with relevant, page-specific calls-to-action. For instance, a profile of a volunteer should end with a CTA for the reader to learn more about volunteering themselves.
Article/Giving Story
Example
Available on
Alumni, Giving
When to use this template
This template, called “Article” on the Alumni site and “Giving Story” on Giving, is for sharing engaging, timely stories and updates from the Cornell community. These stories are aggregated in the “News” section of Alumni and “Giving Stories” page on Giving respectively and can be highlighted in related news/stories modules.
Stories published to one site will not automatically appear on the other. You can cross-promote content from one site on the other using featured content modules. On the rare occasion for major stories, you may also post on both sites as an article and a giving story.
These stories will be many visitors’ first stop on your site after being directed there via social media. Consider where the next logical place for them to go would be as you write this content and include hyperlinks, related news, and calls-to-action accordingly.
Single Event
Example
Cornell Club of New Mexico Monthly Luncheon
Available on
Alumni
When to use this template
The template is used for displaying events imported from iModules so they can be viewed without leaving the Alumni site. Events are aggregated and displayed on the events list template as well as in the “Upcoming Events” module that appears in various places throughout the site.
Once imported from iModules, events can be edited in the content management system, but changes will not be reflected back on iModules.
Home Pages
Example
Available on
Alumni, Giving
When to use this template
This page template is only used for the home pages of their respective sites. It introduces visitors to the site with an immersive featured story, timely content, and pathways to the most important sections of the site. The home page is not meant to be heavy on text or information but rather engage visitors and guide them to the content that will be most relevant to them.