Prof. Cameron Blevins

Introduction to Digital Studies
HIST 3260/5260 | COMM 3081/5081
M/W 2:00-3:15pm
North Classroom 1608
Office Hours: W. 3:30-4:30pm
TA Office Hours: M. 12:30-1:30pm

Wordpress Themes Overview

Wordpress offers a variety of themes that have been built by web developers. A theme takes the content of your site (the pages of text, images, etc. that you create) and dresses it up in a particular design for someone who is visiting your site - it determines the visual layout, color palette, typography, organization, etc. It’s kind of like having someone choosing your website’s wardrobe for you! One of the benefits of the theme system is that you don’t need to have any web development skills or experience to make an aesthetically pleasing site. You can make small tweaks to the site design within a theme, but the overall aesthetic has been developed by someone else.

For today’s tutorial, you’re going to be working in groups of 2-3 people (pair up with the person(s) next to you).

Exploring Wordpress Themes

  • Go to the Wordpress Theme search page: https://wordpress.org/themes/. I recommend this as your starting point for exploring themes rather than looking at themes through your Wordpress dashboard.
  • Although there are thousands of themes available to install, for the purpose of this class we’re just going to be using Block Themes. Block themes themes are a particular kind of theme that use a different infrastructure from older Wordpress themes. Although block themes have more limited selection, using one of these themes will give you practice with using the Full Site Editor - a relatively new type of interface that Wordpress rolled out in 2022 and has signalled it is going to prioritize moving forward.
  • In the Wordpress Theme page, on the Block Themes filter to narrow down your search to just these types of themes.
  • If you hover over a theme and click More Info you can get some useful information about the theme, including a description of the kind of user it’s geared towards, how recently it was updated, etc.
  • If you’re interested a theme, I would recommend clicking on Theme Homepage on the right side of its More Information Page. Then try and look for a link that says something like “Demo” or “Preview” somewhere on that page. This will let you click around on an example website using that theme to get a feel for its different features and design.
  • Spend 5-7 minutes scrolling through the list of Block Themes and look for ones that catch your eye (either good or bad).
  • After each person has had a chance to look at several different themes, share one theme you either actively liked or actively disliked with each other
    • What did you like/dislike about its layout - how the website was arranged and its various features?
    • What did you like/dislike about its aesthetic - color, font, pattern, etc.?

Installing a Wordpress Theme

  • For today, we’re going to be installing two themes I’ve pre-selected: Riverbank and Bjork.
  • Log into your Wordpress dashboard (ex. https://yourdomain/wp-admin/)
  • Go to Appearance -> Themes. You should see several default themes that come pre-installed with Wordpress. Only one should be “active” (Twenty-Twenty-Three).
  • Under Appearance -> Themes-> click Add New. This allows you to search the entire Wordpress directory for a theme you like.
  • If you hover over a theme and click Details and Preview it will bring up a description of the theme and a sample site that shows what the theme actually looks like. Note: I would not click “Install” until you’re actually ready to adopt it.
  • Use the search bar under Appearance - Themes -> Add New to search for Riverbank. Hover over the theme and click Install. Repeat this step to install Bjork.
  • Click on Appearance -> Themes. You should now see two newly installed themes alongside the defaults you had before.
  • When you clicked Install you downloaded the raw material for the theme to your server (ie. you bought a new set of clothes). But to actually implement the theme for your site you need to Activate it (ie. put the new clothes on).
  • You’re going to divide up the two new themes with your partner. Decide who is going to explore Riverbank and who is going to explore Bjork. Once you’ve decided, hover over the theme you selected and click the Activate button.
  • Click on the home icon in the upper left corner of your Dashboard to visit your site - you should see something that is now in the design of your new theme!

Customizing Your Theme

  • Regardless of which theme you activated, you’re going to spend today trying to customize the theme to fit your own needs for a personal website.
  • To edit the theme, click Appearance -> Theme - Editor
  • Each of you are then going to try and complete the following using the Full Site Editor - note: if you get stuck or can’t figure out how to do one of them, ask your partner(s) for help!
    • Delete at least 2-3 pieces of pre-loaded content that came with the new theme for your site’s landing page.
    • Change part of the default text that is now loaded on your landing page so it displays your name and some information about yourself.
    • Change the Navigation links that come with your theme to the following:
      • A link to your About Page
      • A sub-menu that says Digital Studies Assignments
      • A link to your Digital Hygiene page that appears as a drop-down item under Digital Studies Assignenents

Peer Review

  • Once you’ve both finished customizing either the Bjork or Riverbank theme, send a link to your website to them over Slack DM.
  • Take a few minutes to review your partner(s) website.
  • Which theme do you prefer?
  • What design features work well for each of these themes?
  • Which design features don’t work well for each of these themes?
  • Give feedback and advice to your partner(s) on things they could improve about their website.

Bonus: Bad Typography

If you finish early, make a new page in Wordpress. Your goal is to make a page that intentionally goes against as many of the suggestions on font/typography that you read for today in this Twitter thread. Post a link to the page in the #in-class Slack channel.

Updated: