University of Wisconsin–Madison

GHI’s WordPress Theme

GHI's WordPress Theme

GHI’s WordPress theme

GHI’s main website and education microsite are both based on the UW Theme. Our sites use a child theme of the UW Theme. Using a child theme lets us use the basic features of the UW Theme while extending them to meet our needs.

UW theme’s visual editor

Normally, every WordPress post or page acts like a document. We edit the page content as though we were using a word processor to edit a single—possibly very long—sheet of paper.

Among other things, the UW Theme provides a more structured “visual editor”. UW Theme’s editor lets us add page content in logical blocks called “content layouts”. These content layouts may be one, two, or three columns across.

Within a given content layout, the UW Theme lets us add specialized blocks of content. These content blocks have distinctive formats: text block, image carousel, group of links, stylized quote, etc. These content blocks are called “page elements”. You can see these elements demonstrated on the UW Theme’s Kitchen Sink of Page Elements.

Besides letting us create columns, this approach lets us break a page into logical blocks rather than viewing it as a continuous, undifferentiated sheet of paper.

The WiscWeb team provides training on using the UW Theme and its editor. The UW Marketing team, which develops and maintains the standard UW Theme, can be reached for questions at wordpress@umark.wisc.edu.

Placing special news and events posts

On some pages, space is reserved for special news posts. You choose what appears in these spaces by assigning the right categories to published posts.

Here are the reserved news spaces and the posts that they display:

  • Home Page – Global Health in Action “Top News”: shows the most recent published post with category News – Home.
  • Home Page – Global Health in Action “Next GHI Event”: shows the most recent published post with the categories News – Home and Events.
  • News Page – Three Top Stories: shows the most recent published posts with category News – Top. (In general, photos should be at a ratio of 500 wide by 350 deep, so they’re consistent. This is true for feature images in all posts.)
  • News Page – Large Story to the left of Coming Events: shows the most recent published post with category News – Wide Visual.
  • Focus Area Pages – What We Do: the two large stories are the two most recent published posts with the appropriate focus area category as well as category News – Top. The stories on the right are the most recent five posts with the appropriate focus area category, omitting News – Top stories.

Redirecting a post to an external location

We have two ways of redirecting a news post to an external page or document.

  1. Redirect to a Different Page. This box appears at the top of the page when editing a post. It’s a custom GHI feature, incorporated from a CALS plugin that was used in an earlier version of the website. When a visitor tries to reach this post, they’ll be redirected to the specified URL without notice. This is GHI’s preferred method.
  2. News Link. This box appears second. It’s the UW Theme’s standard method of handling redirection. Instead of automatically redirecting the visitor to the external URL, it takes them to a post within our website. This post has a brief description of the external page followed by a link to that page. If you’d prefer not to see this box, you can hide it via the Screen Options button at the upper right of the editor’s page.

Heading color variation

You can give a content layout a title in the layout’s options—by clicking the gear button in the upper right of the layout’s box. Within the options area, if you specify a Headline, that will appear as a heading at the top of the page section.

By default, the UW Theme shows these headings in dark gray.

Normally, the UW Theme shows the backgrounds of successive layouts in alternating gray and white: white for the first layout, gray for the second, white for the third, etc. This is the default behavior if we don’t override it.

But often, we do need to manually set the background color of a section. We do this in the same options area, in the Background Choice drop-down list. For example, we often set the background to white. Whenever we manually select a background color, the UW Theme will show that section header as red.

This might be fine. But if you find variation between red and dark gray headings to be distracting, you can manually set section colors to force all the headings to be red.

GHI’s Custom Design Patterns

Our child theme uses UW Theme’s standard page elements to create additional “design patterns”: visual elements that reflect GHI branding and can be easily reused throughout the site.

The rest of this page is a catalog of those GHI-specific design patterns. Below you’ll find an example of each design pattern along with instructions on how to implement it.

 

Accent Arrow

About this design pattern

This adds a red, right-facing arrow to the left of the content. Rather than having a section or text block of its own, this arrow is added directly with the text that it points toward.

How to add it

This design pattern does not require its own content layout or element. In an existing text block, add the following on a line by itself before the text that it should point toward.

[accentarrow]

