Skip to content

2015 Web Template

The 2015 web template and WordPress theme based on the template are available for download from the Communications & Marketing website.

We encourage all campus web developers, web designers, and web content managers to sign up for the UTWEBDEV listserv. We’ll use it to disseminate information regarding web template and WordPress theme updates, developer roundtables, training sessions, design advice, tips, tricks, trends, and to host conversations/questions about university websites as well as other subjects of general interest to online communicators.

Shortcode Glossary

At times, you need to do a little arranging within the content area of your site. Unfortunately, WordPress does not allow HTML editing within the content pane in a reliable way. That is why we have added shortcodes to the UT WordPress Theme.

Shortcodes are little snippets of text that will allow you to add formatting to your content. Some of the shortcodes have ‘openings’ and ‘closings’ and other shortcodes stand alone. A few shortcodes have attributes that will allow certain customization of the shortcodes themselves. This post will define each of our built-in shortcodes, and give examples.

Lede-ing with style.

Example:

You can have a lede that is a wee bit different from the text that follows. It can be kinda nice, I suppose if you need it. Lor separat existentie es un myth. Por scientie, musica, sport etc, li tot Europa usa li sam vocabularium.

Shortcode:

[lead] You can have a lede that is a wee bit different from the text that follows. It can be kinda nice, I suppose if you need it. Lor separat existentie es un myth. Por scientie, musica, sport etc, li tot Europa usa li sam vocabularium. [/lead]

Accordion folds

Example:

Collapse stuff in the first accordion fold.
Collapse stuff in the first accordion fold.
Collapse stuff in the first accordion fold.

Shortcode:

[collapsibles]
[collapse title="Collapse 1" active="true"]
Collapse stuff in the first accordion fold.
[/collapse]
[collapse title="Collapse 2"]
Collapse stuff in the first accordion fold.
[/collapse]
[collapse title="Collapse 3"]
Collapse stuff in the first accordion fold.
[/collapse]
[/collapsibles]

Note: The “title” attribute on the [collapse] shortcode is what defines the ‘clickable words’.

Note: Accordion folds hide content. Be aware that content within them may missed by a casual viewer. They are best used in cases where the content is long and a user needs to choose the one piece of information that is relevant to them.

Note: Adding the attribute “active” to the [collapse] shortcode and setting it to “true” will cause that particular fold to be open on page load. This is optional. Leaving off the “active” attribute will cause them to all be closed.


Highlight boxes

Example:

Li uropan lingues es membres del sam familie. Lor separat existentie es un myth. Por scientie, musica, sport etc, li tot Europa usa li sam vocabularium.

Shortcode:

[highlight]
Li uropan lingues es membres del sam familie. Lor separat existentie es un myth. Por scientie, musica, sport etc, li tot Europa usa li sam vocabularium.
[/highlight]

New feature: You can have a box in any branding color you like. Simply add the color attribute with a brand color.

Example:

Li Europan lingues es membres del sam familie. Lor separat existentie es un myth. Por scientie, musica, sport etc, li tot Europa usa li sam vocabularium.

Shortcode:

[highlight color="orange"]
Li uropan lingues es membres del sam familie. Lor separat existentie es un myth. Por scientie, musica, sport etc, li tot Europa usa li sam vocabularium.
[/highlight]

Tabs in the content

Example:

Here is the first tab.

Li Europan lingues es membres del sam familie. Lor separat existentie es un myth. Por scientie, musica, sport etc, li tot Europa usa li sam vocabularium. Li lingues differe solmen in li grammatica,

Here is the second tab.

Li Europan lingues es membres del sam familie. Lor separat existentie es un myth. Por scientie, musica, sport etc, li tot Europa usa li sam vocabularium. Li lingues differe solmen in li grammatica,

Shortcode:

[tabs]
[tab title="Tab 1"]

Here is the first tab.

Li Europan lingues es membres del sam familie. Lor separat existentie es un myth. Por scientie, musica, sport etc, li tot Europa usa li sam vocabularium. Li lingues differe solmen in li grammatica,

[/tab]
[tab title="Tab 2"]

Here is the second tab.

Li Europan lingues es membres del sam familie. Lor separat existentie es un myth. Por scientie, musica, sport etc, li tot Europa usa li sam vocabularium. Li lingues differe solmen in li grammatica,

