For the this exercise, you need to do the following steps:
Watch A Movie
First, watch this Loom movie to get a sense of the exercise.
Then download and examine the screenshots.
Site Setup
- Install a fresh copy of WordPress in your testing environment
- Install the Create Block Theme plugin
- Create a new theme named yourname-patterns-exercise
- Create a custom screenshot for your theme
- Give your site a name of Imaginary Film Festival
- Give your site a tagline of Vancouver, July 22 – 28
- Use Adobe Logo Maker to make a logo for the site
- Delete the sample page and post that come with WordPress
- Create one new post with three random words for the title
- Add seven paragraphs of content from the Lipzum Generator
- Add a feature image. Make sure that it is sized to 2560px width before importing it.
- Make 13 categories from these country names:
America, Canada, Mexico, Brazil, Britain, France, Ireland, Germany, India, Nigeria, South Africa, China, Japan - Give each category a category description (a sentence or two). They can all be the same description. Lorem ipsum is fine.
- Install the Yoast Duplicate Posts plugin.
- Change the Yoast Settings to make sure that Status is copied, and that no prefix or suffix is added during the copy.
- Clone your single post twelve times.
- Set each post to have one of the newly-created categories, and no other categories.
- Select all the fifteen posts and use bulk edit to clone them at least seven more times. This will give you approximately 100 posts.
- Create a menu that includes all 13 categories
- Install into your site Source Sans and a Source Serif fonts from Google fonts.
- Set all your Headings to use your Source Sans font.
- Set all your other text to use your chosen Source Serif font
- Set your menu to use your chosen Source Sans font
- Set your Main Content block for the site to 700px width
In your theme, you will need to make the following templates:
- Front Page
- Single
- Archives
- 404
You do not need to worry about other template files like search or page.
You will need to have three template parts:
- Header Large (for the front page)
- Header Small (for other pages)
- Footer (on all pages)
Main Menu
You will have one menu. It will have the following characteristics:
- All 13 categories
- Always displaying as a row
- Aligned to the center
- Red link text
- No underlining
- Text transformed to uppercase
- Spacing as in the screenshot
The menu must be named Main Menu (in the Advanced part of the Block settings).
This menu must be turned into a synced pattern, for use in the next section.
Patterns
Patterns are useful for when you have content or structure that repeats in different parts of the site.
Look at the screenshots to work out which elements should be patterns.
For this purpose, you will need to create the following patterns.
- Logo + Site Title + Site Tagline (synced)
- Logo + Site Title + Site Tagline + Menu (synced)
- Category Menu with row wrap and no hamburger (synced)
- Single Person Testimonial (non-synced)
- Category Link button (synced)
- Big Savings ad (synced)
You will also need to “borrow” the FAQ block from the Twenty Twenty-Four theme.
Where To Use These Patterns
Logo + Site Title + Tagline + Menu
- in header small template part (in archive & single)
- at bottom of front page
Category Menu with Row Wrap
- In Large Header on Front Page
- Near bottom of 404
Category Link Button
- In single view
- In front page query loops
Single Person Testimonials
- near bottom of front page
- at bottom of 404 page
Borrowed FAQ Block
- Near bottom of front page
Big Savings Ad Block
- Near bottom of front page.
Other Tasks
Fix the annoying breakpoint for query loops
The standard Gutenberg Query Loop has a really annoying breakpoint when it changes from one-column to three-column layout.
Use custom CSS to change that breakpoint from the default 600px to a more typographically satisfying value of 800px.
Typography, Layout, Spacing
As always, make sure that
- Your text never touches the edge of the screen or its parent box
- Your line height aids readability
- Text line-length is not too long or too short
- Elements are aligned as in the screenshots
What To Hand In
Imporant: before getting your site ready to hand in, make sure that you save all changes back to the theme.
This is done in the Editor: look for the Wrench icon.
This is what you will need to hand in
- Your Theme
- A Duplicator package of your site
Put the two Duplicator files in a folder called yourname-iff-duplicator, then zip it.
The theme folder, handed in separately, needs also to be in zip form.
You can export an already-zipped theme folder from the Create Block Theme area (look for the wrench icon in the Editor).