Example

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec suscipit orci eget urna molestie viverra. Curabitur vulputate ante a feugiat facilisis. In ante nisl, ullamcorper at ante nec, laoreet sodales massa. Mauris sit amet lectus id lorem fermentum accumsan ultrices in ipsum. Ut purus metus, venenatis a fringilla sed, dignissim et dui.

Accent Dots

About this design pattern

This adds grids of black dots to the left and right of the content following it. The left dots are slightly higher on the page than the left.

How to add it

Add a one-column content layout. Give the layout the following Row Class:

ghi-accent-dots

Add a Text Block page element, and enter this in it:

[accentdots]

This design pattern can cause following content layouts to shift upward slightly. The quick-and-dirty fix for this is to add an extra empty paragraph at the end of the the current layout’s content.


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec commodo dapibus mauris non imperdiet. Praesent vel orci metus. Praesent rutrum pulvinar placerat. Vivamus lobortis dui a quam lobortis imperdiet. Nam mattis magna a massa maximus volutpat. Morbi consectetur, odio in hendrerit consectetur, enim erat ornare ante, ac pretium augue nisl quis enim. Nunc tincidunt ipsum sit amet commodo tristique. Vivamus id diam in dolor porttitor ullamcorper. Proin sagittis eros blandit, gravida dui quis, malesuada massa. Duis egestas mi est, eu semper dui molestie ac. Aenean posuere urna diam, vel volutpat nulla ornare eget. Curabitur non interdum urna, at dignissim velit. Praesent faucibus hendrerit quam, vitae commodo justo venenatis et.

Phasellus massa augue, elementum sit amet justo sed, tempus mollis nulla. Vestibulum eget semper arcu. Nunc porttitor aliquam ipsum facilisis sollicitudin. Donec ultrices, mauris id pharetra ullamcorper, sem justo suscipit est, et pulvinar leo sapien at tellus. Donec blandit elit vel est rhoncus, et consectetur orci eleifend. Sed aliquam sapien non quam faucibus interdum. Proin a mollis ex. Pellentesque porta varius risus nec lacinia. Sed placerat arcu quis turpis iaculis interdum. Praesent rutrum purus a dui ornare pulvinar. Vivamus porta risus nulla, vel posuere sem ultricies a. Vivamus luctus bibendum dolor, id cursus sem dictum nec. Nunc id mi malesuada, congue ligula et, semper diam.

Sed iaculis libero eu mauris tempor venenatis. Integer sit amet ligula sit amet nisi ultricies rhoncus. Donec turpis arcu, bibendum vitae rhoncus non, congue lacinia neque. Nulla id urna ut turpis eleifend aliquam sed varius lorem. Donec euismod porta nunc sit amet ultrices. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla eros tortor, egestas sed quam ac, vestibulum porta dui. Curabitur vel fermentum odio.

 

 

Accent Globes

About this design pattern

This adds three vertically-stacked globes to the left of the content following it.

How to add it

Add a one-column content layout. Give the layout the following Row Class:

ghi-accent-globes

Add a Text Block page element, and enter this in it:

[accentdots]

This design pattern can cause following content layouts to shift upward slightly. The quick-and-dirty fix for this is to add an extra empty paragraph at the end of the the current layout’s content.


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec commodo dapibus mauris non imperdiet. Praesent vel orci metus. Praesent rutrum pulvinar placerat. Vivamus lobortis dui a quam lobortis imperdiet. Nam mattis magna a massa maximus volutpat. Morbi consectetur, odio in hendrerit consectetur, enim erat ornare ante, ac pretium augue nisl quis enim. Nunc tincidunt ipsum sit amet commodo tristique. Vivamus id diam in dolor porttitor ullamcorper. Proin sagittis eros blandit, gravida dui quis, malesuada massa. Duis egestas mi est, eu semper dui molestie ac. Aenean posuere urna diam, vel volutpat nulla ornare eget. Curabitur non interdum urna, at dignissim velit. Praesent faucibus hendrerit quam, vitae commodo justo venenatis et.