[/tab]
[/tabs]

Note: The “title” attribute on the [tab] shortcode is what defines the ‘clickable words’.

Note: Like accordion folds, Tabs hide content. Be aware that content within them may missed by a casual viewer. They are best used in cases where the content is long and a user needs to choose the one piece of information that is relevant to them.


Columns in the content

Example:

Li Europan lingues es membres del sam familie. Lor separat existentie es un myth. Por scientie, musica, sport etc, li tot Europa usa li sam vocabularium. Li lingues differe solmen in li grammatica,
Li Europan lingues es membres del sam familie. Lor separat existentie es un myth. Por scientie, musica, sport etc, li tot Europa usa li sam vocabularium. Li lingues differe solmen in li grammatica,


Shortcode:

[half]
Li Europan lingues es membres del sam familie. Lor separat existentie es un myth. Por scientie, musica, sport etc, li tot Europa usa li sam vocabularium. Li lingues differe solmen in li grammatica,
[/half]
[half]
Li Europan lingues es membres del sam familie. Lor separat existentie es un myth. Por scientie, musica, sport etc, li tot Europa usa li sam vocabularium. Li lingues differe solmen in li grammatica,
[/half]
[clear]

Note: Make sure you end all rows of columns with the [clear] shortcode. This will help prevent alignments going haywire.


Columns in threes

Example:

Shortcode:

[onethird]
Li Europan lingues es membres del sam familie. Lor separat existentie es un myth. Por scientie, musica, sport etc, li tot Europa usa li sam vocabularium. Li lingues differe solmen in li grammatica,
[/onethird]
[onethird]
Li Europan lingues es membres del sam familie. Lor separat existentie es un myth. Por scientie, musica, sport etc, li tot Europa usa li sam vocabularium. Li lingues differe solmen in li grammatica,
[/onethird]
[onethird]
Li Europan lingues es membres del sam familie. Lor separat existentie es un myth. Por scientie, musica, sport etc, li tot Europa usa li sam vocabularium. Li lingues differe solmen in li grammatica,
[/onethird]
[clear]

Note: Make sure you end all rows of columns with the [clear] shortcode. This will help prevent alignments going haywire.


Columns in fours

Example:

Li Europan lingues es membres del sam familie. Lor separat existentie es un myth. Por scientie, musica, sport etc, li tot Europa usa li sam vocabularium. Li lingues differe solmen in li grammatica,
Li Europan lingues es membres del sam familie. Lor separat existentie es un myth. Por scientie, musica, sport etc, li tot Europa usa li sam vocabularium. Li lingues differe solmen in li grammatica,
Li Europan lingues es membres del sam familie. Lor separat existentie es un myth. Por scientie, musica, sport etc, li tot Europa usa li sam vocabularium. Li lingues differe solmen in li grammatica,
Li Europan lingues es membres del sam familie. Lor separat existentie es un myth. Por scientie, musica, sport etc, li tot Europa usa li sam vocabularium. Li lingues differe solmen in li grammatica,

Shortcode:

[onefourth]
Li Europan lingues es membres del sam familie. Lor separat existentie es un myth. Por scientie, musica, sport etc, li tot Europa usa li sam vocabularium. Li lingues differe solmen in li grammatica,
[/onefourth]
[onefourth]
Li Europan lingues es membres del sam familie. Lor separat existentie es un myth. Por scientie, musica, sport etc, li tot Europa usa li sam vocabularium. Li lingues differe solmen in li grammatica,
[/onefourth]
[onefourth]
Li Europan lingues es membres del sam familie. Lor separat existentie es un myth. Por scientie, musica, sport etc, li tot Europa usa li sam vocabularium. Li lingues differe solmen in li grammatica,
[/onefourth]
[onefourth]
Li Europan lingues es membres del sam familie. Lor separat existentie es un myth. Por scientie, musica, sport etc, li tot Europa usa li sam vocabularium. Li lingues differe solmen in li grammatica,
[/onefourth][clear]

Note: Make sure you end all rows of columns with the [clear] shortcode. This will help prevent alignments going haywire.

Menus in the 2015 UT WordPress Theme

If you’ve been using the 2012 UT WordPress Theme, you will likely find that menus in the 2015 UT WordPress Theme are by far the biggest change in how your site will be structured.

