UW Brand

WordPress theme

University Marketing & Communications manages an on-brand WordPress theme for the UW. The theme is included in our web hosting and is available to any UW organization to download from GitHub and install on their own WordPress site.

Guidelines

We encourage you to download our official theme and add on-brand features or customizations that better meet your organization’s needs. However, we recommend making modifications via a child theme so that you can install new releases and not lose your changes.

We recommend you keep the audience-based navigation in the header to ensure users have a seamless experience across the UW Web (Students, Parents, Faculty & Staff, Alumni). However, we realize this is not always possible. Feel free to contact us if you would like to talk through options and solutions.

We also encourage you to retain the search function, Quick Links, social icons and copyright information as they appear in the main theme. Again, this ensures a smooth user experience across the vast UW Web.

Documentation

Below you will find documentation for the features we built into our WordPress theme. We have information on widgets, shortcodes, and extended functionality.

If you are new to WordPress and need to learn how to use the tool, we recommend taking the WordPress Essentials Training on LinkedIn Learning. LinkedIn Learning is available for free to all students, faculty, and staff through UW’s Career Center.

If you are a developer who is hosting your own Boundless theme, you can find documentation on GitHub: https://github.com/uweb/uw-2014 (scroll down to the README.md).

Widgets

UW Blogroll

Display the most recent posts on your blog.

Options
  • Title — the title of the widget (default: Blogroll)
  • Excerpt — uses the excerpt for text if it exists in the post (default: true)
  • Image — uses the featured image in the respective post (default: hide)
  • Author — shows the author (default: show)
  • Post type — pulls a specific post type (default: post)
  • Category — pulls from a category ID (default: none)
  • Category name — pulls from a category name (default: none)
  • Mini blogroll — creates a minified version of the blogroll for tighter spaces (default: false)
  • Date — shows the published date (default: show)
  • Number of posts to display — the number of post titles to show in the blogroll (default: 2)

UW Campus Map

Embed the location of a UW campus building on your page using the UW branded campus map.

Options
  • Title — the title of the widget (default: none)
  • Building code — the UW campus building code for the desired building to embed, e.g. 'kne' for Kane Hall. (default: none)

UW Recent Posts

Similar to the default WordPress widget Recent Posts but with different options and layout.

Options
  • Title — the title of the widget (default: none)
  • Number of posts to display — the number of posts to show (default: 1)
  • Display more link — display an anchor tag that links to the blogroll page (default: false)

UW Related Posts

Uses the WordPress JetPack API to show a list of posts related to the one currently being views. Requires the JetPack Plugin to be installed otherwise it will not appear in the Widgets admin area.

Options
  • Title — the title of the widget (default: none)

UW RSS

Similar to the WordPress RSS widget except with a branded layout that displays RSS images.

Options
  • Title — the title of the widget (default: none)
  • Blurb — a small blurb that is shown before the RSS feed (default: none)
  • RSS URL — the URL of the RSS feed to display (default: none)
  • Number of items to display — the number of items in the RSS feed to display (default: 10)

UW Single Image

Displays a single image with a blurb of text below it.

Options
  • Title — the title of the widget (default: Image Widget)
  • Select an image — select an image from the WordPress media library (default: none)
  • Featured text — a small blurb that is shown below the image (default: none)
  • Link — a URL for the more link text (default: none)
  • More link — the text to display in the more link (default: Read more)

UW Top Posts

Shows the most popular posts on your blog. Requires JetPack to be installed.

Options
  • Title — the title of the widget (default: Image Widget)
  • Number of items to display — the number of items in the RSS feed to display (default: 1)

UW Twitter

Shows the latest tweets from a specific Twitter account. In order to have the widget display in the widgets a TWITTER_OAUTH_TOKEN constant must be defined in your wp-config.php file. Requires a Twitter API key.

Options
  • Title — the title of the widget (default: UW Twitter Feed)
  • Screen name — the title of the widget (default: twitter)
  • Number of tweets to show — the number of items in the RSS feed to display (default: 5)

UW Contact Card

Displays a multiple list of contacts for the group/department.

Options
  • Title — the title of the widget (default: Contact us)
  • Name — the person's name (default: none)
  • Title — the person's job title (default: none)
  • Phone number — the person's phone number (default: none)
  • Email — the person's email (default: none)

UW Image Card

Displays one of three styles of branded card. Both text and image can be customized.