Phasellus massa augue, elementum sit amet justo sed, tempus mollis nulla. Vestibulum eget semper arcu. Nunc porttitor aliquam ipsum facilisis sollicitudin. Donec ultrices, mauris id pharetra ullamcorper, sem justo suscipit est, et pulvinar leo sapien at tellus. Donec blandit elit vel est rhoncus, et consectetur orci eleifend. Sed aliquam sapien non quam faucibus interdum. Proin a mollis ex. Pellentesque porta varius risus nec lacinia. Sed placerat arcu quis turpis iaculis interdum. Praesent rutrum purus a dui ornare pulvinar. Vivamus porta risus nulla, vel posuere sem ultricies a. Vivamus luctus bibendum dolor, id cursus sem dictum nec. Nunc id mi malesuada, congue ligula et, semper diam.

Sed iaculis libero eu mauris tempor venenatis. Integer sit amet ligula sit amet nisi ultricies rhoncus. Donec turpis arcu, bibendum vitae rhoncus non, congue lacinia neque. Nulla id urna ut turpis eleifend aliquam sed varius lorem. Donec euismod porta nunc sit amet ultrices. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla eros tortor, egestas sed quam ac, vestibulum porta dui. Curabitur vel fermentum odio.

 

Accent Swirls

About this design pattern

This adds a swirled gray background pattern. The pattern will begin in the section above the design pattern, and extend into the section below it.

There are two variants of this design pattern: one shorter, and one taller.

How to add the short variant

Add a one-column content layout. Give the layout the following Row Class:

wavy-lines-background

Add a Text Block page element, and enter this in it:

[accentswirls type="short"]

How to add the tall variant

Add a one-column content layout. Give the layout the following Row Class:

wavy-lines-background-tall

Add a Text Block page element, and enter this in it:

[accentswirls type="tall"]

Notes for both variants

The UW Theme automatically selects alternating solid background colors for some sections. When it does this, it will interfere with the gray swirls: the UW Theme’s background will hide the swirls. If this happens, simply add the class “no-background” to the content layouts before and after this design pattern. In fact, it hurts nothing to add that class in all cases, just to prevent the possible problem.

For any UW Theme layout block, you can add the “no-background” class by clicking the gear icon to access the settings for that layout, and then entering “no-background” in the Row Class area. If there is more than one class listed in this area, separate them with spaces.

This design pattern can cause following content layouts to shift upward slightly. The quick-and-dirty fix for this is to add an extra empty paragraph at the end of the the current layout’s content.

Example (short variant)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec commodo dapibus mauris non imperdiet. Praesent vel orci metus. Praesent rutrum pulvinar placerat. Vivamus lobortis dui a quam lobortis imperdiet. Nam mattis magna a massa maximus volutpat. Morbi consectetur, odio in hendrerit consectetur, enim erat ornare ante, ac pretium augue nisl quis enim. Nunc tincidunt ipsum sit amet commodo tristique. Vivamus id diam in dolor porttitor ullamcorper. Proin sagittis eros blandit, gravida dui quis, malesuada massa. Duis egestas mi est, eu semper dui molestie ac. Aenean posuere urna diam, vel volutpat nulla ornare eget. Curabitur non interdum urna, at dignissim velit. Praesent faucibus hendrerit quam, vitae commodo justo venenatis et.

Phasellus massa augue, elementum sit amet justo sed, tempus mollis nulla. Vestibulum eget semper arcu. Nunc porttitor aliquam ipsum facilisis sollicitudin. Donec ultrices, mauris id pharetra ullamcorper, sem justo suscipit est, et pulvinar leo sapien at tellus. Donec blandit elit vel est rhoncus, et consectetur orci eleifend. Sed aliquam sapien non quam faucibus interdum. Proin a mollis ex. Pellentesque porta varius risus nec lacinia. Sed placerat arcu quis turpis iaculis interdum. Praesent rutrum purus a dui ornare pulvinar. Vivamus porta risus nulla, vel posuere sem ultricies a. Vivamus luctus bibendum dolor, id cursus sem dictum nec. Nunc id mi malesuada, congue ligula et, semper diam.

Sed iaculis libero eu mauris tempor venenatis. Integer sit amet ligula sit amet nisi ultricies rhoncus. Donec turpis arcu, bibendum vitae rhoncus non, congue lacinia neque. Nulla id urna ut turpis eleifend aliquam sed varius lorem. Donec euismod porta nunc sit amet ultrices. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla eros tortor, egestas sed quam ac, vestibulum porta dui. Curabitur vel fermentum odio.