The menus are best thought of as “sections” of your site. And all of the pages of a section should go in that menu.

For example, if you have a site with pages about the creatures and places in the Land of Oz, you may have menu called places and a menu called creatures. In the places menu, you would add “Deadly Poppy Field,” “The Dainty China Country,” “Munchkin Country,” and “Emerald City.” In the creatures menu you would put “Winged Monkeys,” “Munchkins,” “Kalidahs,” “Scarecrows,” and “Squished Witches.”

The tricky part to understand is that you’re naming the menus (or sections) “Places” and “Creatures.” That doesn’t necessarily mean there is a page called “Places” or “Creatures.”

You can have up to twelve menus (sections) on your site.

Note: This document covers using the 2015 UT WordPress Theme, and covers only elements that are specific to the UT Theme. But if you need instructions on how to build menus, consult the WordPress Documentation on menu use.

Assigning Menus and Placement

Screen Shot 2015-06-05 at 3.01.22 PM

Once you have created all the menus (sections of your site) you will need to assign them to locations. In the location tab, assign them in order, beginning at the top. The menu names will now appear in the navigation rail of your site.

Note: This covers the main navigation of your site. You can still have menus unassigned and place them in a sidebar via the Menu Widget.

Menus Options

There are three modes of navigation in the UT Theme. *Flyout*, *Sideways Dropdown* and *Single Menu*. All of them are set in the WordPress Control panel in Appearance > Theme Options.

Single menu is best for small sites with no page hierarchy. Single menu lists only top level pages and forgoes any sub navigation. Set your site to Single menu by switching to Single in Menu Options.

Sideways Dropdown and Flyout are both styles of of the Multiple menu option. Set your site’s menu option to “Multiple” then choose the navigation style of your liking.

Sideways Dropdown is recommended for most sites, as it is easy for a user to understand and will seem familiar.

The Flyout Menu is recommended for sites having many layers of pages. If you have multiple menu that go three children or more deep, Flyout may be best for you.

Home Button

Having a home button on your menu is optional. If you would like to have a link to your home page in your menu, add it by checking the “Put a home button in the menu” item in Appearance > Theme Options.

Giving Link

If you are familiar with the 2012 Theme, you can take comfort in knowing the giving link behaves in exactly the same way.

There are three options:

  • Default Giving Link: Adds the words “Give to UT” to your menu with a link to giveto.utk.edu.
  • No Giving Link: Removes the giving link completely.
  • Custom Giving Link: Use your own words and add a link that targets giving to your specific department. In order to do this, you must have a custom link. For inquiries regarding this process or general questions about online giving at UT, please contact the UT Foundation.

2015-16 Web Templates

The university’s web templates were last updated in the spring of 2012, following the launch of the Big Orange. Big Ideas. campaign. Three years later, and following the recent announcement of a new logo for the university’s flagship campus, it is time for another update.

The new templates were presented to the Chancellor’s cabinet on March 16, 2015. Following cabinet approval, the templates were then presented to campus communicators at a public forum on March 26, which was announced on the CAMPCOMM listserv group (campus communicators, graphic designers, and web designers, you can join CAMPCOMM here).

The presentation covered our process for developing the templates, which involved face-to-face interviews with campus communicators, two rounds of usability testing (mobile and desktop), ongoing accessibility testing, “competitor” research, and a mobile-first mindset.

The new templates will be made available for download on June 1, 2015, as HTML/CSS files and as a WordPress theme. Ideally, all campus units will be able to complete migration of existing websites to the new templates by June 2016.

See a note outlining who should use these templates.

GOALS

  • Design templates with users of mobile devices first in mind
  • Improve campus website usability by developing a consistent, clear navigation scheme that works equally well on desktop and mobile
  • Create a clean canvas upon which campus communicators can share their unique messages, while at the same time clearly identifying each unit as a part of the University of Tennessee, Knoxville
  • Develop a flexible, usable template that can accommodate sites of varying sizes (whether a center, department, institute, or college with four pages or 400)
  • Develop a template that is accessible to visitors who use assistive technologies to access the internet
  • Address common, valid concerns about the current templates, especially about required elements taking up too much space at the top of web pages

COMPARISONS

