custom plugins

UC Slideshow

Note: If you’re using Hale 2015, Sherman, or any other Cornerstone based theme, use Meta Slider instead of UC Slideshow.

UC Slideshow is a custom widget developed by UITS to create basic image slideshows for your homepage.

Setup

slideshow-setup-1

  • Log in and go to Appearance > Widgets.
  • Drag UC Slideshow into one of the Home sections.
  • Click the Save button.

Using UC Slideshow

Use the Add Images button to select up to 5 images from your media library. If you haven’t yet added the images to your media library, cancel. Look for Media > Add in the main system navigation, upload your images, and then return to Add Images.

Text

If you’d like text to appear with the image, fill in the ‘Caption‘ field.

Links

To add a link, paste a web address into the ‘UCS Link‘ field, and the entire image will be clickable. For example: http://aurora.uconn.edu/

Ordering

To change the order of the slides, click and drag the thumbnails along the bottom of the window.

Removing Slides

As you select an image, you’ll see a checkmark appear in the top right corner of the thumbnail. To remove the slide, click the checkmark again.

Additional Features

slideshow-setup-2

Effect

Choose what kind of animated transition will occur in between the slides.

Speed

This determines how much time each slide will remain on the screen before moving to the next.

Theme

This will influence how the display controls will look.

Formatting Your Images

If you don’t crop your images, they may not fit quite right into your slideshow.

Depending on which section you place your slideshow in, the maximum width and height will change. If you want a simple rule, just clip your images to the ‘Full Width’ measurements below. That will also give you the greatest degree of flexibility in deciding where to place things.

Homepage Column Type Width (px) Height (px)
Full Width* 1170 456
Two-Thirds width 770 300
Half width 570 221
Third width 370 144
Quarter width 270 105

* If you save it at this size, it will size down correctly to any of the other configurations. If you’re not sure what layout you want to use, sizing your photos to these dimensions is a good option.

University User Profiles

Note: If you’re using Hale 2015, Sherman, or any other Cornerstone based theme, use UC People instead of University User Profiles.

University User Profiles is a plugin created by UITS to offer a better way to manage faculty and staff profiles for websites within Aurora.

Key Features

People Pages

Site Administrators can now create pages that display a number of users in a list or table view with portrait photos and contact details. Use Tags to only display users from certain groups.

Please note that users are displayed in a single list or table, alphabetically by last name. Alternate displays are possible, but may require a web developer to create a new page template for your site. See the UUP Dev Guide for details.

Profile Pages

A detailed profile page is created for each user. A person can always log in and update their own profile and Site Administrators can update any user’s profile.

Flexiblility

UUP has a powerful, flexible backend for developers looking to create child or custom themes within Aurora.

Setting Up

What you’ll need:

  • The NetID of every person you want to list.
  • The UConn email address of every person you want to list.
  • The First and Last Names of each person you want to list.

In the next steps, you’ll be using this information to register these people as Users on your site, and you’ll want at least this much information about each person before getting started.

First and foremost, you’ll want to have the users listed on your site. For more information on how to do this, refer to the Adding Users page.

Adding Names

  1. Go to Users > All Users and select the User’s NetID to edit their profile.
  2. Add First and Last Name
  3. Display name publicly as: Change the default NetID to the first and last name.

Adding University Profile Info

Visibility

By default all users are marked as ‘Private’, meaning they are not available to be displayed in the User List or User Table. Marking a user as ‘Public’ will allow them to be displayed. You can use Private to hide certain users. For example, you may want to mark a user Private if they are working on your site but are not considered a member of your group or team.

Tags

This is a powerful feature that can be used to create different types of user index pages. With tags you can create pages that will only display users with the “faculty” tag, or even only those users with both the “faculty” and “adjunct” tags. It’s very flexible but spelling matters, so be precise and consistent!

Image

For best results upload your images as squares: 300 pixels x 300 pixels. Uploading other sizes or shapes will still display as squares, but it may force some of the original image to be cropped out.

Everything Else

The fields Title, Phone 1, Phone 2, Fax, Office Location, Office Hours, and Mailing Address can hold any text information you feel is relevant to those fields. There is no required format.

Remember to save your information by selecting ‘Update User’.

uup-fields
An example of the User Info section

Adding Indexes of Users with Shortcodes

With shortcodes, you can quickly drop a few people into any page or post.

List View

[uc_uup layout="list"]

List view displays all public users in a list format. It shows their photo, name, phone1, email, mailing address, and website address.

Table View

