WordPress Elements

This page will serve as an example of how to format your content to be in line with the style of su.edu. Notice the use of the red drop cap at the beginning of this first paragraph. You can create this too, by visiting the Formats dropdown in your WordPress editor. Drop caps should only be used on the first letter of the first paragraph.

Start with Heading 2

Each page automatically has a Heading 1 when you name your WordPress page. In order for search engines to read the page correctly, you should use Heading 2 through Heading 6 in a logical hierarchy down the page. Headings act as ways to organize content, and often have text that follow in a paragraph format.

Then Use Heading 3

Then Use Heading 4

Then Use Heading 5

Then Use Heading 6

While you should not overuse headings, they are a easy and practical way to divide content. They’re automatically formatted to fit with the fonts and styles across Shenandoah University’s branding.

When you want body content to stand out, use bold text, but use bolding sparingly. Remember, when everything is bold, nothing is bold. As just demonstrated, italics are another way to add emphasis to content, but again, use italics sparingly.

All Headings, H2-H6 Should Use Capitalized

This will further define them as section headings, and fits in with the consistency of the rest of the site. When the site’s content is consistent, it looks far more professional.

Use Pictures Like This

Photographs are of course a great way to add visual emphasis to your content. Typically you’ll want to align these left or right, though center is sometimes a valid option.

You’ll want to re-size your photos to be reasonable within your page. 500 pixels wide max is a good rule of thumb for landscape photos, 350 pixels wide for portrait. This will make them substantial for desktops, but also scale well on smaller devices.

Run your photo through https://tinypng.com/ to make it a smaller file.

Be sure to include an ALT Tag to make your photo ADA accessible. This should be a few words that describes the photo.

Here’s the code for a button! Just copy this button and paste it on to your page, then change the text and link like it’s a hyperlink.

Here’s how to add a quote to your page:

The OLED program has given me the opportunity to learn about not only myself, but also the world around me. I can now appropriately enjoy and contribute to nature while helping others do the same. This program has given me purpose and the tools to fulfill it and I would encourage anyone to find that purpose as well.”

Katie Spain ’18 | Interdisciplinary Studies in Outdoor Management

Be sure to format the quote attribution as: Name ‘graduation year | Program or title for faculty

Photos in quotes should be thumbnail size or 150×150 px

A testimonial is a type of highlighted and specially formatted content block that allows for the use of quotes from individuals.

Josh Gomke - Senior Web Developer

Columns can be used to create specialized layouts on a WordPress page. Using 1/2 or 1/3 columns is generally all the division your page will need. Any more and you risk losing the user!

Using the 1/2L One Half Last or 1/3L One Third Last shortcode will allow you to close off your use of columns. Be sure to insert a Clear shortcode after your columns so WordPress will differentiate content areas.

Learning About Toggles A

Toggles are another fantastic way to organize content. Toggles can be either opened or closed initially in order to show or hide content. This toggle is left open to allow the user to read this important information.

Learning About Toggles B

A closed toggle hides content from users. It takes an action on their part to open the toggle to read the content. This is not always the best way to present really important information–so use toggles judiciously, and for content that might not be critical to your page.

Learning About Toggles C

Using three or more toggles is the best course of action. This way the user understands that toggles open and close revealing content.

Learning about Tabs 1
Learning About Tabs 2

Tabs are another way to organize content for your user. Tabs create small sections that can be clicked through to reveal more content.

Here you can see the second content area. It is important to note that viewing this section takes an action by your user. Very important content might not be suited for tabs because of this.