Call To Action

About this design pattern

This adds a very large, colorful button with a brief text message. There are two variants of this design pattern:

  • Section Break: an element in its own content layout, meant to act as a break between page sections
  • Page Element: a button within an existing Text Block, along with other text and images.

How to add the section break variant

Add a one-column content layout. Give the layout the following Row Class:

ghi-cta-container

Then follow “Notes for All Variants” below.

How to add the page element variant

Within an existing Text Block, add the button as described in “Notes for All Variants” below. No special class is required for the layout. Enter the button description on its own line.

Notes for All Variants

In a Text Block page element, enter something like the following.

[ghi-call-to-action text="call to action example" url="#null" color="blue" width="full"]

The element’s values are as follows:

  • text is the button’s message
  • url is the destination URL upon clicking the button
  • color may be red, green, blue, or gold
  • width is full or narrow; the default is narrow

Example

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin dignissim fringilla metus id commodo. Etiam sed vulputate libero. Nulla sed diam et quam aliquet eleifend. Aenean vitae rutrum risus, nec luctus erat. Praesent congue nisl ultrices velit auctor, et malesuada lorem sagittis. Suspendisse congue et diam id porttitor. Praesent lacinia sapien eu dui lobortis cursus. Pellentesque ullamcorper purus dignissim vulputate suscipit. Aliquam ut eros enim. Cras ac viverra orci.

page element variant (narrow) »

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin dignissim fringilla metus id commodo. Etiam sed vulputate libero. Nulla sed diam et quam aliquet eleifend. Aenean vitae rutrum risus, nec luctus erat. Praesent congue nisl ultrices velit auctor, et malesuada lorem sagittis. Suspendisse congue et diam id porttitor. Praesent lacinia sapien eu dui lobortis cursus. Pellentesque ullamcorper purus dignissim vulputate suscipit. Aliquam ut eros enim. Cras ac viverra orci.

page element variant (full) »

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin dignissim fringilla metus id commodo. Etiam sed vulputate libero. Nulla sed diam et quam aliquet eleifend. Aenean vitae rutrum risus, nec luctus erat. Praesent congue nisl ultrices velit auctor, et malesuada lorem sagittis. Suspendisse congue et diam id porttitor. Praesent lacinia sapien eu dui lobortis cursus. Pellentesque ullamcorper purus dignissim vulputate suscipit. Aliquam ut eros enim. Cras ac viverra orci.

page element variant (narrow) »

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin dignissim fringilla metus id commodo. Etiam sed vulputate libero. Nulla sed diam et quam aliquet eleifend. Aenean vitae rutrum risus, nec luctus erat. Praesent congue nisl ultrices velit auctor, et malesuada lorem sagittis. Suspendisse congue et diam id porttitor. Praesent lacinia sapien eu dui lobortis cursus. Pellentesque ullamcorper purus dignissim vulputate suscipit. Aliquam ut eros enim. Cras ac viverra orci.

page element variant (full) »

Factbox

About this design pattern

This adds a grid of text and image items, like the one near the bottom of the main GHI website’s home page.

  • There are always exactly six items in the grid. At its widest, the grid is three across by two down.
  • Images for the factbox must be 500 x 350 pixels.

How to add it

This pattern is more involved than the others. It’s recommended that you have a web developer set it up for you. However, the basic ideas are outlined here.

Add a one-column content layout. Give the layout the following Row Class:

ghi-factbox

Then add a Text Block to contain the factbox.

All of the content for the fact box should be wrapped/sandwiched between the following elements:

[ghi-factbox]
…elements go here…
[/ghi-factbox]

If you’d like the factbox to have a clickable title bar at the top, add a title element to the ghi-factbox wrapper. For example, the factbox on the main website’s home page has the following:

[ghi-factbox title_text="Education" title_href="https://ghi.wisc.edu/education/" focus_count="5" focus_number="05"]
…elements go here…
[/ghi-factbox]

A text factbox element looks something like this:

[ghi-fact color="white" type="text" fact_number="1,019" text="Undergraduate Certificate graduates since 2011" link_text="check out the program" link_href="https://google.com"][/ghi-fact]