[uc_uup layout="table"]

Table view displays all public users in a table. It shows their photo, name, title, phone1, email, office location, office hours, and courses.

Hiding Information

If you would like to encourage people to email your users rather than call, add “phone1” to the hide_fields:

[uc_uup hide_fields='phone1' layout='table']

You can also hide more than one field by separating the values with commas. If you wanted to hide both the phone number and the email address:

[uc_uup hide_fields='phone1, email' layout='table']

The fields that can be hidden are name, image, title, phone1, email, mailingAddress, officeLocation, officeHours, and courses.

Using Tags to Show Select Users

Users can be entered with tags which can be used to mix and match any combination or subset of your users.

For example, if you tagged a number of your users with the word “faculty” you could then bring up a list of all “faculty” users with:

[uc_uup tags='faculty'  layout='list']

You can also use more than one tag and only display users that have all of those tags. For example, you could create a list of users that have the tags “faculty” and “adjunct” with:

[uc_uup tags='faculty, adjunct'  layout='table']

You can add as many tags as you want to sort your users in as many ways as you can think of.

Combinations

You can, of course, combine tags and hide_fields to create different combinations.

[uc_uup tags='faculty, adjunct' hide_fields='title, officeLocation' layout='table']

Creating an Index of Users with Page Templates (Deprecated)

This is another method to create a page with a list of your users.

Update (July 2014): This method is still available in the themes Hale and Prudence, but it is highly recommended that users pursue the shortcode method outlined above. Future themes will no longer use these page templates.

  1. Go to Pages > Add New
  2. Title your page whatever you like.
  3. Write any content that you would like to appear above your user index in the main content area.
  4. On the right, under Page Attributes, change the Template from Default Template to either User List or User Table.
    page-templates
  5. Optionally, you can also filter the results by one or more tags. To do this, scroll to the very top of the screen and look for the ‘screen options‘ tag. Check the box for ‘Custom Fields‘. If you scroll back down, you’ll see the Custom Fields box appear under the main content area. Click the ‘Enter new‘ link just above the Add Custom Field button. On the left, under Name, enter “userTags”. On the right, enter the tags you would like to limit this index to, separated by commas.
    custom-fields

This page will display the user’s photo if any was added, and a few key pieces of contact information. If you want to use the tags feature, you can make multiple User List or User Table pages, each with different tags, and sort people based on a number of criteria.

Making User Profiles

If you would like to have a more detailed page for one or more of your users, you will want to create a some profile pages.

  1. Go to Pages > Add New
  2. Title your page whatever you like. This is an opportunity for you to add things like a middle name or initial, Dr., Ph.D., Jr., Sr., or other name modifications that won’t appear in an index page.
  3. Enter whatever additional content you’d like in the main content area. This can include a personal statement, a C.V., areas of research, publications, or anything else you’d like.
  4. On the right under Page Attributes, change the Template menu to User Profile.
  5. Once you make this change, a new box will appear beneath the main content area titled ‘Profile User‘. Change this menu to the name of the person you wish to associate with this profile. This will create a link on the index page and bring in their information from their profile. If you don’t see the Profile User box after changing the page template, scroll to the very top of the page and look for the Screen Options tab in the top right corner. Click that and make sure that the Profile User option is checked.

This person will now be linked from the User List or Table you created, and their info will be loaded into a left sidebar.

Custom CSS

With the Custom CSS Tool, Site Admins are able to write their own CSS to modify aspects of any template.

This tool is located within Appearance > Custom CSS.

For security purposes, all CSS is sanitized before being allowed onto the site. Once you hit update, you will notice that the formatting may change. That is the sanitizer CSSTidy at work.

You can revert to the previous version of your custom CSS by clicking the Revert to previous version link that appears underneath the editor.

Allowed CSS

The following CSS selectors, values, and properties will work in the Custom CSS plugin.

Default CSS

Additional CSS

Selectors

:before
:after
area
article
audio
section
aside
base
bdi
body
canvas
command
datalist
details
dialog
embed
footer
figure
figcaption
head
header
hgroup
html
keygen
link
main
map
mark
meta
meter
nav
output
progress
rp
rt
ruby
source
style
summary
time
title
track
video
wbr

Properties

align-content
align-items
align-self
background-clip
background-origin
bottom
border-radius
border-image
box-shadow
box-sizing
color
content
display
filter
flex-grow
flex
flex-direction
flex-flow
font-size-adjust
font-stretch
justify-content
left
min-height
min-width
opacity
order
overflow
overflow-x
overflow-y
position
right
tab-size
text-align-last
text-justify
text-overflow
text-shadow
top
visibility
word-break
word-wrap
z-index

