Assignment – WordPress Site #3

Create a new WordPress site following the instructions listed below. The assignment is worth a total of 40 points.

You may use the Demo Site as an example of how to complete the tasks below. The placeholder content, images and design can be your own, unless a specific task below mentions otherwise.


Assignment Tasks

For your new WordPress site, use the Underscores starter theme or the TWD starter theme to create a new WordPress custom theme.

Blog – 1 point

Create a page called News to display the Blog posts (create at least 3 posts).

On the News page show the excerpts of the posts instead of the full content and display the sidebar before the footer.

Home Page – 4 points

Display a static home page.

Add content to the block editor including at least one block with “Wide width” set and at least one block with “Full width” set. Add support for the Wide and Full alignment options in the Block Editor and add styles for both classes to complete this task. (Note: example code for this is in the twd-starter-theme.)

Display the title and featured image of the three most recent blog posts at the bottom of the home page and link them to their single post page.

Staff CPT & Taxonomy – 4 points

Register a Custom Post Type (CPT) for staff.

Register a custom taxonomy for the staff CPT and create the taxonomy terms Faculty and Administrative.

Add Advanced Custom Fields to the staff CPT to display the following information:

  • Course(s) that the instructor is teaching,
  • Link to their instructor website, if the instructor has a website.

Staff Template – 4 points

Create a template for showing all the staff custom post type items.

Display the Faculty and Administrative items separately on the template.

Display the following content for each staff member:

  • Show their name,
  • Show the full content (description / bio of the staff member),
  • The course(s) the instructor is teaching (if Faculty),
  • The instructor’s website url (if Faculty).

Schedule Page – 4 points

Create a Schedule page.

Display a schedule of a short program that students would attend. Use the ACF Repeater field in ACF Pro to complete this task. (Note: You will need to download the ACF Pro plugin from the Program Files FTP.)

Student CPT – 4 points

Register a Custom Post Type (CPT) for students.

Define a Block Editor template for this CPT that consists of two blocks:

  • A paragraph block for their short biography.
  • A button block to link to their portfolio.

Prevent users from adding, removing or moving blocks in the Block Editor for this CPT.

Student List Template – 4 points

Create a template file and list ALL the available students on it.

In the template display the following content:

  • Name of the student,
  • Excerpt of the content,
  • Featured image of the student,
  • Which taxonomy term they belong to*,
  • Link to their single student page,
  • Display them in alphabetical order by their first name,
  • Change the excerpt length only on the student list template to 25,
  • Change the default […] ending only on the student list template to a link to the single student page with text like: “Read More about the Student”.

* There are two WordPress functions you can use to retrieve a post’s taxonomy terms. The function that displays them as a list works best in this scenario.

Student Taxonomy & Template – 4 points

Register a custom taxonomy for the student CPT.

Create the taxonomy terms Designer and Developer in this custom taxonomy.

Create one taxonomy template to apply to both the designer and the developer terms.

Display the title with a link to their single student page, full content, and featured image.

Add a new image size to the website (200px by 300px) and display the student featured image at that size.

Single Student Template – 3 points

Create a template for displaying the single students.

Display the following content on the template:

  • Name of the student,
  • The content,
  • Featured image of the student,
  • Links to other students in their taxonomy term*.

* Look for a WordPress function that lets you retrieve the terms of the taxonomy that are attached to the post.

Navigation – 1 point

Create a navigation menu with the following items:

  • Home
  • Students
    • Designers
    • Developers
  • Schedule
  • Staff
  • News

Styling – 2 points

Style the website according to the demo site or your own design. Make the website responsive and write your CSS mobile first.

Add at least one custom font to the theme. You can use a hosted font like Google fonts or a downloaded font added to your theme.

The site must be functional on screen sizes from mobile to desktop but you will not be marked on design with regard to typography, colour choice, and content.

Code Quality & Theme Organization – 4 points

Write clean, efficient, and organized code. Remove unused and commented out code.

Use the correct templates and keep the theme organized.

HTTPS – 1 point

Force the website to only be accessible over HTTPS after migrating the site to your portfolio.


Final Tasks

Create a WordPress User

  • Create a WordPress user with the role of Administrator, the username jleathers@bcit.ca and a generated password. You will send Jonathon this password when submitting your assignment.

Migrate the Site

  • Create a WordPress installation on your portfolio server and migrate your local site to the live site once all other tasks have been completed.

Submit the Assignment

  • Send a Slack message to Jonathon with the site URL and the generated password for the jleathers@bcit.ca user account.
  • Upload the zipped up theme folder to FTP → Program Files → 10-WordPress-Development → Dropbox-Assignment-3.
  • Due: October 5 (EOD)