In this exercise, you will build a WordPress theme for an Imaginary Film Festival.
You can use CSS or SASS.
First, please download and install the starter content. This is a Duplicator package.
Now please download this starter theme for your project. You must use this starter theme. Rename the folder your-name-iff, then put it in wp-content/themes.
You must use this exact starter theme, or your work will not be marked.
Open the starter theme folder in Visual Studio Code and in the stylesheet file change the theme name to your first name and the author name to your full name.
Now, please download the image resources. This download includes the screenshots and a background image.
Exercise Description
Two Loom videos explaining the exercise.
There are two sections of this exercise: regular and fancy.
The layout in both versions is exactly the same. The content in each version is the same, but it is presented differently in places.
There is one screenshot showing what is different in the fancy version.
The regular version is for 80% of the marks.
The fancy version is for the remaining 20%.
Compare the screenshots, but the primary difference between the two versions is as follows:
- Header/Footer: background treatment
- Notices: “details” html element
- Notices: “details” color changes by custom field value
- Asia: loads alphabetically by country name
- Middle East / Africa loads by order of composition
- South America loads alphabetically by post title
Content Description
In the starter content you downloaded, there are a bunch of posts. Each post has
- title
- feature image
- content
- tags
- category
- custom fields for movie trailer, director, country, and year
There is one Custom Post Type: Notices.
Each notice has a title, some content, and a custom field for notice type.
Pages Required
Front Page, as in the screenshots.
Single Views, linked to from front page article titles and feature images.
The Single views do not need to be styled (other than the header and footer). In the area between the header and the footer, single views must output in this order:
- Title (not linked)
- Trailer
- Content
- Category
- A UL with an LI each for Category Link, Country, Director, and Year
I have not included a screenshot of the single views.
Resources
Escaping
If this is a test, you do not need to escape the content. If it is an exercise, you do have to escape the content.
Marks Breakdown
If this is a test, the following marks apply. If it’s not a test, the exercise will be out of 1 mark as usual.
| REGULAR SECTION | |
| Header / Footer | 10 |
| Notices | 10 |
| North America (loads in alphabetical order by title) | 10 |
| Asia (loads randomly) | 10 |
| Europe (loads in alphabetical order by title) | 10 |
| Middle East / Africa (loads middle east, then africa) | 15 |
| South America (loads randomly) | 5 |
| Single Content Output (header, footer, title, trailer, content, category, all custom fields) | 10 |
| FANCY SECTION | |
| Header / Footer Background Treatment | 4 |
| Notices Using HTML Details Element | 4 |
| Notices BG Color Change by Notice Type | 4 |
| Asia (loads Alphabetically by Country) | 4 |
| Middle East / Africa (loads by order of composition) | 4 |
| South America (loads alphabetically by title) | 4 |
Yes, I know that there are actually 6 items in the fancy section, making it possible to get 104% on the test….
What To Hand In
The theme you have written, zipped up. Do not submit a Duplicator package.
Please make sure that your theme folder and theme are named correctly (as described at the top of this page).
MAC USERS: dragging a file from the Applications folder creates a shortcut to the file, not a copy.
For that reason, right click to copy the theme to your desktop. Then hand it in from there.