Values

src
rgba()
!important

If your site needs to use CSS properties not listed here, look into custom theming.

UC Events Calendar

The UC Events Calendar Widget will display events from any account, or combination of accounts, from the main UConn Events Calendar.

Note that the widget marked Calendar is a WordPress default widget that displays a calendar of posts, and is unrelated to the UConn Events Calendar plugin.

To find the widget, log in and go to Appearance > Widgets. Then, drag UC Events Calendar into a Home section.

How to Use

RSS Feed

Paste the link to an RSS feed from the calendar into this section. You can follow the link next to the text field to create an RSS feed.

Events

This is the number of upcoming events that will appear.

Style

UConn Calendar, as text.
Text will give you the dates and titles of events in a simple text format.
UConn Calendar, with Icons
Icons will place each date in a block, and also include the start time for each event.

calendar-widget-options

Shortcodes

You can embed either a list of Upcoming events or a full Month view of events on any post or page using a shortcode.

Calendar Number

The calendar number is the last number in the web address when viewing a specific calendar on events.uconn.edu.

screenshot
When viewing the UConn Master Calendar, the number is “42”
screenshot
Here on the Benton Museum Calendar, the number is “99”

Embed an Upcoming List

Use this shortcode but replace the ‘cal’ number with that of your own calendar. You can the maximum amount of events that appear by changing the number next to ‘limit‘.

[uc_cal view="upcoming" cal="42" limit="10"]

Embed a Month View

Copy and paste the code below into your page and replace the cal number “42” for your calendar’s number. As an example, take a look at the current month of Aurora Training Calendar.

[uc_cal view="month" cal="42" limit="10"]

Multiple Calendars

You can show events from multiple calendars by entering a comma separated list of calendars’ numbers.

[uc_cal view="month" cal="141, 42" limit="10"]

Limitations

You can only have one calendar shortcode on a page. Any additional shortcodes you add will be ignored by the system.

Link to the Current Month of Your Calendar

To link to the current month, week or day of your calendar, you should follow the format below.

http://events.uconn.edu/current/[month|week|day]/[Calendar Number].

For example, http://events.uconn.edu/current/month/42 takes you to the current month view of the UConn Master Calendar.

UC People

UC People is a plugin developed by the UITS Web & Mobile Services team. It registers a custom post type of People that appears in the left navigation of the WordPress dashboard.

In combination with new page templates available to Cornerstone-based themes, this plugin provides an easy way to organize and display people.

UC People is available to sites using Cornerstone-based themes, namely Sherman and Hale 2015.

Examples:

http://polisci.uconn.edu/people/faculty/

http://dpp.uconn.edu/faculty-research/faculty-staff/faculty/

http://provost.uconn.edu/our-team/

http://president.uconn.edu/home/our-team/

http://envpolicy.uconn.edu/directory/

http://cap.uconn.edu/staff/

Creating People

To create a person, on the left side navigation on your dashboard go to People > New Person. All fields other than the person's name are optional.

If you used the University User Profiles plugin previously, we have a guide on how to migrate from UUP to UC People. If you have a number of people entered as users, you can also perform a one-time import of users to UC People.

Groups and Tags

People can be organized in two ways, with groups and tags.  These can be managed in the dashboard by selecting 'People' and then choosing either the 'Groups' or 'Tags' options.

Groups

Groups act much like post categories, and can be nested hierarchically. For example, a group might be "Faculty" with nested subgroups of "Adjunct" and "Associate". Groups are useful when creating a page of people, as one feature there is to show people separated by their group assignments.

Tags

Tags are just like the tags used by blog posts. They can also be used to organize people, but do not have the option of being hierarchically nested. For example, a single person might be tagged with "Molecular Modeling", "Nanotechnology", and "Polymers". Later, it would then be possible to display all people in the site with the tag "Polymers".

Creating a “People Page”

One of the features of UC People is a new page template that becomes available. This page template has a lot of great tools to help filter and sort which people you want to display.

To begin, start by creating a new page. On the right, in a box labeled 'Page Attributes', set the 'Template' option to "People". You will notice that below the normal visual editor area for content, there will be a number of new form controls in a box labeled 'People Page'.

Layout

This controls the layout of how the people will be displayed. The Grid option makes a grid of people, with multiple people for each row. This is a great option if you have a lot of images, and want to focus on those.

