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?
You can choose to install the WordPress template and build our your portfolio site in your main domain (name.sites.grinnell.edu) or in a subdomain (portfolio.name.sites.grinnell.edu). Follow these instructions from Reclaim Hosting to create a new subdomain.
If you want to work within a subdomain, once it 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 DST Portfolio Template in my domain?
We have created a portfolio template for Digital Studies students creating portfolios, 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 DST Portfolio Template: this will pre-load your site with themes and plugins selected for Grinnell College, with template formatting specific to DST concentrators.
- 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.
What makes a “good” website?
Let’s discuss!
- Easy to navigate
- Up to date with your information
- Intuitive, thinking about where different links go
- Contains a bio
- Has some kind of personality!
- Refer to prior work, in case of portfolio
- Accessibility – accessible to all users
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 DST 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 DST 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.
- You have options for creating and editing your page content.
- The default option is the Gutenberg block editor: click the plus button (top left) to select blocks of various types (text, media, design…) and add them to the page. Click into a block for some basic styling options, and use the right-hand pane for additional block customization.
- You can also choose to use a page-builder plugin. One such plugin, Elementor, is already installed for you and can be activated from the Plugins page.
- Use an Image block to insert images. You can select existing media from your Media Library, or click the Upload button to upload a file directly to a page (automatically adding it to your Media Library). It will be added to the page where your cursor is.
- Add descriptive alt text (alternative text, a description of the image for users who cannot see it) for your image in the alt text box when you upload it to the page.
- Use an Embed block to embed content from elsewhere using a link. Some types of content may need you to use the Custom HTML block instead, using HTML <iframe> code.
- If you want to embed a PDF on a page, you can use the PDF Poster plugin to do so. More on that below under “How do I embed a PDF?”
- 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.
- 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:
- Unsplash (high quality photographs licensed for free use)
- Freepik
- Wikimedia Commons
Don’t forget to cite your sources, whatever you do use!
How do I embed a PDF?
A plugin called PDF Poster has been installed for managing PDFs. Follow these instructions to embed a PDF on a page:
- Hover over PDF Poster in the left-hand navigation menu, then click the Add New Pdf menu item that appears.
- Give your PDF a title, upload it using the upload button under PDF Poster Configuration, and configure the settings to your liking.
- Save your PDF using the Save button in the top right-hand corner.
- On the PDF listing page, click into the ShortCode button to copy the shortcode for embedding the PDF (which should look something like [pdf id=79]).
- You can access the PDF listing page by hovering over PDF Poster in the left-hand navigation menu, then clicking the PDF Poster menu item that appears (above Add New).
- Then paste the shortcode by itself into a text editor box in Elementor: when you publish the page, you should see the embedded PDF in place of the shortcode.
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 DST 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 “Primary.” 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!
If you want to build out your website from the ground up, you can embrace full-site editing: make sure you are using a theme enabled for full-site editing (the current theme allows both full-site editing and the older theme customizer, other themes may only allow one of the two), and customize the Navigation section under Appearance > Design. See more information from WPBeginner: scroll down to “Adding Navigation Menus in Full Site Editor (FSE).”
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 DST Portfolio template allows you to edit the theme colors or add a Cover Template image to your homepage. 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 Theme Customizer screen.
- 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.
- 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.
- 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!
If you want to customize all elements of your website from the ground up, you can embrace full-site editing: make sure you are using a theme enabled for full-site editing (the current theme allows both full-site editing and the older theme customizer, other themes may only allow one of the two), and begin making your customizations under Appearance > Design. See WPBeginner’s A Complete Beginner’s Guide to WordPress Full Site Editing for an overview.
How do I make my site private?
If you want to make your site private (and not publicly viewable) while you are working on it, you can do so using the My Private Site plugin.
- Navigate to the My Private Site plugin page from the left-hand navigation menu (towards the bottom).
- Click the Site Privacy tab.
- Tick the “Enable login privacy” box to make your site private. Users who try to view your website will encounter a login page.
- Don’t forget to come back and uncheck the box when you’re ready to make your site public.
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. One example is the Fonts Plugin, which allows you to customize your site fonts, when activated.
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.
Copyright & Finding Reusable Images on the Web
As the copyright holder to your own work, you can take steps to protect your work from copyright infringement. For example, you can add watermarks to your images to keep them from being used by others.
Given that this is a portfolio, much of the media on the site are likely works that you have created yourself. But since your portfolio is public, it’s important that any images and media that you did not create yourself (for example, images used in a StoryMap) 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 public 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:
- The Creative Commons Website
- Unsplash (freely reusable stock photos shared by creators)
- Flickr (filter your search results by license using dropdown below search bar)
- Wikimedia Commons (user-uploaded pictures – public domain & CC-licensed)
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. One such tool is the excellent Editoria11y Accessibility Checker. The tool gives you a rundown of accessibility errors, color contrast errors, and alerts for things that could potentially use improvement. You can view this accessibility rundown by clicking on the Editora11y icon at the bottom right corner of any page (visible only to logged in users) or from the Editora11y page available through the site admin navigation menu.
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
Get Help When You Need It!
If you have questions, need help, get stuck, or want support trying something new with your portfolio site, there are support resources out there for you!
- Vivero Digital Fellows trained in a variety of digital tools and approaches (including WordPress) hold peer mentoring drop-in hours from 7-9 PM Monday-Thursday and 3-5 PM & 7-11 PM on Sundays.
- Tierney Steelberg, Digital Liberal Arts Specialist: email steelber@grinnell.edu
- Mo Pelzel, Director of Academic Technology: email pelzelmo@grinnell.edu
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
- Including A Complete Beginner’s Guide to WordPress Full Site Editing if you want to embrace full site editing and build/customize your site entirely from the ground up
