Vivero Retreat: cPanel & WordPress for Vivellos

Creative Commons LicenseThis 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

  1. Domains & Subdomains
  2. WordPress Portfolio Websites
  3. Accessibility
  4. Copyright & Finding Reusable Images on the Web
  5. Going Further

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.

Screenshot of Domains and Applications in cPanel

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.)

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:

  1. From within cPanel, click on the WordPress icon under Applications.
  2. Click the + install this application button in the top right.
  3. Select the HTTPS version of your new portfolio subdomain for installation.
  4. Remove the optional directory portion of the URL.
  5. Run through the installation settings:
    • Select the Vivero Portfolio Template: this will pre-load your site with themes and plug-ins selected for Grinnell College.
    • Accept the licensing agreement.
    • For “Automatic Updates,” choose Update to any new version.
    • Select update as new versions become available for both plugins and themes.
    • Set up the administrator username and password: choose something you will remember, and make the password a strong one.
    • List your email address for the administrator email.
    • Give the site a title and tagline (these can be changed at any time).
    • Select “Yes, limit failed login attempts for increased security” under Limit Login Attempts.
    • Select “No, do not enable” under Enable Multi-site, unless multi-site is needed.
    • Select “Automatically manage advanced settings for me” under Advanced Setting Management.
  6. Click the Install button at the bottom of the page.
  7. Once the application has finished installing, it will be available under “My Apps” in cPanel. Click the site back-end login link (URL ending with wp-admin) and log in with the newly created administrator credentials 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 webapges (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 an About 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!

Screenshot of a WordPress page being edited on the back-end. The page contains placeholder text and an image.

Here are instructions for creating or editing a webpage:

  1. Click Pages in the left-hand navigation menu.
  2. 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.
  3. Use the editor of your choice to add or edit page content.
    • Currently sites.grinnell sites use the Classic editor thanks to a plug-in, so you will do this using the Classic Editor. You can explore the Gutenberg Editor if you want to.
    • Buttons at the top allow you to edit the font, styles, and layout (bulleted or numbered lists, text alignment).
    • By highlighting text and clicking the insert/edit link button , you can associate a URL and turn that text into a hyperlink.
    • You can click the Text tab (top right of text box) to view and edit page HTML if desired or needed.
  4. Use the Add Media button to insert images or add links to PDFs and other documents. Click the Upload files tab to upload a file directly to a page (which will also automatically add it to your Media Library).
    • If it’s an image, it will be added to the page where your cursor is. For images, make sure to add alt text once the file has uploaded using the box available in the Attachment Details pane.
    • If it’s a document (PDF, PowerPoint, etc.), it will be added as a link to the file in your media library where your cursor is. It defaults to using the item title, but you can edit this.
    • 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.
  5. 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, ArcGIS Online…). Some links will auto-embed. To do this by hand, copy the embed code (usually in <iframe> tags), click the Text tab (top right) to pull up your page’s HTML view, and paste the embed code where you would like it to live on your page (read the text between tags to get a sense of where you are on your page).
  6. 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.

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.

Screenshot of item in the WordPress Media Library back-end

  1. Click Media in the left-hand navigation menu to access your Media Library.
  2. 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.
  3. 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.
  4. 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:

  • ArtStor (library database)
  • Unsplash (high quality photographs licensed for free use)
  • Freepik

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.

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.

Screenshot of the WordPress menu editing page

  1. Hover over Appearance in the left-hand navigation menu, then click Menus. This will bring up the menu editing page.
  2. 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.
  3. 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.
  4. 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!

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. Each theme has different customization options: as an example, the Vivero Portfolio Template has a header image that you can customize . If you’re not seeing something you want to do, it may require some back-end tweaking, or changing themes.

WordPress theme customizer page

  1. Hover over Appearance in the left-hand navigation menu, then click Customize. This will bring up the Theme Customizer screen.
  2. You will see a preview of your site on the right, and on the left a menu with a variety of options for customization. Some of these options vary depending on your site’s theme, as different themes have different levels of customization.
  3. 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.
  4. You can also hover Appearance in the left-hand navigation menu, then click Themes to change your site theme (with some additional themes that come preloaded for you, or by selecting and installing a new theme).
    • The Live Preview button lets you see what your site content would look like with another theme!

How do I add additional functionality?

Plugins add additional functionality to your website, beyond the basics provided by stock WordPress.

The DST Portfolio template comes with a selection of plugins already installed. You can install more plugins by clicking Plugins from the sidebar menu and then clicking the Add New Plugin button at the top.

There are many plugins out there to meet a variety of needs: make sure to read the details carefully. Before you install a new plugin, make sure your plugin has other active installations, good reviews, and regular updates; and is compatible with your version of WordPress before you install it.

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.

There is a WordPress plugin you can install for accessibility feedback on your site: it is called the Editoria11y Accessibility Checker.

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

Since your portfolio website is public, it’s important to look for and use images that are licensed for you to reuse freely, without worrying about copyright. Consider using:

  • Photographs you took or other images that you created yourself.
  • Works with a ​Creative Commons​ ​license​, which is is a copyright license that allows works to be used by others. Different types of Creative Commons licenses exist, with differing restrictions. For example:
    • CC BY-NC-SA: “This license allows reusers to distribute, remix, adapt, and build upon the material in any medium or format for noncommercial purposes only, and only so long as attribution is given to the creator. If you remix, adapt, or build upon the material, you must license the modified material under identical terms.”
  • Works in the p​ublic domain​, which are freely available and are not subject to copyright laws.

If an image is copyrighted, or you are unsure of an image’s copyright status, do not use it on the website.

Resources for finding Creative Commons-licensed or public domain images:

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
  • 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:

css.php