The Table option has only one person per row, but has a lot more room for details like phone number or email address. This is a great option if you have no images, or want to focus the page more on being a resource to contact people.

Specific People

By default, a people page displays all people in the site. You can see them listed in the left column of this section. However, if you only want to display the information of a few people, you can click on those people in the left column, and they will appear in the right column. Then, the page will only display the people in the right column.

This collection of people can then be further filtered down by the Specific Groups and Specific Tags options.

To return a page to displaying all people, delete all the people in the right column.

Specific Groups & Tags

Choose one or more groups, and only people that belong to the selected group OR any other selected group will appear. This allows you to create one people page for faculty, and another for staff, for example.

Choose one or more tags, and only people that belong to the selected tag OR to any of the other selected tags will appear. This allows you to create a people page of only the people tagged with "Chemistry" for example.

If both Specific Groups and Specific Tags are in use, only people that belong to one of the groups AND have one of the specific tags will appear.

Break Into Groups

When selected, this option will display people broken out into groups ordered alphabetically on the group name. For instance, you could select "Chemistry" as the tag, enable this option, and then the people page would display a list for "Adjunct Faculty", and another for "Associate Faculty".

Information to Display

On each People page, you can choose just how much information you wish to display. Any fields left unchecked will simply be left out. Note: In order to display properly, the person's image should be at least 335px wide.

Viewing a Single Person

Once a person has been published, they are available to be linked to through menus, manual links, or a People Page.

In the Menus section, you will see a new box appear along site pages called 'People'. You will need to select this box, but can then add people into navigation menus the same way you would pages.

Ordering People

By default, people will be ordered alphabetically by first name.

This default ordering can be manipulated by altering the Order attribute of each person.

Order of a person
The Order Attribute

For example, if Abdul, Bogdan, and Carol are all set at order 0, they appear in alphabetical order by last name.

  • Carol Gordon
  • Abdul Kazeem
  • Bogdan Stanek

What's really happening behind the scenes though, is more like this:

  1. Order=0
    1. Carol Gordon
    2. Abdul Kazeem
    3. Bogdan Stanek
  2. Order=1
    1. None.

So, if Bogdan's order number changes to "1", then first the list will display all of the 0's, and then all of the 1's, each in alphabetical order.

  1. Carol Gordon [0]
  2. Abdul Kazeem [0]
  3. Bogdan Stanek [1]

If we then change Abdul to a "1", we'll get this...

  1. Carol Gordon [0]
  2. Abdul Kazeem [1]
  3. Bogdan Stanek [1]

Using this field, it's possible to alter the default ordering of people in lists.

It is important to note that altering the order for a person will effect the order in which they are displayed in any list. If you're using more than one People page, this might be an issue.

Widgets & Sidebars

WordPress widgets add content and features to your sidebars. Examples are the default widgets that come with WordPress for post categories, tag clouds, navigation, search, etc. Plugins will often add their own widgets.

Sidebars

You can create a sidebar by going to Appearance > Manage Sidebars. Under Add New Sidebar, type a name for your sidebar and click 'Add'.

Once a sidebar has been created, add widgets to it by going to Appearance > Widgets. You will see available widgets on the left side of the page and sidebars on the right. Simply drag and drop a widget onto the sidebar in which you want it to appear. Note that the Default sidebar automatically appears with Archives, Search Results, and when viewing single posts.

To get a sidebar you've created to appear on a specific page, go to edit the page. On the right side there will be a box titled 'Page Settings', under which you can choose to display one of your sidebars. There is also a checkbox to apply this same sidebar to all child pages. If you want to apply the same sidebar to an entire section of a site, this option will be useful.

Template Support

Most pages support this feature.

Theme May Assign Sidebar Uses Default Sidebar
Sherman, Hale 2015 Default Page,
A-Z Index,
Blank,
Blog,
Homepage,
User Profile
Archives,
Search Results,
Posts
Hale & Prudence Default Page,
A-Z Index,
User List,
User Profile,
User Table
Archives,
Default w/Sidebar,
Posts,
Search Results

In-Page Menus

in-page-menus screenshot

This feature allows users to add a menu to a page. On the edit screen for any given page you will see a menu on the right entitled 'In-Page Menus'. Simply choose which menu you would like to have displayed and choose a style (Tabs on top of the page or List on the right). In page menus do not support nested menu items; they are only one level deep. Note that you can also have a menu displayed on the side of the page by adding a sidebar to it and configuring the sidebar to display the specific menu.

Navigation Options