2012 Templates

  • Fixed width (960px)
  • Required: university header with logo, university Google search, and universal “toolbar”
  • Required: unit header image with unit name “written” in Gotham typeface in specific size/weight
  • Required: university footer with Big Orange. Big Ideas. graphic
  • Customizable unit header image background (color/image)
  • Optional, customizable giving bar
  • Optional, customizable expanded footer
  • Lots of graphic textures in the header, expanded footer, and background

2015 Templates

  • Responsive (i.e., mobile friendly)
  • Required: new primary university logo (at top left)
  • Required: unit name (HTML text, no image requirement)
  • Required: unit contact information (appears above the university footer)
  • Required: university footer with Big Orange. Big Ideas. graphic, university Google search, and universal quick links
  • Customizable giving link now included in main menu
  • Customizable site background color and highlight box colors, etc.
  • Mobile-friendly, left-hand primary navigation menu with flyouts allowing for improved usability
  • Content “filter” functionality for database-driven websites
  • Multiple options for presenting content at varying widths, with different layout options for images, sliders, accordion folds, callout quotes, etc.
  • Site content begins 158 pixels higher on desktop
  • Site title appears 142 pixels higher on desktop

SCREENSHOTS: MOBILE

The screenshots provided here show how the site scales down for presentation on a mobile device or tablet with a narrow viewport. The second screenshot shows the menu (with “Find a Page” filter) that is revealed when a visitor interacts with the “Find Page” button. The third screenshot demonstrates the “typeahead” functionality that provides a content filter for the website (available for database-driven websites).

mobile screenshotmobile screenshot with navigation displayedmobile screenshot using find page filter

 

SCREENSHOTS: DESKTOP

For development purposes, we imported content from one of our larger sites, McClung Museum, to test various page layouts and navigational depth. In the screenshots provided here, you will see examples of a landing page, what that same page will look like if a visitor scrolls to the bottom of the page, interior pages, examples of a site using different background colors, and examples of the fully extended navigation panel. These are all screenshots of the desktop view.

We will be posting additional screenshots as development continues and will also link to pilot sites as they are launched starting in May.

template screenshot

template screenshot

template screenshot

template screenshot



template screenshot


template screenshot showing expanded navigation panel


template screenshot showing expanded navigation panel

TRAINING & DEVELOPER ROUNDTABLES

We will post information about template training sessions and developer roundtables as we draw closer to the template launch date of June 1, 2015.

CONTACT

E-mail your questions to webteam@utk.edu. We’ll collect your questions and assemble a list of “frequently asked questions” to post here.


*Who should use these website templates? All academic and administrative units whose reporting structure culminates with the chancellor of the University of Tennessee, Knoxviille.

 

WordPress Shortcodes Training

Let’s talk about dressing up your WordPress website. In this series, we’ll discuss the shortcodes built into the UT WordPress Theme.

If you have any questions about using posts, e-mail webteam@utk.edu.

Video Topic

Video Length

Description

Introduction 2:25 The first video in this series reviews the  functionality and definition of shortcodes.
Highlight Boxes 3:06 Learn how to add highlight boxes to your text or images.
Making Columns 5:16 Format your text or images into neat columns.
Nesting 4:04 Using combinations of the shortcodes.

View all of our WordPress training resources, including Nivo Slider and Basic Training.

WordPress Posts Training

Are you ready to include announcements, news, events on your WordPress website? In order to do this, you need to use the posts functionality.

Watching this video training series will get you ready to create posts. You will then be able to leverage posts to structure menus and widgets.

If you have any questions about using posts, e-mail webteam@utk.edu.

 

Video Topic

Video Length

Description

What is a post? 3:30 The first video in this series reviews the default functionality and appearance of posts on your WordPress website.
Categories and tags 4:29 Categories and tags are essential when using posts. Learn how to add this meta information.
Featured images 4:02 Featured images add visual interest to your posts. This video shows how to add a featured image and covers best practices.
Excerpts 4:04 Excerpts provide an engaging teaser to your post. Learn how to use the excerpt functionality.
Slug and author 3:56 This video reviews the WordPress slug and theme options for post bylines.
Sticky posts 1:56 Use sticky posts to override posts’ chronological order.
QuickEdit 2:49 The bulk QuickEdit feature can save time when editing meta information for multiple posts.
Categories and menu 2:33 When you add meta information to your posts, you can leverage categories and tags in your menu.
Categories, menu, and widgets  8:05 When you add meta information to your posts, you can leverage categories and menus in widgets.

 

