Office of Multicultural Affairs & Diversity

Shortcode Examples With Sidebar

Shortcode Examples With Sidebar

Tips and best practices for the new UW wordpress theme

This page provides best practices and recommendations for how to use the new UW WordPress theme on any page. In the sidebar, you’ll find examples of sidebar widgets you can mix and match on your pages. Below, find examples of different shortcodes and other content areas.


Headline Styles

Using Headline styles correctly will make it easier for all your users to scan and find content, and also make your webpage more accessible for people who use screen readers and other adaptive technology. When deciding what headline level to use, it can be helpful to think of the content on your page as if it were outlined in a bulleted list. H1 is the main title of your page. For each level of indent on your bulleted list, you go down one headline level.

Your main page headline is written using H1

Introduce the main subsections of your pages with H2

Any sub-heads within those subsections use H3

Further sub-sections will use H4


Editorial Headline that describes your program

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce eu tempus nulla, in cursus arcu. Duis enim nisl, sodales sed posuere sed, egestas eu ligula. Nullam efficitur arcu et sagittis mollis. Maecenas sit amet dapibus mi. Integer congue mattis ligula, eu posuere odio tempus quis. Aenean eget mollis dolor. Nulla laoreet est a ligula dictum ultricies.

Maecenas finibus sed nunc a varius. In hac habitasse platea dictumst. Phasellus rhoncus eros lectus, quis lobortis ante eleifend et. Curabitur augue augue, aliquet accumsan venenatis sed, porttitor nec orci.

Headline with image

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce eu tempus nulla, in cursus arcu. Duis enim nisl, sodales sed posuere sed, egestas eu ligula. Nullam efficitur arcu et sagittis mollis. Maecenas sit amet dapibus mi. Integer congue mattis ligula, eu posuere odio tempus quis. Aenean eget mollis dolor. Nulla laoreet est a ligula dictum ultricies.

Primary Call to Action

Subhead for secondary content

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce eu tempus nulla, in cursus arcu. Duis enim nisl, sodales sed posuere sed, egestas eu ligula. Nullam efficitur arcu et sagittis mollis. Maecenas sit amet dapibus mi. Integer congue mattis ligula, eu posuere odio tempus quis. Aenean eget mollis dolor. Nulla laoreet est a ligula dictum ultricies.

Secondary Call to Action

Subhead for tertiary content

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce eu tempus nulla, in cursus arcu. Duis enim nisl, sodales sed posuere sed, egestas eu ligula. Nullam efficitur arcu et sagittis mollis. Maecenas sit amet dapibus mi. Integer congue mattis ligula, eu posuere odio tempus quis. Aenean eget mollis dolor. Nulla laoreet est a ligula dictum ultricies.


Card Styles

The new theme has a wide variety of card styles to chose from to help you organize and feature content. You have a lot of options for color, size, using an image or icons. Cards are best used to feature or promote important content, or to help users scan a set of related content (for example – if you offer three main programs, you can introduce them using three matching cards).

Featured Content Option

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce eu tempus nulla, in cursus arcu. Duis enim nisl, sodales sed posuere sed, egestas eu ligula.

Featured Content No Image

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce eu tempus nulla, in cursus arcu. Duis enim nisl, sodales sed posuere sed, egestas eu ligula.

Call to Action

Subtitle

Multi Featured Content

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce eu tempus nulla, in cursus arcu. Duis enim nisl, sodales sed posuere sed, egestas eu ligula.

Call to Action

Subtitle

Multi Featured Content

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce eu tempus nulla, in cursus arcu. Duis enim nisl, sodales sed posuere sed, egestas eu ligula.

Call to Action

Featured Content Option

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce eu tempus nulla, in cursus arcu. Duis enim nisl, sodales sed posuere sed, egestas eu ligula.

Call to Action

alt_text_goes_here

title_goes_here

Something goes here…

button_text_goes_here

alt_text_goes_here

title_goes_here

Something goes here…

button_text_goes_here

Jumbotron title

This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.

Button text


Testimonial or quote

Use the “blockquote” shortcode to feature quotes or testimonials on your page.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce eu tempus nulla, in cursus arcu.