Cornerstone-based sites have options for different navigation styles. These options are:

  • Dropdowns
  • Multi-level Dropdown
  • Tabs
  • MaxMegaMenu

Support

These menu options are only applicable if you are using one of the following themes:

  • Sherman
  • Hale 2015

Changing Your Navigation Style

On the dashboard go to Appearance > Customize. On the left, there will be an option for Navigation Options. Within that space, you will see a dropdown menu with the options listed.

If you do not see this option, you either are not using a supported theme or you have enabled the Max Mega Menu plugin. You will need to disable MaxMegaMenu before other options are available because that plugin overrides all other options.

Dropdown

This option begins with a simple dropdown for the first to level of navigation, with additional pages being displayed in a left navigation bar. This was the default navigation for all Sherman sites from Summer 2014 – Aug 2015.

Multi-Level Dropdown

This option expands the dropdown menu, and removes the left navigation. Dropdowns will expand to the side forever. We recommend not using this option for navigation that has more than 3 levels of depth, as it can be difficult for users to navigate the options. Large sites should consider using the Tabbed option.

Tabs

In this option, the first two levels of the navigation are exposed in horizontal bars and all other levels are available through dropdown menus.

Sticky Navigation

When set to be On, the top navigation will always sticks to the top of the screen as visitors scroll down pages.

Breadcrumbs

Breadcrumbs are based off of Parent/Child page heirarchy. When set to be On, breadcrumbs navigation will show up on child(ren) pages. For more information view our breadcrumb guide.

Private Pages

Private options

To make a single page private in an otherwise public site, simply edit the Visibility attribute of the page, located within the Publish block on the top right when editing a page.

Making a page private will:

  • Remove the page from the Navigation
  • Remove the page from any WordPress Menus
  • Remove the page from your site’s A-Z Template
  • Require a NetID SSO Login before viewing

Having a private page will limit the access to that page. However, any images, documents, or other media on the page will not be private. It is possible for users to access the links of those items directly, with no login required. This feature is appropriate for sites that wish to limit access to certain content, but do not require things to be secure in a more rigorous sense.

Keep in mind that these pages do not meet legal standards for security.

 

Linking to Private Pages

Private pages are removed from all navigation and menus. If you wish to link to them somewhere on your site, you will need to either create links to these pages manually with copy and paste or create a page having the List Private Pages template.

List Private Pages Template

This template displays all the private child pages of the current page.

One way to use this template effectively:

  1. Create a new page; you can call it “My Private Pages”
  2. On the right under Page Attributes, change ‘Template‘ to ‘List Private Pages
  3. Now go to Pages > All Pages
  4. Select a number of pages you wish to be made private
  5. Use the Bulk Actions menu item, edit the pages and change ‘Parent‘ to ‘My Private Pages
  6. Go to Pages and then to the page “My Private Pages”
  7. Select View Page, and then copy the web address from the browser
  8. Log back into the dashboard, and go to Appearance > Menus
  9. Select the ‘Footer‘ menu
  10. Add a Custom Link to your menu
  11. Paste the URL to “My Private Pages” into the field, and name it “Intranet” or “Staff Only”
  12. Save the menu

Now, you’ll have a small intranet section of your larger site, conveniently linked in the footer of every page.

A-Z Index Template

This page template will automatically generate a list of all pages from your Aurora site and list them in alphabetical order.

To assign a page the A-Z index template, locate the menu on the right side of the editing screen entitled ‘Page Attributes.’ Under ‘Template‘, select ‘A-Z Index‘.

page attributes screenshot
Find the Page Attributes box on the right and click the Template menu.
Screenshot
Then, select ‘A-Z Index’.

For a working example, view the Aurora site’s A-Z Index.

Excluding Pages

By default, the A-Z Index will display every single published page in the site, but it is possible to override that behavior and specify a few pages to leave out.

To do this, first you must find the ID number of the page you wish to exclude. Edit the page in question, and look at the URL bar in your browser. You’ll see a number there that looks like this:

screenshot
In this example, the ID number is 1799

Next, you’ll edit the A-Z Index page. If you scroll down, you’ll see a box labeled custom fields.

If you don’t see this box, you’ll want to go to the ‘Screen Options’ tab at the very top right of the page and click the checkbox next to Custom Fields, and then scroll down once more.

In the Custom Fields box, add a new custom field called exclude, and add the number of the page to exclude. When adding multiple pages, use a comma to separate the ID numbers.

screenshot

Save the changes to the page, and you’re done!