UW 2014 Theme

The UW 2014 Theme is available to anyone wishing to apply the Boundless UW brand to their website. This is an overview of the custom widgets, plugins and various features it includes.

UW 2014 Theme

Quick Start

Download the UW 2014 theme into the wp-content/themes folder of your local WordPress install. Next, log into the WordPress dashboard and go the Appearance -> Themes page. From here you can activate the UW 2014 theme.

Bugs and feature requests

All bugs and feature requests can be issued at the UW Web Team's GitHub account or emailed directly to the UW web team at uweb@uw.edu.

Quicklinks

Default quicklinks are provided in the theme if you would like them to be consistent with what is on the https://uw.edu website. To customize them, just create a menu in the Quick Links location. Note: For multisites, Quick Links location will only appear on blog/site 1 and populate all other sites.

Links that have a class set containing an icon will appear at the top formatted as a larger link with an icon. Links without an icon will appear under the "Helpful Links" section.

Icon class options:

icon-map
icon-directories
icon-calendar
icon-libraries
icon-medicine
icon-myuw
icon-uwtoday

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 authro (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, ie: '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)

Requires the JetPack Plugin to be installed.

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.

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)

Requires JetPack to be installed.

UW Twitter

Shows the latest tweets from a specific Twitter account. Leverages the official Twitter embed.

Options:

Screen name : The title of the widget (Default: uw)

Number of tweets to show: The number of tweets 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. See some examples.

Attributes:

color : The color of the button. Options: gold or gray (Default: gray)

type: Adjusts the image of the button. Options: plus, go, external, play (Default: go)

small: Adjusts the size of the button. Options: small, large (Default: large)

url: The URL where the button links to (Default: None)