Dubs HuskyOfficial Live Mascot

Organizing a lot of content

Tabbed sections, accordions and modal windows are great tools for organizing a large volume of content. Choose horizontal tabs if you have just a few categories, and vertical tabs if you have a lot of categories, or long category names.

You can include text, images, links, and many kinds of content within the sections of tabs and accordions, or in modal windows.

Tabs

tabs name
Maecenas finibus sed nunc a varius. In hac habitasse platea dictumst. Phasellus rhoncus eros lectus, quis lobortis ante eleifend et. Curabitur augue augue, aliquet accumsan venenatis sed, porttitor nec orci. Fusce non ligula sit amet ipsum auctor interdum sed et nibh. Aenean lobortis, enim vel gravida cursus, nunc odio lacinia nunc, ut lobortis ante est sit amet nulla.
Etiam velit massa, euismod non pellentesque lacinia, convallis a mauris. Aenean elementum varius massa, vitae consequat libero aliquam id. Integer fermentum nunc auctor purus vulputate, at fermentum urna pellentesque. In in ex eget quam aliquet pretium. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut convallis elit lacus, eget dictum purus hendrerit eu. Nam nec rhoncus est. Sed eget quam interdum, pharetra nisi a, pulvinar turpis. Mauris molestie finibus ante at suscipit. In eu iaculis felis, vitae pellentesque arcu. Sed lacinia, tortor id feugiat finibus, mi dui aliquam quam, ac bibendum arcu massa accumsan velit. Pellentesque dictum rhoncus ultricies.
Maecenas finibus sed nunc a varius. In hac habitasse platea dictumst. Phasellus rhoncus eros lectus, quis lobortis ante eleifend et. Curabitur augue augue, aliquet accumsan venenatis sed, porttitor nec orci. Fusce non ligula sit amet ipsum auctor interdum sed et nibh. Aenean lobortis, enim vel gravida cursus, nunc odio lacinia nunc, ut lobortis ante est sit amet nulla.
tabs name
Etiam velit massa, euismod non pellentesque lacinia, convallis a mauris. Aenean elementum varius massa, vitae consequat libero aliquam id. Integer fermentum nunc auctor purus vulputate, at fermentum urna pellentesque. In in ex eget quam aliquet pretium. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut convallis elit lacus, eget dictum purus hendrerit eu. Nam nec rhoncus est. Sed eget quam interdum, pharetra nisi a, pulvinar turpis. Mauris molestie finibus ante at suscipit. In eu iaculis felis, vitae pellentesque arcu. Sed lacinia, tortor id feugiat finibus, mi dui aliquam quam, ac bibendum arcu massa accumsan velit. Pellentesque dictum rhoncus ultricies.
Praesent suscipit lacus eget felis dignissim vehicula. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum viverra vehicula maximus. Phasellus et ipsum id mauris porttitor aliquet. Integer ac fringilla enim. Aliquam vel placerat nisl, et cursus lectus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit

Accordions

Accessible Accordion

Etiam velit massa, euismod non pellentesque lacinia, convallis a mauris. Aenean elementum varius massa, vitae consequat libero aliquam id. Integer fermentum nunc auctor purus vulputate, at fermentum urna pellentesque. In in ex eget quam aliquet pretium. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut convallis elit lacus,

Etiam velit massa, euismod non pellentesque lacinia, convallis a mauris. Aenean elementum varius massa, vitae consequat libero aliquam id. Integer fermentum nunc auctor purus vulputate, at fermentum urna pellentesque. In in ex eget quam aliquet pretium. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut convallis elit lacus,

Etiam velit massa, euismod non pellentesque lacinia, convallis a mauris. Aenean elementum varius massa, vitae consequat libero aliquam id. Integer fermentum nunc auctor purus vulputate, at fermentum urna pellentesque. In in ex eget quam aliquet pretium. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut convallis elit lacus,

Modal Windows

Modals are another great way to organize a large volume of content that is useful to the user, but not essential that they see on the first scan of a page. Stories, biographies, and deeper content are great in modals. Modal windows can contain many types of content, including images, embedded videos and text.