An image factbox element looks something like this:

[ghi-fact type="photo"]<img class=”alignnone size-full wp-image-17097″ src=”https://ghiprep.blazingmoon.net/wp-content/uploads/sites/168/2017/10/Home-Education-Fence.jpg” alt=”students building a structure” width=”500″ height=”350″ />[/ghi-fact]

Example

 


1,019

Undergraduate Certificate graduates since 2011
check out the program »


Students building a structure out of wood on the roadside

153

Graduate • Professional • Capstone Certificate graduates since 2005
check out the program »


UW student working with children on dental hygiene

550+

Students enrolled in Certificates in Global Health each year
check out the program »


woman carrying a tray

Hero Image

About this design pattern

This places a full-width hero image at the top of a page.

Every page created with the standard UW Theme has a built-in “Hero Content Area”, which can contain an image or a carousel. The difference between this and GHI’s Hero Image design pattern is that with the GHI Hero Image, the page’s title appears in large white text on a semi-transparent red bar that partially overlaps the image. With the standard Hero Content Area, the page’s title appears in black below the image.

How to add it

Add a one-column content layout. Give the layout the following Row Class:

ghi-hero-inner

Then add a Text Block to contain the hero image.

In the Text Block, insert the photo that will be your hero image, and wrap/sandwich it within a ghi-hero-inner shortcode like this:

[ghi-hero-inner title="This is a title<br/>It has two lines"]…the image goes here…[/ghi-hero-inner]

The example above has a two-line title. If your title has only one line, you can omit the <br/> line break.

Further down the editor page, below the main content entry area, look for the section titled Custom Fields. This section will probably appear below the Revisions and Excerpt sections.

If you don’t see a Custom Fields section, scroll to the top of the page and look for a Screen Options button near the right side of the page. Click it. This will open an area where you can specify which sections should appear on your editor page. Check Custom Fields, then scroll down to that section.

In the Custom Fields section, select body-class from the Name drop-down. In the Value field next to the Name field, enter this value:

ghi-page-inner

About Hero Images

When creating hero images, follow these guidelines:

  • A good minimum width is around 1300-1500 pixels
  • The ideal height is 36% or less of the image width
  • If you use a taller image, it will push the white page title below the first screenful on some devices
  • The image should be no more than 1920 x 690 pixels; larger images will load more slowly, and there will be no visual benefit

Example

You can see an example on the Health Systems Education Focus Area Page.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin dignissim fringilla metus id commodo. Etiam sed vulputate libero. Nulla sed diam et quam aliquet eleifend. Aenean vitae rutrum risus, nec luctus erat. Praesent congue nisl ultrices velit auctor, et malesuada lorem sagittis. Suspendisse congue et diam id porttitor. Praesent lacinia sapien eu dui lobortis cursus. Pellentesque ullamcorper purus dignissim vulputate suscipit. Aliquam ut eros enim. Cras ac viverra orci.

 

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin dignissim fringilla metus id commodo. Etiam sed vulputate libero. Nulla sed diam et quam aliquet eleifend. Aenean vitae rutrum risus, nec luctus erat. Praesent congue nisl ultrices velit auctor, et malesuada lorem sagittis. Suspendisse congue et diam id porttitor. Praesent lacinia sapien eu dui lobortis cursus. Pellentesque ullamcorper purus dignissim vulputate suscipit. Aliquam ut eros enim. Cras ac viverra orci.

 

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin dignissim fringilla metus id commodo. Etiam sed vulputate libero. Nulla sed diam et quam aliquet eleifend. Aenean vitae rutrum risus, nec luctus erat. Praesent congue nisl ultrices velit auctor, et malesuada lorem sagittis. Suspendisse congue et diam id porttitor. Praesent lacinia sapien eu dui lobortis cursus. Pellentesque ullamcorper purus dignissim vulputate suscipit. Aliquam ut eros enim. Cras ac viverra orci.

Major Break Title

About this design pattern

This changes the Headline of a layout to be larger than normal.

When you enter a Headline in the properties of a layout (by clicking the gear icon in its upper-right corner), the headline appears as a large, bold heading. You can see an example of this directly above, in this section’s heading “Major Break Title”.

