Communications Resources - Web
Home | Editorial | Events | Social Media | Story Submissions | Visual Assets | Web
OVERVIEW
Most department and program websites run on the WordPress platform. Below is a comprehensive guide to maintaining your Wordpress website as well as the features and tools that may be included in it. If you need clarification on anything listed below or need access to WordPress, please reach out to April Evans . If you need technical assistance, please submit a ticket to Digital Strategies.
Please see our WordPress 101 info session for an overview of WordPress and its applications.
Navigate to:
WORDPRESS MANAGEMENT
Dashboard
The dashboard is the control panel for your entire website; it is the first page you will see when logging into Wordpress. The dashboard gives an overview of recent activity as well as your published posts and pages. You can create and manage the content for your site here. The main navigation menu in Wordpress is located on the left side of the screen and is static on every admin/editor page. There is a shortcut toolbar located at the top of the screen which allows you to quickly add a post, page, media, table, or page link. Below is a breakdown of the menu options you’ll see in the navigation panel.
Posts
Local posts are created within your website. They are used for spotlight stories and to manually add events or news stories to your site. A feed populates on a page by adding a short code which includes the designated tag. Tagging each post will ensure that it appears in the appropriate feed and on the right page. The short codes will be set up prior to the site launch, so you will not need to modify these yourself. To learn more about adding media to your post content, see the Images section below.
To create a new post: add a title, create the content, add a tag, select an image, preview the post, then publish.
Underneath the tag field shown above, you will see an option to assign a featured image to the post. This image will be the thumbnail that appears next to your post in the feed; it will not appear in the post itself. See the Images section below for optimal photo size and instructions on inserting images into the context of a post or page.
Once you’ve added the content to a post and set a featured image, you may preview it prior to publishing. This is strongly encouraged to verify that the layout of the post is formatted correctly. In order to control what content appears on the site, the comments should never be enabled on any post.
Pages
Pages are how we organize all of the content within a site. You may have text, images, tables, feeds, or a combination of any on each page. When creating a new page, always select the AS Headline Image template under Page Attributes. This template is required for all pages created within your site. Due to the format of this page template, you will need to assign a featured image to each page (see the Images section below for specs). Each navigational section in the top-level menu uses the same featured image for all pages within that menu item. For example, all of the pages within the Undergraduate menu item (Major/Minor, Courses, Honors Program, Aid/Awards, Immersion, Career Outcomes) use the same banner photo. All current banner photos are located in your media library, so please follow this style when creating a new page.
Once you’ve added content to a page and set a featured image, you may preview it (top right corner) prior to publishing. This is strongly encouraged to verify the layout is formatted properly.
If your new page needs to live somewhere within the top navigation menu of your site, please reach out to April Evans for assistance.
Images
To upload images to your website’s library, click the Media tab in the main menu. Here you will see options to add or edit media. Be sure to add alt text and descriptions to each photo on your site for accessibility reasons. These options are available when you upload a photo to the media library or when you insert an image into a page.
Note: Alt text gives a short, condensed description, while image descriptions are full sentences providing more specific detail. These are for SEO and accessibility purposes only and will not display on the site. If you would like a caption to appear under the photo, there is an optional caption field.
Image size guidelines:
- Thumbnails (featured image for local posts): 165 x 300 px
- Headline images (featured image for pages): 1287 x 400 px, minimum of 1200 px wide
- Photos within the context of a page or post: 300 kb or higher and may vary in size
After inserting an image into a page or post, click on it to reveal text wrap options. Ideally, text will accompany the image. You may resize the image after inserting it and the text wrap will adjust itself automatically.
Tutorials for using images in Wordpress:
- Resizing Images using Pixlr.com
- Inserting an image into a page or post
- Embedding videos into a page or post
Toolbar
When adding content to your posts or pages, you will use the toolbar. Below is a reference of functions. Make sure you are working in the Visual tab while editing (see below). The Text tab is for HTML.
- Add media
- Font/Headline style
- Bold
- Italic
- Unordered list (bullet points)
- Ordered list (numerical)
- Blockquote (displaying quoted text)
- Align left
- Align center
- Align right
- Insert/edit/remove link
- Insert more tag
- Toolbar toggle (enables the second row of editing icons)
- Add a table (only available on sites that have this function activated)
- Strikethrough
- Horizontal line
- Change font color
- Paste as text
- Clear formatting
- Insert special character
- Outdent – move text further left
- Indent – move text further right
- Undo your last action
- Redo your last action
- Display keyboard shortcuts
Adding Events
Once you have confirmed your event details, add it to the VU events calendar. You will assign a tag to your event. This tag will be used on the events page of your website in the form of a short code, which will automatically pull events onto the page in chronological order as a feed. For this reason, it's important to use the correct event tag for your department. The image uploaded on this screen will be the thumbnail for your event in the feed.
Creating Tables
Tablepress is a plugin that may already be installed in your website upon launching. If there are tables on any of the pages in your website, you can edit them as needed. You may add tables to pages that have lists of information that need to be organized. The tutorials below will guide you in doing so:
Accordions
Accordions, which allow you to expand/collapse content, can be a useful tool for organizing a lot of text on a page. If you do not already have access to the accordion tool, you will need to submit a ticket to Digital Strategies with your VUNet ID and request access. Once you are inside the tool, you can create new accordions and edit existing accordions that have already been published. Please reference the tutorials below for a quick overview of how the accordions tool works. Keep in mind that once you publish and edit an accordion in the tool, it will automatically update in realtime on your website. If there are accordions on your website that you did not create but need to edit, you may request access to them by submitting a ticket to Digital Strategies with your VUNet ID and the accordion ID number.
Managing People on your Pages
People Manager is the university's database that automatically feeds profiles to Vanderbilt websites. We strongly recommend using it on your site to list faculty, postdocs, and graduate students because it greatly reduces the amount of manual work you'll need to do. If you do not already have an existing People Manager account, you will need to submit a ticket to Digital Strategies to open one. Provide them with your department and the VUNet ID for all admins who will need access to the tool, and they will set it up for you. They will also provide you with a link to an Omni site where you will upload the respective images or files for your People Manager profiles. Once you have access to both of these sites, follow the steps in this this tutorial to set up your individual profiles. Once the profiles are set up, they will automatically appear on your site. If you need to edit a profile, you will do it in the People Manager database and it will automatically populate on your site.
Style and Page Structure
Providing structure to your information is essential for a good user experience on your site. In keeping with the established web theme created by Vanderbilt Marketing and Communications, the College of Arts and Science has set a template for how headers should be used on our web pages. These header recommendations help to establish a hierchy of information and provide consistency across the hundreds of pages on A&S sites.
Sections: to establish multiple sections within a webpage, use Header 2 for each section.
Header 2 Style
Sub-sections: for sub-sections within a section, use Header 3.
Header 3 Style
Example:
Sub-sections to be used on selected pages: use Header 4 only on the Undergraduate Career Outcomes page and Graduate Placements page, in combination with headers 2, 3, and 4.
Header 4 Style
Combination of Headers Example (to be used on Career Outcomes and Graduate Placements pages only):
Lists: when creating a list on your webpage, please use the bullet element in the toolbar.
- Do not manually insert dashes, indents, or tabs.
- The VU web theme will automatically generate the graphic bullet for your list.
Key Visual Principles: When bringing all of your visual elements together on a page, it's important to consider the following principles:
- White space. It is tempting to try to use all available space to place text or other elements. Fight this urge. Allowing your design to "breath" with appropriate amounts of white space between elements will make it easier for the visitor to view, read, and understand your content. Ultimately, this will help you more effectively connect with your audience.
- Contrast. Make sure there is enough contrast between your text and the background. Using a bold graphic, color, or photo behind your text can make it harder to read.
- Simplicity. When in doubt, remove. Distill your content down to the most essential elements. Cut text. Reduce the number of photos. Use graphics that are simple and clean.
Disabling Comments
WordPress automatically comes with a comments feature. Most A&S sites have no need for this feature so it is usually best to disable them. There is not a master button that turns off all comments, so there are a few steps needed to disable comments.
Writing for the Web
The copy on your site is a key part of the website experience. Keep in mind that writing for the web is very different from other types of informational writing. Only 16% of webpage visitors read copy word-for-word1. Instead, people usually skim pages to find specific information. If you want people to have a positive experience with your site, you will want to write your copy accordingly. To help you do that, here are some key tips and best practices.
Think like a business.
- While Vanderbilt is a nonprofit, we still compete with other universities for students, faculty, and funding. Your website is a marketing tool to help you accomplish your goals effectively.
- Businesses focus on "converting" people (turning them into customers) with copy. Will your copy "convert" prospective students to applicants, alumni to donors, grant managers to funders? Make a clear and compelling case for why people should do what you are asking them to do.
- Make sure key information about your department is easy to find and understand.
Write for your audience.
- Before you write anything, think about who your primary audience is for that specific page and what they need to know. If you have multiple audiences, then clearly identify where each of them should go for information.
- Based on analytics, we know that prospective undergraduates are the primary audience for A&S websites (though we also have many other audiences we aim to reach). They are 16-18 years old, not used to academic writing, and not familiar with academic terminology. They don't know how Vanderbilt is structured or how it operates. New, undeclared students are the same. Content directed at them should be in plain English, free of academic jargon, and easy for a general audience to understand. Keep it short and to-the-point.
- Graduate students and faculty are the key audiences for center and lab/research sites. This audience is comfortable with academic writing and terminology and has a better understanding of how universities operate. Content directed at graduate students and faculty can be more technical but still should be clear and to-the-point.
Make text skimmable.
- Write concisely. Be sure you're giving the reader all the information they need in as few words as possible.
- Use headings to help people find the part of the page that has the information they need.
- Put information in bulleted lists so people can scan it quickly. This also adds white space, which makes text easier to read.
- If you have lists or categories of information with a lot of text in each item, consider using accordions to organize the copy. Visitors can skim the accordion headings to find the item they need, then expand to read more.
Follow information hierarchy.
- Most visitors don't scroll all the way to the bottom of a page. Put the most important or most compelling information at the top of the page.
- Consider using in-page navigation for longer pages with many sections.
Make links useful and accessible.
- If you want visitors to complete a task (e.g., fill out a form or sign up for an event), set the link apart from other copy or use a button to draw attention and encourage action.
- If you are linking to a webpage on a different domain (that is, not on the as.vanderbilt.edu site), set the link to open in a new browser tab. This can be done once you insert the URL and click the gear button (settings).
- Don't link the phrase 'click here' in your web copy. Instead, link to words and phrases that describe the content. For example, use "Visit our Courses Page" instead of "To see our courses, click here."
- When you add links to your copy, test them yourself to make sure they work as intended and that the site you are linking to is updated and functioning.
If you create it, be prepared to update it.
- People expect your website to contain up-to-the-minute information and to be an authoritive source. Don't create a webpage unless you have the intention and resources to maintain it.
- Review your site's most important pages at least once per quarter and the entire site at least once a year. If you become aware of an inaccuracy or change in between, update your site immediately.
- Don't just remove pages—redirect them. You can submit a ticket to Digital Strategies for any page redirects.
1. NN/g Nielsen Norman Group: How Users Read on the Web