• Overview
• How to add updated documents

Overview

Have you ever made a change to a PDF or Word Document hosted on your WordPress site, only to upload the new version and find that the URL has changed? The Marketing Web Team has added a “Replace Media” option to the UW Theme, which will allow you to upload new versions of the same document and keep the original URL.

You can use the below process for any document that can be uploaded into WordPress, except images.

How to add updated documents

1. Select Media > Library from the left-hand menu in your WordPress Dashboard.
   
2. In the Media Library, find the file you want to update.
3. Click the file name or the Edit link to open the Edit Media page for your file.
   
4. Click the Replace button towards the bottom of the Edit Media page.
   
5. Click Upload Files, and then click the Select Files button to upload your new file.
   
   

   Click image to enlarge.

6. When your file is uploaded, you will find it’s information in the Attachment Details section on the right-hand side.
   
7. Click Select at the bottom of the Attachment Details section.
   
   • You will see a red warning notice at the top of the Edit Media page. This is only to notify you about your impending changes.
     
8. Click Update to save your changes.
   
9. A yellow message at the top of the Edit Media page will confirm that your changes have been made.
   
10. To make sure your document successfully updated, open a page on your site where the document is linked and download and open the file.
    • Note: You may need to hard refresh your browser window before the updates are visible.

• Overview
• Create a new gallery
• Future improvements

Overview

The Marketing Web Team has created a custom image gallery for our UW WordPress Theme. Our gallery can be added to any page, post or homepage and features:

• A clean way to showcase many images on one page.
• A slideshow experience without an additional plugin.
• A title and optional caption overlay that appear when the user hovers their mouse over thumbnail images.
• Social sharing links and the title/caption overlay when the user hovers over expanded images.

Take this gallery of Katherine’s photos for a test drive:

Facebook Twitter Original Image

CloseShow caption

How to create a new gallery

Important: This tutorial assumes you are comfortable with uploading new images in WordPress. If you are unfamiliar with how to upload images, please start with our step-by-step image tutorial.

1. Make a new page or post, or edit an exiting one.
2. Place your cursor where you would like the image gallery to appear, then click Add Media.
   
3. A pop-up box titled “Insert Media” will appear. Click the Create Gallery link.
   
4. Upload any new images (follow Steps 3-10 in the image tutorial).
   • Note: If the images you want in your gallery are already uploaded to your Media Library, click the Media Library link and go to Step 6.
5. When you finish uploading your new images, you will be taken to the “Media Library” section of the “Insert Media” pane. Your newly uploaded images will appear as small thumbnails at the bottom.
   
   • You can click on each image and edit your metadata in the “Attachment Details” pane to the right-hand side during this time (changes save automatically).
   • Go to Step 7 if you are not adding any already uploaded images to your gallery.
6. Select all images you want to appear in your gallery from the Media Library section. A check mark in the corner of each image you selected will appear, and small icons of your selected images will appear at the bottom.
   
7. Click Create New Gallery at the bottom of the “Insert Media” pane.
   
   

   Click image to enlarge.

8. You will now be in the “Edit Gallery” pane. Drag and drop your images to reorder them.
   
   

   Click image to enlarge

9. If you need to edit your image titles, captions, and other metadata, click on one image to make your edits in the “Attachment Details” section on the right-hand side. (Your changes will save automatically.)
   
   

   Click on image to enlarge.

10. Click the Insert gallery button at the bottom of the “Edit Gallery” page.
11. You will return to the “Edit Post” or “Edit Page” screen and a gallery shortcode will have been added to your content area.
    
12. Preview your page or post to test out your new gallery.
    
13. Click Publish or Save Draft to save your changes.

Future improvements

Because the galleries are a new (and complex) addition to our theme, we are still working on making improvements. If you have feedback, please email uweb@uw.edu.

We have already received requests for the below improvements, which we will try to add in the near future:

• A way to “save” galleries so they can be accessed from the Media Library.
• A way to make changes or edits to galleries after the page/post containing them has been published.
• Enabling galleries on one site to be shared or embedded onto another UW WordPress site.