Occasionally, you might want to give a heading even more emphasis by enlarging it. This design pattern increases the font size by roughly 1/3.

How to add it

In the properties for any layout that has a Headline, add the following Row Class:

major-break-title

No Padding

About this design pattern

This is actually a pair of design patterns:

  • No Padding Top
  • No Padding Bottom

Applying these design patterns to anything will prevent padding above/below the element. Most often these should be applied to top-level layout blocks to prevent excessive whitespace.

Note that in the world of the Web, two things can create whitespace: padding and margins. The difference between these two is slightly arcane, but just be aware that this design pattern will remove padding, but not margins. This means it’s possible that after you apply these patterns, there will still be some whitespace before/after the element in the form of a margin.

How to add it

For any UW Theme layout block, click the gear icon to access the settings for that layout, and then in the Row Class area enter one or both of these:

  • no-padding-bottom
  • no-padding-top

If there is more than one class listed in this area, separate them with spaces.

Newsbox

About this design pattern

This adds a block of recent featured news posts. There are three variants:

  • Format 1 – Three Across (all categories): three stories beside each other (33% width each), as seen at the top of the News & Events Page. This shows the three most recently published posts with a category of “News – Top”.
  • Format 2 – Two and a List (specified category): two side-by-side stories (33% width each), plus a list of other recent posts on the right (33% width), as seen in the What We Do section of the Focus Area pages. This shows the two most recently published posts with a category of “News – Top”, followed by a list if the five other most recent posts. This only shows posts that match a specified category, e.g., a focus area.
  • Format 3 – One Wide and Events (all categories): one wide-format story on the left (50% width), and a list of upcoming events on the right (50%), as seen in the second section of the News & Events Page. This shows the most recent published post with a category of “News – Wide Visual”.

About images

All three variants show thumbnail images for all of their news stories. These images are the posts’ Featured Images. If a post doesn’t have a featured image, no image will appear in its newsbox listing—even if there are images within the body of the story.

How to add the “Three Across” Variant

Add a one-column content layout. Give the layout the following Row Class:

ghi-newsbox

Then in a Text Block, add this:

[ghi-newsbox format="1"]

How to add the “Two And A List” Variant

Add a one-column content layout. Give the layout the following Row Class:

ghi-newsbox

Then in a Text Block, add something like this. The value for “Category” must exactly match the title of the desired category.

[ghi-newsbox format="2" category="One Health"]

How to add the “One Wide and Events” Variant

Add a two-column content layout. Give the layout the following Row Class:

ghi-newsbox

In the left column, add a Text Block, and enter this as its content:

[ghi-newsbox format="3"]

Then in the right column, add a Today.wisc.edu Events page element. Give it the following values:

  • Header text: Upcoming Events
  • URL: (the appopriate URL to show the desired events)
  • Number of events to show: 5

Examples

Three Across

Global HealthBuilding Community 2018: A Global Health CelebrationOctober 18: GHI invites you to Building Community 2018, an annual event that brings together the greater global health community and looks toward new opportunities to ensure health and well-being for all.Read more…

Global HealthGHI Associate Director Lori DiPrete Brown shares her global experience in new book, a webinar and a seminarOctober 30: GHI Associate Director Lori DiPrete Brown will give a Global Health Tuesday talk about the future directors of global health education and UW-Madison's role.Read more…

African scholars make the W-sign with their hands.Global HealthStrength in Community: GHI issues its 2017-2018 annual report"Across campus and the planet, we work together to tackle health challenges," GHI Director Jonathan Patz writes in the report's introduction. "Together, we are working toward a more just, sustainable, and healthy world."Read more…

Two and a List

Global HealthBuilding Community 2018: A Global Health CelebrationOctober 18: GHI invites you to Building Community 2018, an annual event that brings together the greater global health community and looks toward new opportunities to ensure health and well-being for all.Read more…

Global HealthGHI Associate Director Lori DiPrete Brown shares her global experience in new book, a webinar and a seminarOctober 30: GHI Associate Director Lori DiPrete Brown will give a Global Health Tuesday talk about the future directors of global health education and UW-Madison's role.Read more…