Example:

  [button color=gold type=plus small=true url="http://uw.edu"]Button Text[/button]`

Google Apps/Calendar shortcode

The [googleapps] shortcode has be deprecated. Please use the [iframe] shortcode instead.

To migrate from the [googleapps] calendar shortcode to the [iframe] shortcode, you will need to update as follows.

Your old Google Calendar [googleapps] shortcode looks like this:

    [googleapps domain="www" dir="calendar/embed" query="src=somenetid%40uw.edu&amp;ctz=America%2FLos_Angeles" width="500" height="500"]

Update it to:

    [iframe src="https://calendar.google.com/calendar/embed?src=somenetid%40uw.edu&amp;ctz=America%2FLos_Angeles" height="500" width="500"]

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 (Default: none)

height : The width of the embedded iframe (_Default: WordPress's embed size width setting )

width : The height of the embedded iframe (_Default: WordPress's embed size height setting )

Example:

    [iframe src="https://www.youtube.com/embed/0h33Y9Zw8oQ" height="500" width="700"]

Allowed domains:

  uw.edu,
    washington.edu,
    uwtv.org,
    tvw.org,
    google.com,
    youtube.com,
    excition.com,
    pgcalc.com,
    matchinggifts.com,
    docs.google.com,
    surveygizmo.com,
    uwregents.wufoo.com,
    depts.washington.edu,
    online.gifts.washington.edu,
    secure.gifts.washington.edu,
    payroll.gifts.washington.edu,
    helperapps.gifts.washington.edu,

Intro

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

No attributes.

Example:

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

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. (Default: None)

number: The maximum number of results to return (Default: 5)

title: The title for the RSS blogroll in the content (Default: None)

heading: The html element for the post titles. (Default: h3)

show_image: Choose whether to show the RSS thumbnail. Options: true, false. (Default: true)

show_date: Choose whether to show the publish date. Options: true, false. (Default: true)

show_more: Choose whether to show the author. Options: true, false. (Default: true)

Example:

  [rss url="http://www.washington.edu/marketing/topic/wordpress/feed" number=3 title="Web Team Updates" heading="h2" show_image="false" show_date="false"]

Tile box

Display branded tiles to structure content in elegantly. See an example of tiles here. 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 or none (Default: none)

color : Background color of the tiles. Options: tan (Default: none)

empty : (Add this to [tile], not [box]). If tile has no content, allow it to be transparent, but take up the normal amount of space. Options: true (_Default: false)

Example:

[box alignment=centered]
    [tile] Text for tile one [/tile]
    [tile] Text for tile two [/tile]
    [tile] Text for tile three [/tile]
    [tile] Text for tile four [/tile]
  [/box]

Trumba

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

Attributes:

name : Required Trumba web name of the desired calendar (Default: none)

type : The Trumba spud type of the desired calendar. Changing the type will change how the calendar is displayed. A list of all spud types can be found here. (Default: none)

base : The full url of the desired base calendar. This can be embedded on your site with the spud type='main' (Default: none)

    [trumba name='my web name' type='desired spud type' base='teaser base url']

Example:

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

Twitter

This is a shortcode embeds a Twitter feed for a desired username. It behaves similarly to the UW Twitter Widget. Leverages the official Twitter embed.

Attributes:

Screen name : The title of the widget (Default: uw)

Number of tweets to show: The number of tweets to display (Default: 5)

Example:

  [twitter count=10 name=uw]

YouTube

This shortcode has been deprecated. To embed a youtube video, Simply copy and paste the YouTube video URL to embed videos and playlists.

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. (Default: None)

simple : The youtube video or playlist id (Default: None)

Example:

  [slideshow simple='true' id='1234']

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 (Default: Read more)

tilebox : Enable the grid layout of the subpages ( Default: false )

Example:

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

Accordion

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

Example:

  [accordion name='Accessible Accordion']
    [section title='Example'] Section[/section]
    [section title='Example'] Section[/section]
    [section title='Example'] Section[/section]
   [/accordion]

You can link to and automatically open individual sections of the accordion by adding them them the url. Example: http://www.washington.edu/about/#ACCORDION_ID will link to and open the accordion section. Note: you will need to retrieve the accordion section ID from the code as this is automatically generated and cannot be set.

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. View the full set of icons for more information.

Example:

  [custommenu menu=Menu-name-here]

Attributes:

menu : Enter the name of the menu found in Dashboard > Appearance > Menus. (Default: Main menu)

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. This can be found by visiting your Tagboard's dashboard and looking for the 6-digit ID at the end of the url. (Default: none)

layout : the layout of the Tagboard. Options: grid, waterfall, carousel (Default: grid)

post-count : the number of posts to display (Default: 50)

mobile-count : the number of posts to display on mobile (Default: 50)

toolbar : whether or not the toolbar is displayed. Options: default, none. (Default: default)

feed-type : auto or default. Choosing auto will only show featured posts. If toolbar="default", choosing default will allow the user to show latest posts or featured posts. (Default: default)

Example:

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

Features

UW Widget Visibility

This feature provides granular control over where each widget appears on your site. It is based on the JetPack Widget Visibilityj 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 Markeitng & 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 meausres 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 Conact Form 7. ensure that Akismet is enabled and add the akisement:author and akisment:author_email are added to the respectives form fields, similar to the example below:

&lt;p&gt;Your Name (required)&lt;br /&gt;
    [text* your-name akismet:author] &lt;/p&gt;

&lt;p&gt;Your Email (required)&lt;br /&gt;
    [email* your-email akismet:author_email] &lt;/p&gt;

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:

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

Creators

Dane Odekirk Jon Swanson Kilian Frey

Contributors

Ben Erickson

License

GPL-2.0+

UW 2014 Theme

Table of contents

Quick Start

Bugs and feature requests

Quicklinks

Widgets

UW Blogroll

UW Campus Map

UW Recent Posts

UW Related Posts

UW RSS

UW Single Image

UW Top Posts

UW Twitter

UW Contact Card

UW Image Card

Shortcodes

Button

Blogroll

Google Apps/Calendar shortcode

iFrame

Intro

RSS

Tile box

Trumba

Twitter

YouTube

Slideshow

Subpage List

Accordion

Custom Menu

Tagboard

Features

UW Widget Visibility

UW Media Credit

Plugin Guides

Marketo Forms

Marketo Subscription widget

UW Preference Center widget

Contact Form 7

Preventing spam

Creators

Contributors

License

About

Languages