• Overview
• Embed YouTube or Vimeo videos
• Embed UWTV videos

Overview

Videos are a great way to enhance your pages and posts. Our current WordPress theme makes it easy to embed YouTube and Vimeo videos by using only a URL, while embedding UWTV videos requires a few extra steps.

Note: The Marketing Web Team does not currently provide support for embedding video from other services.

YouTube or Vimeo

Check out the following step-by-step tutorials from WordPress.com:

• Embed YouTube videos in WordPress
• Embed Vimeo videos in WordPress

UWTV

1. Find and open the video page for the video you wish to embed.
   
2. Scroll down the page until you find the social sharing icons. Click on the green Embed icon and link.
   
3. The Embed link will expand to reveal a box with an “iframe” code.
   
4. Copy the embed URL, after the “http://” part of the URL. (Note: Ignore the rest of the iFrame code for Marketing-hosted WordPress sites.)
   
5. Edit or create the page or post that will contain your embedded video.
6. In the editor, enter [iframe width=100% src="URL"] and replace the URL with the embed URL you copied in step 4.
   
   

   Click image to enlarge.

   • Example code: [iframe width=100% src="uwtv.org/embed/12192323866/"]
7. Preview your changes to make sure the video appears, and then publish your page or post when ready.
   • If you see a security warning when you preview your page or post, see the Troubleshooting section below.

Troubleshooting for UWTV videos

If you copy the entire embed URL—including the “http://”—you may notice that the video will show a security warning when previewing your page or post. If you publish your page or post, this warning will disappear and the embedded video will show.

If you prefer to preview the content before publishing, follow these steps:

1. Remove the http:// part of the embed URL.
   
2. Preview your page or post and your video should appear.
   

For more information on widgets and how to use them, visit the Widgets page on the WordPress Codex.

Custom widgets at a glance

• Community Photos
• KEXP/KUOW
• Pagelets
• UW Pride Points
• UW RSS
• UW Showcase

Community Photos

Display the latest photos submitted to UW Community Photos in the sidebar of your site. (Photos are reviewed by News & Information staff.)

KEXP/KUOW

The latest news from KEXP and KUOW in the sidebar of your site.

Pagelets

The Pagelet widget is for content that needs to be displayed in the right-hand menu of some (but not all) of your pages. Read our Pagelet documentation for detailed steps on how to use Pagelets in your sidebar.

UW Pride Points

Display Pride Points (notable UW facts) on your pages. The Marketing Web Team plans to roll this widget out by Summer 2013.

UW RSS

This widget replaces the default WordPress RSS widget for your sidebar and can display a blurb before the RSS feed content.

The title and blurb fields are optional. Below is how the RSS widget will display without this information:

If you fill in both the title and blurb fields, here is an example of how the RSS widget will display:

UW Showcase

Display one of the below pre-populated snippets of content in the sidebar of your site. These options are maintained by the Marketing Web Team and cannot be modified. If you find a broken link or outdated content, send us an email at uweb@uw.edu.

UW on Facebook

Interactive Maps

Apply to the UW

If there is a plugin on this list that you would like activated, email uweb@uw.edu and let us know the name of the plugin and the URL of your site.

Contact Form 7

This is the contact form we use for most sites. The plugin allows you to customize a web form that will send you the information via email when submitted. You can create multiple contact forms, and the plugin supports many different features including spam filtering, CAPTCHA, and file uploading.

Learn more about Contact Form 7 from the developer site.

Disqus Comment System

Disqus is an alternative to the default WordPress commenting system and is currently used by UW Today. You will need to manage comments from the Disqus site rather than from WordPress, but the platform offers more robust community features.

Learn more from the Disqus plugin page.

Google Analytics Dashboard

This is a plugin that displays a simple Google Analytics graph on your main WordPress Dashboard. If you are hosted on our WordPress install, then your site is already being tracked in our Google Analytics account. If you would like to see an overview of your site analytics from your Dashboard, email uweb@uw.edu and let us know you want us to activate the Google Analytics Dashboard for your site.