Options
  • Title — the title of the widget (default: Image Widget)
  • Select an image — select an image from the WordPress media library (default: none)
  • Featured text — a small blurb that is shown below or on top of the image (default: none)
  • Link — a URL for the More link text (default: none)
  • More link — the text to display in the more link (default: Read more)
  • Card style — choose one of three styles (default: none)

Shortcodes

Button

Displays a branded call to action button.

Attributes
  • color — the color of the button; options: purple | gold | gray (default: gray)
  • type — the icon type of the button; options: plus | go | external | play (default: go)
  • small — adjusts the size of the button; {boolean} options: true | false (default: false)
  • url — the URL where the button links; {string} (default: none)
Code

[button color="gold" type="plus" small=true url="https://uw.edu/"]Go DAWGS![/button]

Example

Blogroll

This is a shortcode that wraps the WordPress get_posts function and templates out a blogroll. Any parameter you can pass to get_posts will be understood along with the following.

Attributes
  • excerpt — choose whether to show the excerpt in the blogroll; options: show | hide (default: hide)
  • trim — whether or not to trim the words via WordPress wp_trim_words function; {boolean} options: true | false (default: false)
  • image — choose whether to show the featured image thumbnail; options: show | hide (default: hide)
  • author — choose whether to show the author; options: show | hide (default: show)
  • date — choose whether to show the publish date; options: show | hide (default: show)
  • titletag — the html element for the post titles; {html} (default: h2)
  • post_type — the post type to look for; {string} (default: post)
  • number — the maximum number of results to return; {number} (default: 5)
  • mini — use the miniature template instead of the default one; {boolean} options: true | false (default: false)
  • category — the WordPress category ID to limit the results from; {string} (default: none)
  • category_name — the WordPress category name to limit the results from; {string} (default: none)
  • readmore — choose whether to show the "Read More" link or not; options: on | off (default: on)
Code

[blogroll number=3 trim=true author="hide" mini=true readmore="off"]

Example

iframe

Embed iframes into your post or page content without adjusting WordPress privileges. The iframe URL is tested against a list of allowed domains. If the domain is not in the list the iframe will not render.

