This tutorial by Tierney Steelberg, Digital Liberal Arts Specialist at Grinnell College’s DLAC, is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License.
Table of Contents
Domains & Subdomains
A domain is basically a location on the web showcasing content and applications of the owner’s choosing, hosted on a web server, with a domain name that allows others to visit this location. Grinnell College provides students, faculty and staff members with domains of their very own, by request, through Sites @ Grinnell, in a web hosting partnership with Reclaim Hosting.
Within your domain space you are able to create subdomains spinning off of your main domain, that are able to exist as separate entities – allowing you to create additional websites, explore other applications, and more.
What is cPanel?
At Grinnell, cPanel is the back-end interface for Sites @ Grinnell users. cPanel is a web hosting control panel that allows you to communicate with the Sites @ Grinnell hosting provider (in this case, Reclaim Hosting) and administer the back-end of a domain and all associated subdomains, websites, and files.
Campus community members who have an existing account can log into their cPanel using their College username and password by clicking “cPanel Dashboard” in the top-level menu on the Sites @ Grinnell homepage.
How do I build a subdomain?
Follow these instructions from Reclaim Hosting to create a new subdomain.
You can name your subdomains whatever you want, but for your portfolio websites, we recommend naming the subdomain portfolio so co-leads can find them easily. (So Tierney’s portfolio subdomain would be portfolio.steelberg.sites.grinnell.edu, for example.) If you want to use your portfolio site for more than just Vivero, you could skip the subdomain step and install it at your primary domain (for Tierney, this would be steelberg.sites.grinnell.edu).
When typing out the name for your new subdomain, make sure to type out the rest of your domain name in its entirety, and uncheck the “Share document root” box (unless you want a subdomain you have created to route to your primary domain).
Once the subdomain has been created and before installing content, make sure the “Force HTTPS Redirect” option (available on the Domains page) is turned on, for security purposes. This can only happen once your site security certificate has been issued, which can sometimes take a couple minutes. If needed, you can issue the certificate manually using Let’s Encrypt SSL, under Security on the cPanel homepage.
How do I install the WordPress Vivero Portfolio Template in my subdomain?
We have created a portfolio template for Vivero Fellows, to help you get started with building your personal portfolio websites. You can install WordPress, and this specific template, on a domain or subdomain by following these instructions:
- From within cPanel, click on the WordPress icon under Applications.
- Click the + install this application button in the top right.
- Under Location > Domain, type in and select the HTTPS version of your new portfolio subdomain for installation.
- No need to add anything to the optional directory portion of the URL.
- Under Content, keep the recommended version and choose your language.
- Then select the Vivero Portfolio Template: this will pre-load your site with themes and plug-ins selected for Grinnell College, with template formatting specific to Vivero Fellows.
- Under Settings, run through the installation settings:
- Set up the administrator username and password: choose something you will remember, and make both the username and password strong ones (for example, use your Grinnell username for the admin username, rather than something generic like “admin”).
- List your email address for the administrator email.
- Give the site a title and tagline (these can be changed at any time).
- Under Advanced, keep “Automatically manage advanced settings for me” checked.
- Click the Install button at the bottom of the page.
- Once the application has finished installing, it will be available under “My Apps” in cPanel. In the case of WordPress sites, the site back-end login link (login button at the bottom right of the app – see screenshot below) will log you in automatically with your WordPress admin credentials: click the login button to get started.
WordPress Portfolio Websites
WordPress is a powerful, open-source content management system for building websites.
Site Dashboard
From your back-end site dashboard, you can manage the entirety of your site: create site content, customize and style your site, organize its contents. The Vivero Portfolio Template is intended you help you get started, but this site is yours and you are free to customize it to your heart’s content!
On the left-hand side of your dashboard, you will see a variety of site options. This walkthrough you will teach you how to use some of the most important ones for getting your site up and running.
FYI: Pages vs. Posts
WordPress allows you to create both webpages (Pages) and blog posts (Posts).
From WordPress:
In WordPress, you can put content on your site as either a “post” or a “page”. When you’re writing a regular blog entry, you write a post. Posts, in a default setup, appear in reverse chronological order on your blog’s home page.
In contrast, pages are for non-chronological content: pages like “About” or “Contact” would be common examples. Pages live outside of the normal blog chronology, and are often used to present timeless information about yourself or your site — information that is always relevant. You can use Pages to organize and manage the structure of your website content.
Source: Pages from WordPress Support (click through to learn more about Pages)
How do I create or edit a webpage?
Some pages, including a Project page, have already been set up for you as part of the Vivero Portfolio Template. You can customize, change, rearrange existing content as you see fit!
Here are instructions for creating or editing a webpage:
- Click Pages in the left-hand navigation menu.
- Click Add New if you want to create a new page, or click the title of an existing page if you want to edit it.
- Use the editor of your choice to add or edit page content.
- Currently your portfolio is set up with the Gutenberg Editor, which is the default WordPress editor. This walkthrough will focus on how to use the Gutenberg Editor.
- You can also explore the Elementor page-builder plugin for editing (see the Vivero Elementor guide for more information). It is already installed on your site, if you want to: simply activate the plugin and then click the Elementor button while editing a page to start using it on that page.
- Grinnell College also has a license for the paid Elementor Pro plugin (paid version with additional features): we will happily enable this in your site upon request if you want to play around with increased customization and template options that don’t require in-depth knowledge of HTML.
- Some sites on campus use the Classic editor thanks to a plug-in, which you could enable on your site if you would like by activating the plugin. The Classic Editor is deprecated: while it is currently still available, support for it from WordPress will end at some point.
- Add blocks by clicking the plus button in the top left-hand corner and selecting them from the menu pane on the left side of the page. Review your page content (and move a block around the page using the arrows that appear when you click into one) in the center. Click into a block and customize its styling and settings from the menu on the right: each type of block has different customization options (see screenshot of image options, below).
- Use Image or File blocks to insert images or add links to PDFs on your pages. Click the Upload button to select a file from your computer (which will automatically adds the file to your Media Library).
- For images, make sure to add alt text (an image description) for accessibility once the file has uploaded using the box available in the right-hand settings pane.
- Once you have uploaded things, you can select existing media from your Media Library to upload. All your media lives in your Media Library, so you only have to upload it once but can use it across your site – and your image alt text added here will carry throughout the site as well, so you only have to write it once.
- Using the Embed blocks, you can embed content on your page from elsewhere on the Web – from pretty much any site or resource that provides an embed code (YouTube, SoundCloud, StoryMaps, ArcGIS Online…).
- When you’re ready, click Update or Publish to save and publish your changes – or click Save Draft if you’re not ready for it to be published yet. Don’t forget to save as you go!
How do I manage media?
Your site’s Media Library contains all the media (images, video and audio files, PDFs and other documents) that you have uploaded to your site. From the Media Library, you can easily manage these files, and retrieve them for use across one or multiple pages of your site.
- Click Media in the left-hand navigation menu to access your Media Library.
- To add a new file or multiple new files, click the Add New button, and either select the file(s) from your computer, or drag and drop one or more files to the upload box.
- Once a file has been uploaded, you can edit its title, caption, and description – and, in the case of images, its alt text, for accessibility – and you can also access the file URL, which allows you to link to the file. You can use the file URL as a link on Pages or in your Site Menu.
- Alt text, or alternative text, is text that describes the image for users who cannot see it. It is an important piece of web accessibility for website creators to put in place. You can learn more about alt text for images from this helpful Alt Text article from Moz. W3C Accessibility also has a more in-depth alt text tutorial.
- In the case of images, you can also do some barebones editing (cropping, rotating, flipping) from within the Media Library. The Gutenberg editor also allows you to do edit media from within the page editing view.
- You can also upload media directly to a page while working on building out content – this media will be automatically added to your media library.
Please only use images on your website that you have the rights to use – either images that are public domain or Creative Commons licensed, images whose copyright you own, or images from library databases that are licensed for your use.
Some recommendations for places to find pictures:
Don’t forget to cite your sources, whatever you do use!
How do I write a blog post?
To write a blog post, click Pages in the left-hand navigation menu. Then click Add New if you want to create a new page, or click the title of an existing page if you want to edit it. From there, you can follow the same instructions as for editing a Page, as the editor interface looks the same.
You will publish your Vivero reflections as blog posts. Blog posts will appear on your site’s Posts page, which has already been set up for you in the Vivero Portfolio Template.
How do I edit the site menu?
Your site menu dictates the navigation menu for your site that is available to users on every site page, as well as how it is structured (for example, with subpage child menu items that appear underneath a parent item). You will want to add new webpages to your menu and/or link to them from other webpages so that they are available to your site’s users. A basic menu has already been created for you as part of the Vivero Portfolio Template.
- Hover over Appearance in the left-hand navigation menu, then click Menus. This will bring up the menu editing page.
- The active menu we have created for your site is called “Site Menu.” Under Menu structure you can drag and drop existing items to reorder them or create dropdowns, or select items from Add menu items on the right-hand side to add additional Pages (either Most Recent, View All, or Search from the tabs at the top) and more to the menu.
- You can set your site is to automatically add top-level pages to the menu from here, if you would like.
- If you want one of your menu items to be a link to a file (such as a PDF hosted in the site Media Library), click Custom Links (under Add menu items), add the file’s URL to the URL box, and your desired title to the link text box.
- In order to activate a new chosen menu, you will need to do so from the Theme Customizer page (also under Appearance). More information on that back-end site tool is below! (Enabling the site menu may look different with newer themes that use the full-site editor.)
How do I customize my site?
A theme does much of the heavy lifting for your site design – and beyond that, there are elements within the theme that you can customize. The Twenty Twenty One theme is currently active on the Vivero Portfolio template. To change it, hover over Appearance and click Theme to view other themes in your library and change your site theme. Each theme has different customization options: as an example, the Vivero Portfolio Template . If you’re not seeing something you want to do, it may require some back-end tweaking, or changing themes.
- Hover over Appearance in the left-hand navigation menu, then click Customize. This will bring up the full-Theme Customizer screen.
- With newer themes optimized for full-site editing, you can also hover over Appearance and then click Design, which will bring up full-site editing design options that allow you to build out and customize all elements of your site – styling customization and “patterns” that you can edit or create from scratch to reuse across your site. The trade-off is a steeper learning curve for more precise customization.
- You will see a preview of your site on the right, and on the left a menu with a variety of options for design and customization. Some of these options vary depending on your site’s theme, as different themes have different levels of customization.
- The following may be of particular interest:
- Site Identity: Allows you to edit the site title and tagline (appears at the top of the site).
- Colors: Allows you to customize theme colors (though simpler themes will have fewer customization options).
- Header Image: Allows you to upload a header image for your site.
- Menus: Allows you to set or edit your active menu(s). The “primary” menu is the navigation menu that appears at the top of your site.
- Homepage Settings: Allows you to choose your site homepage from your existing Pages.
How do I make my site private using a plugin?
The Vivero Portfolio site template comes pre-installed with the My Private Site plugin. You can use this plugin to control the visibility of your site: you can make it visible only to users with a login while you’re working on it, or permanently if you would rather keep your portfolio visible only to Vivero co-leads. The plugin is already active on your portfolio site: simply click the My Private Site menu option on the left-hand side, navigate to the Site Privacy tab, and check the “Enable login privacy” box.
This is a helpful example of a plugin, which is a little piece of software that adds additional functionality to a WordPress site. Click Plugins in the left-hand navigation menu to see your plugins and install new ones. You can explore your preloaded plugins by scrolling through them. If you want to explore additional plugins, click the “Add New” button at the top of the page. Make sure to vet any new plugins thoroughly before installing (compatibility with your version of WordPress, reviews, number of downloads, how up-to-date it is, Google searching for information from other users…). An incompatible plugin can cause site errors or even break your site, and an out-of-date plugin is a security risk.
Accessibility
It’s important to factor in a consideration of web accessibility from the very beginning of planning your website, to ensure that your site is accessible to all users. There will always be things to update, or issues you might need to catch later, but incorporating accessibility into your web design from the get-go will help you build a stronger and more functional website for all users.
WordPress Accessibility
When using a Content Management System (CMS) like WordPress, many accessibility considerations are already built-in, so there are things you can let your CMS take care of for you. Here are some initial recommendations of things to consider:
- Structure & Layout
- ensure a logical document/page structure (nest your headings correctly: H2 > H3 > H4)
- use tables only for tabular data, not for page layout
- Design
- consider your use of color (color contrasts, colors that are too bright, colors conveying meaning…)
- consider the legibility of your typeface and font size
- Content
- break up walls of text
- provide text alternatives to multimedia content (alternative text, a.k.a. alt text, for images, captions or transcripts for videos), and ensure accessibility of other external files (such as PDFs)
- create links that make sense out of context (avoid “click here”)
When it comes to accessibility with WordPress specifically, you can look for accessibility ready themes and make use of accessibility plugins as needed.
Check Your Work
There are tools out there that can evaluate the accessibility of your site based on its URL and give you feedback to help you improve your site’s accessibility. Once such tool is the excellent WAVE Web Accessibility Evaluation Tool: simply plug in your site’s URL, run the evaluation, and read through the feedback provided. The tool gives you a rundown of accessibility errors, color contrast errors, alerts for things that could potentially use improvement, and even highlights the accessibility features that have been used correctly.
The Vivero Portfolio site template comes pre-installed with the Editoria11y Accessibility Checker plugin: it provides accessibility feedback on your site pages when viewed as a logged in user (so feedback is not visible to site viewers). Here’s a demo of the plugin in action.
There are additional tools that can check specifically for accessibility in terms of color usage:
- for font contrast: WebAim’s Contrast Checker lets you input color hex codes and tells you whether a particular combination has a high enough contrast for legibility
- for colorblindness: Toptal lets you input a site URL and shows you how your site looks to users with different types of colorblindness
Going Further
If you want to go further with WordPress, look into and play around things like:
- Changing the site theme
- Installing plugins that add features or functionality to your portfolio
- Editoria11y Accessibility Checker
- PDF Poster, for embedding a PDF of your resume/CV!
- Fonts Plugin, to access a substantial font library and easily change your site’s default fonts!
- Practicing how to add users (your portfolio is just for you, but this is useful to know for other projects and for helping others!)
If you want to learn more about WordPress, there are lots of resources online. Check out:
- WordPress.org documentation (make sure you are looking at support resources from WordPress.org, not WordPress.com – that is hosted WordPress, and it looks a little different on the back-end)
- “WordPress Essentials Training” on LinkedIn Learning
- WPBeginner