Learn more from the Google Analytics Dashboard plugin page.

RoyalSlider

The RoyalSlider is a featured content plugin used in combination with a separate UW WordPress theme. We recommend this theme and plugin duo only for sites that are frequently updated with fresh content.

See it in action on the UAA site or learn more from the RoyalSlider developer site.

Sharedaddy

Sharedaddy integrates social sharing buttons on the bottom of your pages or posts and encourages visitors to share content on Twitter, Facebook, LinkedIn and via email.

Note: Even though Sharedaddy has been deprecated in favor of Jetpack, the web team has decided to continue using and supporting this plugin in the foreseeable future.

Yet Another Related Posts Plugin

This plugin displays related entries on your posts. The goal is to increase your readers’ engagement by surfacing related content that they will find interesting.

Learn more from the Yet Another Related Posts plugin page.

• Overview
• Embed a map centered on a campus building or landmark
• Embed a map centered on a campus parking lot
• Customize embedded map dimensions

Overview

Did you know that you can embed a smaller version of the Campus Map right into your UW Theme WordPress site? This map is interactive and will even let users find directions from any point on campus (or a specified address) straight to your building or parking lot.

Below is an example embedded directly onto this page:

Embed a map centered on a campus building or landmark

1. Open the Campus Map site in your web browser.
2. Find the building or landmark that you wish to be the center of focus on your map.
3. Hover your mouse over the building or landmark until you see an opaque circle.
   • 
4. Click on the opaque circle that is over your desired building or landmark to open an info box. (See image for Step 5.)
5. Copy the Share link located on the right-hand side of the info box.
   • 
     Click image to enlarge.
6. From your WordPress CMS, edit the page or post on your site where you want to embed your Campus Map.
7. Paste the Share link directly into the post editor (you can paste the link using either the Visual or HTML editor).
   • 
     Click image to enlarge.
   • Note: Your embedded map will always display as the share link whenever you edit your page or post.
8. Publish or save the changes you made to your page or post. The embedded map will now appear when you view your live page or post.
   • 
     Click image to enlarge.

Embed a map centered on a campus parking lot

1. Open the Campus Map site in your web browser.
2. Check the Parking Lots checkbox in the right-hand menu.
   • 
3. All parking lots on the map will now be highlighted by red overlays.
   • 
     Click image to enlarge.
4. Find the parking lot that you wish to be the center of focus on your map and click on the lot to open an info box.
   • 
     Click image to enlarge.
5. Copy the Share link located on the right-hand side of the info box.
   • 
     Click image to enlarge.
6. From your WordPress CMS, edit the page or post on your site where you want to embed your Campus Map.
7. Paste the Share link directly into the post editor (you can paste the link directly into either the Visual or HTML editor).
   • 
     Click image to enlarge.
   • Note: Your embedded map will always display as the share link whenever you edit your page or post.
8. Publish or save the changes you made to your page or post. The embedded map will now appear when you view your live page or post.
   • 
     Click image to enlarge.

Customize embedded map dimensions

When embedding the Campus Map into your UW Theme WordPress site, the default size is set to fill the width of your main content area. However, you may customize the map dimensions by setting either a percentage or specific pixel attribute at the end of the building, landmark, or parking lot share link. (To find the share link follow steps 1-5 for a campus building or landmark, or steps 1-5 for a campus parking lot.)

When resizing your embedded map, the share link pattern is as follows:
http://uw.edu/maps/?building,width,height