Call for abstracts: UW National One Health Day ColloquiumOctober 9, 2018In dangerous fungal family’s befriending of plants, a story of lossOctober 1, 2018Wisconsin Veterinary Diagnostic Lab has new director, new directionSeptember 12, 2018An ocean apart, carnivorous pitcher plants create similar communitiesAugust 29, 2018Mandela Fellows Reflect on time in Madison with Wisconsin Public RadioAugust 7, 2018More news »

One Wide and Events

Chimp rests among bright green treesGlobal HealthChimpanzee deaths in Uganda pinned on human cold virusEpidemiologist Tony Goldberg investigated primate disease in Uganda – and found the common coldRead more...

Upcoming Events

People Grid

About this design pattern

This adds a block of recent featured news posts. There are two variants:

  • Rows with Details: two or more people per row, side-by-side, with their name and summary details directly below their photos.
  • Tight Blocks: two or more people per row, side-by-side, with no details. The rows and columns are lined up tightly against each other with no padding or borders.

People’s headshot images should be 400 x 400 pixels.

Hiding leadership

For either variant, you can hide the leadership from a given listing.

Why would you want to do this? For some pages, we provide two people listings: first a list of leadership for that category (for example, One Health Leadership), then a list of everyone else (for example, everyone associated with One Health). If we’ve shown the leadership in the first list, we don’t want to show them again in the second.

In this case, the first people grid would be set up to show, for example, categories One Health + Leadership. The second list would be set up to show One Health and would suppress the display of Leadership.

To do this, add the class “hide-leadership” to the one-column content layout’s Row Class, separated by a space. So for example:

ghi-people-grid hide-leadership

Multiple categories

When selecting multiple people categories for a listing, the site will show people who have all of the specified categories. So, for example, if you specify both One Health and Leadership, the grid will show people with both of those categories: people who are associated with One Health and are Leadership. This is true for all Faculty/Staff Listing page elements on the site, whether or not they used the GHI People Grid pattern.

This is different from the standard UW Theme behavior. By default, the UW Theme would show people who have either category. In the above example, it should show all people who are associated with One Health or are among the Leadership.

For reference in case changes are needed in the future, this change was made near the top of the following program file, along with a comment explaining the change:

/uw-theme-child/content-parts/page-elements/faculty-list.php

How to add it

Add a one-column content layout. Add a Faculty/Staff Listing page element. Adjust as follows depending on the variant.

How to add the “Rows with Details” Variant

Give the one-column content layout this Row Class:

ghi-people-grid

Then set the Faculty/Staff Listing settings as follows:

  • What Kind of Listing: Faculty/Staff Listing by Category (or select individual people)
  • Category: choose one or more categories
  • Columns: 4
  • Show: email, phone, position, and photos

How to add the “Tight Blocks” Variant

Give the one-column content layout this Row Class:

ghi-people-tight

Then set the Faculty/Staff Listing settings as follows:

  • What Kind of Listing: Faculty/Staff Listing by Category (or select individual people)
  • Category: choose one or more categories
  • Columns: 4
  • Show: photos

Examples

Rows with Details

James Conway

Associate Director for Health Sciences

jhconway@pediatrics.wisc.edu

608-263-3854 (GHI); 608-265-6050 (UW Hospital)

Lori DiPrete Brown

Associate Director for Education and Engagement

dipretebrown@wisc.edu

608-262-5742

Tony Goldberg

Associate Director for Research

tony.goldberg@wisc.edu

608-890-2618

Christopher Olsen

Director of the Graduate • Professional • Capstone Certificate in Global Health program

chris.olsen@wisc.edu

(608) 265-9535

Jonathan Patz

Director

patz@wisc.edu

608-265-9299

Janis P. Tupesis

Graduate Medical Education Liaison

jtupesis@medicine.wisc.edu

(608) 265-5806

Restrict Width

About this design pattern

This pattern restricts the width of the content area to about 2/3 of its full area. This is useful when the content is text-based, since if the text uses the full width of the content area, the text lines will become unpleasantly long on wide screens.

How to add it

Add the following to the content layout’s Row Class:

restrict-width

If there are other classes already listed in the Row Class setting, just separate them from the restrict-width class with a space.

Examples

This section is itself an example of restricted width content.