View all of our WordPress training resources, including Nivo Slider and Basic Training.

WordPress Basic Training

Do you need help with your WordPress website that uses the UT theme? These tutorial videos are for you!

Throughout this seven part video series, we cover the basics of logging in to your website, the dashboard, pages, menus, sidebars, widgets, and theme options.

Watch the full video series embedded below, or select an individual video to watch in the table below. If you have any other questions, don’t hesitate to e-mail webteam@utk.edu.

 

 

Video Topic

Video Length

Description

Introduction 2:37 Layout and nomenclature of UT WordPress theme.
Dashboard 2:59 Login and navigate the dashboard and backend.
Pages, Part I 6:51 Create a page, add content, add images and PDFs, and hyperlink text.
Pages, Part II 4:36 Add page meta information and publish a page.
Menu 2:32 Add pages and links to your main navigation.
Sidebars & Widgets 8:06 Add widgets to the main sidebar, the link drawer, and the extended footer.
Theme Options 2:07 Theme options to customize color palette, giving bar, and post meta data.

 

View all of our WordPress training resources, including Nivo Slider.

Our New Logo

The university began implementing a new logo on January 1, 2015. The logo is being rolled out across campus, in four phases, between now and June 1.

Read all about the new logo and the implementation process.

Our existing communications resources will remain available through, at least, June 1. You should continue to use these resources until your unit’s approved rollout. Once your unit has been approved to begin using the new logo, you should work with your logo liaison, listed on the logo website, to obtain the approved files.

In order to stay up to date on the progress of rolling out the new logo, be sure you’re subscribed to the CAMPCOMM listserv.

If you have any questions, let us know at creative@utk.edu.

WordPress 4.0

WordPress has announced its release of version 4.0.

The interface in your Media Library will now leverage infinite scrolling and feature other interface tweaks.

The major change is now you can preview embedded media before you publish your post or page. We suggest you review the automatic embeds that WordPress supports to save you time in the future.

You can read and watch videos detailing the new features of WordPress 4.0 at the WordPress blog. Email webteam@utk.edu if you have any questions.

Tennessee Today website redesign launch

tntodayAs you visit tntoday.utk.edu, you will notice major changes.

We launched the redesign of Tennessee Today this morning. Highlights of this redesign include providing an outstanding mobile experience, spotlighting news from our colleges, providing an easy way to sign up for and view past issues of our daily e-newsletter, providing story-to-story navigation and more efficient ways to browse stories of a similar topic, and drawing attention to ongoing campus news.

The redesigned home page still showcases a top headline, but we gave ourselves the opportunity to also feature four secondary top headlines. You can find all the latest stories we publish in the “Latest News” section and search our entire news site.

The home page also features a section with news from our colleges. We recognize that great research, outreach, and philanthropic activity comes from our academic units and the importance of highlighting their efforts is a priority in this redesign. In the website’s footer we also showcase other campus publications and link to pages dedicated to each college’s news stories. We hope that providing direct access to news from around campus will help promote and publicize the great things happening at UT.

In case you miss the daily Tennessee Today e-newsletter, we now provide a way to view past issues of the e-newsletter. On the home page, scroll halfway down the page and look for the heading “Our Newsletter.” From here, use the archives drop down to navigate to previous issues.

The new “News Around Our Campus” section allows us to pull forward stories about ongoing campus topics such as construction, welcome week, faculty appreciation week, and more. We hope this section will help our campus community stay abreast of longterm news.

On individual story pages, you can now navigate to more stories about similar topics, as well as our top headlines and the latest stories we’re publishing.

In the past year, 30 percent of traffic on the Tennessee Today website has been from mobile phone and tablets. The redesign of Tennessee Today leverages responsive web design to provide the best possible experience to our users whether they are viewing our website on their phone, tablet, or desktop computer. Responsive web design means designing a website that is optimized for use on a mobile phone, a tablet, a laptop, a desktop, and even a widescreen television. In alignment with our optimized mobile experience goal, our next step is to use a responsive design approach to revamp the daily Tennessee Today e-newsletter.

We hope you take time to get to know your campus news source and please send any feedback to webteam@utk.edu.

The flagship campus of the University of Tennessee System and partner in the Tennessee Transfer Pathway.