The below examples will all use the share link for Kane Hall (http://uw.edu/maps/?kne).

Example 1: Map Dimensions Using Pixels

To customize the Kane Hall map size to 300 pixels wide and 400 pixels high, the share link would be written as: http://uw.edu/maps/?kne,300,400.

Note: You may notice that you only need to write out the map dimensions without designating them as pixels. This is the default setting. You may also write out the above link as follows: http://uw.edu/maps/?kne,300px,400px

Here is how the above 300px X 400px map displays:

Example 2: Map Dimensions Using Percentages

For this example, we will designate the embedded Kane Hall map dimensions using a percentage of the default width (see embedded map in the Overview section as an example of the default size). The height may only be changed using pixels (see Example 3 below).

To customize the map size as 50% smaller than the default width, the share link would be written as: http://uw.edu/maps/?kne,50%.

Here is how the above Kane Hall map displays:

Example 3: Map Dimensions Using a Mix of Pixels and Percentages

Should you want to customize the map dimensions using both a percentage width and a specific pixel height, you may do so using this pattern: http://uw.edu/maps/?building,%,pixels.

For example, to change the Kane Hall map size to 60% of the default width and 600 pixels high, the share link would be written as: http://uw.edu/maps/?kne,60%,600.

Here is how the above Kane Hall map displays:

• Embed a Google Calendar into a page or post
• Embed a Google Calendar into your sidebar

If you need help with creating a Google Calendar, please read their help article Create a new calendar in the Google Calendar Help pages.

Embed a Google Calendar into a page or post

If you would like to embed a Google Calendar into a page or post on your UW WordPress site, follow these steps:

1. Log into your Google account and open the Calendar page.
2. Click on the arrow next to your calendar name and select Calendar settings from the drop-down menu.
   • 
3. Click the Share this Calendar tab.
   • 
4. Check the Make this calendar public check box and click on the Save button.
   • 
5. A warning dialog box will appear and ask if you’re sure you would like to make your calendar available to the public. Click Yes and you will be directed back to the main calendar page.
   • 
6. Open Calendar settings again (see Step 2). Make sure you are on the Calendar Details tab.
   • 
7. Lower on the Calendar Details page, you will find a section titled “Embed This Calendar.” Copy the entire embed code that begins with “<iframe src.”
   • 
     Click on image to enlarge.
8. From your WordPress CMS, edit the page or post on your site where you want to embed your Google Calendar.
9. Paste the iFrame code directly into your HTML editor. (You can switch between the Visual and HTML editors using the tab at the top-right of the editing box.)
   • 
     Click on image to enlarge.
10. Publish or save the changes you made to your page or post.
    • Note: You may notice that your iFrame code changed into a shortcode after you saved your page or post:
    • 
      Click on image to enlarge.
    • iFrame code is generally not allowed in UW WordPress installs because of security risks. The Marketing Web Team has made an exception for Google iFrames, which will be converted into a shortcode after you save your changes.

Below is an example of what an embedded calendar may look like on your UW WordPress site.

Click on image to enlarge.

Embed a Google Calendar into your sidebar

If you would like to embed a Google Calendar into the right-hand sidebar of your UW WordPress site, follow these steps:

1. Log into your Google account and open the Calendar page.
2. Click on the arrow next to your calendar name and select Calendar settings from the drop-down menu.
   • 
3. Click the Share this Calendar tab.
   • 
4. Check the Make this calendar public check box and click on the Save button.
   • 
5. A warning dialog box will appear and ask if you’re sure you would like to make your calendar available to the public. Click Yes and you will be directed back to the main calendar page.
   • 
6. Open Calendar settings again (see Step 2). Make sure you are on the Calendar Details tab.
   • 
7. Lower on the Calendar Details page, you will find a section titled “Embed This Calendar.” Click the Customize the color, size, and other options link.
   • 
     Click on image to enlarge.
8. You will now be on a page titled “Google Embeddable Calendar Helper.”
   • 
     Click on image to enlarge.
9. Change the Width to 299 (this is the width of our the UW WordPress Theme sidebar). You may also edit the height to whatever number you desire.
   • 
10. You may notice that the upper area of your calendar has information that is now truncated and displaying incorrectly. This is because you’ve decreased the calendar width to a point too small to display all of Google’s default information.
    • 
11. Uncheck some boxes under the Show section to create more space at the top of your calendar.
    • 
12. When you have finished customizing your calendar, copy the entire embed code from the field at the top of the page.
    • 
13. From your WordPress Dashboard, navigate to Appearance > Widgets.
    • 
14. Drag a new Text Widget to your sidebar.
    • 
      Click on image to enlarge.
15. Add a title to your widget (optional).
16. Paste the iFrame shortcode into the main box of your text widget.
    • 
17. Click the Save button. Your calendar will now appear in the sidebar of your live site.
    • Note: You may notice that your iFrame code changed into a shortcode after you saved your page or post:
    • 
    • iFrame code is generally not allowed in UW WordPress installs because of security risks. The Marketing Web Team has made an exception for Google iFrames, which will be converted into a shortcode after you save your changes.

Below is an example of what an embedded calendar may look like in the sidebar of your UW WordPress site.

Click on image to enlarge.

• How to add users to UW WordPress sites
• About user roles
• Troubleshooting

How to add users to UW WordPress sites

The Marketing Web Team has simplified the WordPress log-in process so that users only need their UW NetID. This means it is very important to add new users using their UW NetID and UW email, otherwise they will not be able to access your WordPress Dashboard.

Note: You must be an Administrator in order to add a new user to your site.

1. Select Users > Add New from the left-hand menu of your WordPress Dashboard.
   • 
2. Under the “Add New User” section of the next page: Enter the new user’s UW NetID in the Username field, enter their UW email address in the E-mail field, and select their Role.
   • 
   • Note: See the About User Roles section lower on this page for more information about what each role allows.
3. Click the blue Add New User button below the information you just entered.
4. You should see a yellow confirmation at the top of the page that reads “User has been added to your site.”
   • 
   • Note: If you see a red error message instead, please refer to the Troubleshooting section below.
5. Your new user has been added and can now log in using their UW NetID. They will not receive a confirmation email.

About user roles

When adding a user, you are presented a number of options for user roles. Below is a brief summary of what tasks each role allows:

• Subscribers can only manage their WordPress profile.
• Contributors can write and manage their posts but not publish them.
• Authors can publish and manage only their own posts (but not pages) and upload files.
• Editors can publish and manage posts and pages they and other users have created, manage and approve comments, and upload files.
• Administrators have access to most administration features and can add/update users, manage posts and pages, approve comments, but cannot install or activate plugins.
  • Note: We recommend assigning Administrator permissions to a very limited number of users per each site, and only granting users with intermediate to advanced WordPress knowledge an Administrator role.

Troubleshooting

Did you receive the below error message after following the steps in How to Add Users to UW WordPress Sites?

This error message means that the user you tried to add is already in the UW WordPress system. To add that user to your site:

1. Make sure you are on the Add New User page. If not, select Users > Add New from the left-hand menu of your WordPress Dashboard.
2. From the “Add Existing User” section, enter the new user’s UW NetID in the “E-mail or Username” field.
3. When entering the user’s UW NetID, a drop-down with their NetID and email address should appear. Select their correct UW NetID from this drop-down field.
   • 
4. Select their user role from the Role field.
5. Click the blue Add Existing User button.
6. You should see a yellow confirmation at the top of the page that reads “User has been added to your site.”
   • 
7. Your new user has been added and can now log in using their UW NetID. They will not receive a confirmation email.

Examples

To comment out the following anchor…
<a href="http://google.com" title="Google">Google</a>
do the following:
<!--a href="http://google.com" title="Google">Google</a-->

Here’s another example, starting with the h3 tag and ending with the image tag:

<!--h3>SOME NEIGHBORHOOD NOTABLES
Named after Edmond S. Meany, the history professor, registrar and prominent civic leader for whom the UW's Meany Hall is also named, the Edmond Meany Hotel (1930-1931) remains an impressive landmark in the University District and is currently home to the Hotel Deca.
<img src="http://www.washington.edu/community/map/drumhellerfountain1910.jpg/image_sidebar" alt="Drumheller Fountain" width="150" height="89" /-->