Attributes
  • src — the source URL of the embedded iframe; {string} (default: none)
  • height — the width of the embedded iframe; {number} or {percentage} (default: WordPress's embed size width setting)
  • width — the height of the embedded iframe; {number} or {percentage} (default: WordPress's embed size height setting)
Allowed domains
  • uw.edu
  • washington.edu
  • uwtv.org
  • tvw.org
  • www.uwtv.org
  • google.com
  • docs.google.com
  • drive.google.com
  • youtube.com
  • excition.com
  • uwregents.wufoo.com
  • www.uw.edu
  • catalyst.uw.edu
  • www.washington.edu
  • depts.washington.edu
  • online.gifts.washington.edu
  • secure.gifts.washington.edu
  • payroll.gifts.washington.edu
  • helperapps.gifts.washington.edu
  • uwfoundation.org
  • support.gifts.washington.edu
  • www.uwfoundation.org
  • www.surveygizmo.com
  • www.google.com
  • www.excition.com
  • www.youtube.com
  • pgcalc.com
  • www.pgcalc.com
  • matchinggifts.com
  • www.matchinggifts.com
  • embed.pac-12.com
  • storify.com
  • w.soundcloud.com
  • api.soundcloud.com
  • flickr.com
  • vimeo.com
  • player.vimeo.com
  • www.facebook.com
  • form.jotform.com
  • tableau.washington.edu
  • www.iqmediacorp.com
  • fusiontables.google.com
  • myuwgiving.gifts.washington.edu
  • cdn.knightlab.com
  • uploads.knightlab.com
  • yeatmanlab.github.io
  • livestream.com
  • uwphotos.smugmug.com
  • www.smugmug.com
  • smugmug.com
  • universityphotography.smugmug.com
  • modelo.io
  • app.modelo.io
  • webcasts.weforum.org
  • weforum.org
  • storymaps.arcgis.com
  • h5p.org
  • app.powerbi.com
  • powerbi.com
  • www.powerbi.com
  • acuityscheduling.com
  • app.acuityscheduling.com
  • video.ibm.com
  • ibm.com
  • www.ustream.tv
  • ustream.tv
Code

[iframe src="https://uw.edu/" height="500" width="700"]

Example

Intro

This shortcode creates an italicized block of introduction text for the content.

No attributes.

Code

[intro]A block on introductory text for the content.[/intro]

Example

A block on introductory text for the content.

RSS

This is a shortcode embeds an RSS blogroll into the body content. It behaves similarly to the UW RSS Widget.

Attributes
  • url — the URL to parse for the RSS feed; {string} (default: none)
  • number — the maximum number of results to return; {number} (default: 5)
  • title — the title for the RSS blogroll in the content; {string} (default: none)
  • heading — the html element for the post titles; {html} (default: h3)
  • show_image — choose whether to show the RSS thumbnail; {boolean} options: true | false (default: true)
  • show_date — choose whether to show the publish date; {boolean} options: true | false (default: true)
  • show_more — choose whether to show the author; {boolean} options: true | false (default: true)
Code

[rss url="https://www.washington.edu/president/feed/" number=3 title="President's Blog" heading="h2" show_image=false show_date=false]

Example

Tile box

Display branded tiles to structure content in elegantly. Each tile is setup as a series of shortcodes wrapped in [box] shortcode.

Attributes
  • alignment — how the text is aligned in each tile; options: centered | none (default: none)
  • color — background color of the tiles; options: tan (default: none)
  • empty — if a tile has no content, allow it to be transparent, but take up the normal amount of space; add this to [tile], not [box]; {boolean} options: true | false (default: false)
Code

[box alignment="centered" color="tan"]
[tile]Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor, perspiciatis ipsa quasi minima illo accusamus totam! Reprehenderit dolorum soluta illo! Recusandae, unde quam laudantium ea autem illum consequatur! Esse, suscipit?[/tile]
[tile]Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam quaerat ex impedit vel deserunt libero, culpa aut, fuga quae iste maxime! Accusantium temporibus inventore odit necessitatibus sapiente eveniet possimus fuga![/tile]
[tile]Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum necessitatibus, quisquam porro commodi molestiae iure dolore neque dignissimos, repellendus odio tempora sint? Nostrum iusto beatae earum reiciendis, nemo optio aliquam.[/tile]
[tile]Lorem ipsum dolor sit amet consectetur adipisicing elit. Id qui aut voluptatibus porro corrupti aliquam vel cum, beatae vero consequatur quo veniam repellat cupiditate temporibus consectetur necessitatibus, expedita accusantium ex.[/tile]
[/box]

Example

Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor, perspiciatis ipsa quasi minima illo accusamus totam! Reprehenderit dolorum soluta illo! Recusandae, unde quam laudantium ea autem illum consequatur! Esse, suscipit?

Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam quaerat ex impedit vel deserunt libero, culpa aut, fuga quae iste maxime! Accusantium temporibus inventore odit necessitatibus sapiente eveniet possimus fuga!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum necessitatibus, quisquam porro commodi molestiae iure dolore neque dignissimos, repellendus odio tempora sint? Nostrum iusto beatae earum reiciendis, nemo optio aliquam.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Id qui aut voluptatibus porro corrupti aliquam vel cum, beatae vero consequatur quo veniam repellat cupiditate temporibus consectetur necessitatibus, expedita accusantium ex.

Trumba

Display a Trumba calendar spud in the post or page content.

Attributes
  • name — the Trumba web name of the desired calendar; {string} (default: none)
  • type — the Trumba spud type, or view, of the desired calendar (a list of all spud types can be found here); {string} (default: none)
  • base — the full URL of the desired base calendar which can be embedded on your site with the spud type='main'; {string} (default: none)
Code

[trumba name="sea_campus" type="main" base="https://www.washington.edu/calendar"]

Example

Twitter

This is a shortcode embeds a Twitter feed for a desired username. It behaves similarly to the UW Twitter Widget. In order to have the shortcode display a TWITTER_OAUTH_TOKEN constant must be defined in your wp-config.php file. Requires a Twitter API key.

Attributes
  • title — the title of the widget; {string} (default: UW Twitter Feed)
  • name — the handle of the Twitter account; {string} (default: twitter)
  • count — the number of items in the feed to display; {number} ((default: 5)
Code

[twitter title="Twitter feed" count=10 name="uw"]

Example

Twitter feed

YouTube

Embed a YouTube video or playlist into your post content. You will need to obtain a Youtube API key to use this feature. You can acquire one from YouTube using your UW GSuite account or get in touch with us uweb@uw.edu for assistance.

Attributes
  • type — display a single video or playlist; options: single | playlist (default: none)
  • id — the YouTube video or playlist ID; {string} (default: none)
  • max-results — the maximum number of results to return for a playlist; {number} (default: none)
Code

[youtube type="playlist" id="PLgNkGpnjFWo9CN_HeVtujhMnUXK05iwgZ" max-results="10"]

Example

Slideshow

Embed a slideshow into your post content. Requires the UW Slideshow Plugin (https://github.com/uweb/uw-slideshow).

Attributes
  • id — Enter the ID of the slideshow you have created via the Dashboard – Slideshows; {number} (default: none)
  • simple — determines if the slideshow uses simple or complex controls; {boolean} options: true | false (default: true)
Code

[slideshow id="1234" simple=false]

Example

Slide 1

Lorem ipsum dolor sit amet consectetur adipisicing elit.

Slide 2

Lorem ipsum dolor sit amet consectetur adipisicing elit.

Slide 3

Lorem ipsum dolor sit amet consectetur adipisicing elit.

Subpage List

This shortcode lists out all the subpages relative to the current page. There are two views this shortcode can render: list or grid. The list view displays all the subpages as anchor tags in an HTML list element. The grid view displays all the subpages as boxes, with their title, excerpt and author if available.

Attributes
  • link — the text in the anchor tag that will link to the subpage; {string} (default: Read more)
  • tilebox — Enable the grid layout of the subpages; {boolean} options: true | false (default: false)
Code

[subpage-list link="More information here" tilebox=true]

Example

This page does not have any subpages.

Accordion

This is an accessible version of the accordion menu based off of Nicolas Hoffmann's accessible jQuery accordion

Code
[accordion name="Accessible Accordion"]
[section title="Example #1"]Lorem ipsum dolor, sit amet consectetur adipisicing elit. Obcaecati, velit deserunt. Ducimus sunt architecto accusamus quasi, nemo similique sint quisquam alias libero necessitatibus harum saepe provident consequuntur unde? Ipsam, quos.[/section]
[section title="Example #2"]Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod quaerat vero at eaque sequi incidunt hic necessitatibus officiis quas, nemo pariatur iusto odit laboriosam tempore voluptatibus amet eius distinctio? Provident![/section]
[section title="Example #3"]Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam nostrum nesciunt odit earum, quam repellat ipsam vero iusto deserunt omnis dolore sapiente aspernatur fugit quaerat deleniti soluta? Blanditiis, quibusdam eum.[/section]
[/accordion]
Example

Accessible Accordion

Example #1

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Obcaecati, velit deserunt. Ducimus sunt architecto accusamus quasi, nemo similique sint quisquam alias libero necessitatibus harum saepe provident consequuntur unde? Ipsam, quos.

Example #2

Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod quaerat vero at eaque sequi incidunt hic necessitatibus officiis quas, nemo pariatur iusto odit laboriosam tempore voluptatibus amet eius distinctio? Provident!

Example #3

Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam nostrum nesciunt odit earum, quam repellat ipsam vero iusto deserunt omnis dolore sapiente aspernatur fugit quaerat deleniti soluta? Blanditiis, quibusdam eum.

Custom Menu

This shortcode pulls in a custom menu that can be created under Dashboard – Appearance – Menus. Icons can be added in the class field in the menu builder.

Attributes
  • menu — the name of the menu found in Dashboard – Appearance – Menus; {string} (default: Main menu)
Code

[custommenu menu="my-amazing-menu"]

Example

Tagboard

This shortcode embeds a Tagboard feed onto the page. Tagboards that you wish to embed should already be embeddable. You can check that your Tagboard is embeddable by visiting the Tagboard's dashboard and looking for the embed icon.

Attributes
  • slug — the ID of your Tagboard, which can be found by visiting your Tagboard's dashboard and looking for the 6-digit ID at the end of the URL; {number} (default: none)
  • layout — the layout of the Tagboard; options: grid | waterfall | carousel (default: grid)
  • post-count — the number of posts to display; {number} (default: 50)
  • mobile-count — the number of posts to display on mobile; {number} (default: 50)
  • toolbar — whether or not the toolbar is displayed; options: default | none (default: default)
  • feed-type — the type of feed to display; auto will only show featured posts; if toolbar="default", default will allow the user to show latest posts or featured posts; options: auto | default (default: default)
Code

[tagboard slug="435487" layout="waterfall" post-count="30" mobile-count="15" toolbar="none" feed-type="auto"]

Example

Not available due to account limitations.


Features

UW Widget Visibility

This feature provides granular control over where each widget appears on your site. It is based on the JetPack Widget Visibility plugin and allows you to choose specific pages, authors, categories etc. to show a widget on. Follow the link for a brief tutorial on its usage.

UW Media Credit

This feature allows images to have author credits next to them. When an image is selected in the Media Library a field for Media Credit will appear next to its other attributes. This credit will always appear after the image caption.


Plugin Guides

Additional plugins can be used to extend the functionality of the UW-2014 theme. A number of them can be found at the University Marketing & Communications Github repository.

Marketo Forms

This WordPress plugin provides content authors with two short codes they can use on their pages to invoke the Marketo Subscription widget and UW Preference Center widget. The code for both of these widgets are JavaScript files that are provided by the Information Management team in Central Advancement. More information about that code can be found here: https://uwmarketo.freshdesk.com/support/solutions/articles/33000214924-how-can-i-add-a-call-out-button-on-my-website-for-people-to-sign-up-for-our-enews-

Marketo Subscription widget

The Marketo Subscription widget allows visitors to sign up for one or more Marketo emails/newsletters. To place the Marketo Subscription widget on a page, use the following shortcode:

[uw-subscription-form subscriptionid="1234" fromname="Department of Redundancy Department" fromemail="raddept@uw.edu" showplaceholders="true" hidelabels="true" returnurl=""]

All of the attributes are optional; if no attribute is supplied a default value will be used. The attributes are:

  • subscriptionid — This is the ID number of your Marketo email/newsletter. The E-Communications team can get this number for you if you do not already know it. If you want to subscribe to more than one, you can separate ID's with a comma (eg, subscriptionid="1234,1235,1236"). The default subscription is "27." This must be a number!
  • fromname — This is name you would like users to see in the From line of the email. The default name is "UW Email Sign Up."
  • fromemail — This is the email address associated with the from name. The default address is "mktosubp@uw.edu." This must be a valid email address.
  • showplaceholders — This true/false option will show the field names inside of the form field if set to true. The default value is false. If set to false, it is recommended to set hidelables to false.
  • hidelabels — This true/false option will hide the labels above the form fields if set to true. The default value is false. If set to true, it is recommended to set showplaceholders to true.
  • returnurl — If during the subscription process, you want the user to be taken to another location, enter that here. The default is to send the user back to the same page. It is highly recommended not to change this unless you know what you are doing!
UW Preference Center widget

The UW Preference Center widget allows visitors to manage all of their Marketo subscriptions in one place. To place the UW Preference Center widget on a page, use the following shortcode:

[uw-preference-center preferenceid="1234" managepreferences="true" fromname="Department of Redundancy Department" fromemail="raddept@uw.edu" showheader="true"]

All of the attributes are optional; if no attribute is supplied a default value will be used. The attributes are:

  • preferenceid — This is the ID number of your Marketo organization (ie, the account under which all of your emails/newsletters live). The E-Communications team can get this number for you if you do not already know it. The default value is "21."
  • managepreferences — This true/false value will determine if the user can manage all of their Marketo preferences through this widget. The default value is true, and it is highly recommended to keep that value.
  • fromname — This is name you would like users to see in the From line of the email and throughout the Preference Center. The default name is "UW Email Sign Up."
  • fromemail — This is the email address associated with the from name. The default address is "mktosubp@uw.edu." This must be a valid email address.
  • showheader — This true/false value will determine whether the Preference Center header is shown. The default value is true, but you are advised to try both true and false values to determine which look may be most appropriate for your site.

Contact Form 7

Contact Form 7 is the contributed form building plugin used by the UMAC Web Team for creating simple web forms.

Preventing spam

Spam messages can cause headaches and security issues on any website. It's important to always enable anti-spam measures when creating any web form. Ensure that name or email address fields are required for all forms. Akismet is highly recommended for all WordPress sites and can be used with Contact Form 7. ensure that Akismet is enabled and add the akisement:author and akisment:author_email are added to the respective form fields, similar to the example below:

<p>Your Name (required)<br />
[text* your-name akismet:author]</p>
<p>Your Email (required)<br />
[email* your-email akismet:author_email]</p>

Further prevention to block spam bots from submitting forms can be added with a simple quiz field appended to your form. Quizzes are required by default. Example:

<p>Spam verification (required)<br />
[quiz quiz-134 "Which of these is a color: hand, purple, grass?|purple""What is the capital of France?|Paris""Which number is larger, 43 or 16?|43"]</p>