Most of the tasks in this exercise can be accomplished in the Customizer. However, some Custom CSS will also be required.
If this is a test, the marks breakdown is listed with each section title below.
Starter Content & Theme Installation
For this exercise, first please download the following Duplicator package.
I’ve included two versions of the package (made while running different php versions).
First try version 8. If that doesn’t work, install version 7.
Make sure that your MAMP PHP version is matching the package you are installing.
When you unzip the package, rename the folder to firstname-lastname-generator.
Install the GeneratePress theme and GenerateBlocks plugin.
Do not install any other plugins.
Screenshots & Graphics
Please download the screenshots and the additional graphic files required for the exercise:
Loom Video
Typography (20 marks)
The following fonts are used in the site:
- Serifs: Neuton
- Sans-Serifs: Poppins
Your goal here is to consult the screenshots in order to choose the correct font families and produce the same typographic proportions as in the screenshots.
Site Identity & Basic Structure (5 marks)
Set the logo of the site to use the file generator-logo.png.
Set the favicon to the site to use the file heart-hotpink.png.
Set the site name to Generator and the site tagline to A Critical Theory Blog.
Set the site to have a static home page.
Set the site’s posts to appear on a page called posts.
Colors (10 marks)
- Content Background: White
- Body Background: Light Grey
- Text: Black
- Links in Articles: Hotpink
- Main Menu Hover: Hotpink
- Main Menu Current Link: Hotpink
Main Menu (5 marks)
The site will have one menu, with links to the following items.
- Home Page
- Movies Archive
- Music Archive
- Politics Archive
- Posts Page
Site Header (10 marks)
The site header has two elements:
- The Logo: this links to the home page
- The Menu: this will be replaced with a hamburger menu button at small and medium sizes.
Make sure that the alignments are like those in the screenshots.
Site Footer (10 marks)
In the Site Footer, there will be three items:
- Site Logo (big)
- Copyright Notice (small)
- Back to Top Link
Home Page (20 marks)
Set the title of the Home Page not to display.
The home page has a Heading with Lorem Ipsum Dolor as text.
That is followed by a Query Loop block from the Generate Blocks plugin. Do not use the default Query Loop here: you want the “blue” one.
Set the Query Loop block to NOT Inherit query from template.
Get this block to output six posts from the Music and Politics category, arranged by Last Modified Date.
Hint: categories are taxonomies.
Archives (10 marks)
Configure the archives as they are in the screenshots.
Single Posts (10 marks)
Configure the single views of posts as they are in the screenshots.
Bonus ( 2 x 10 marks)
For 10 bonus marks, make the larger archive layout look at it is in the Bonus-Archive-Large screenshot.
For 10 more bonus marks, make the larger single post layout look at it is in the Bonus-Single-Large screenshot.
In both of these bonus tasks, the css object-fit property will be essential.
What to Hand In
When you are done, please make a Duplicator archive of your project. In doing so, please follow these guidelines:
- Do not rename the zip file that Duplicator makes, or you will break the package.
- The installer.php file must be the one that was created at the same time as the zip, or the package will not install. Installers cannot be reused, in other words.
- Make sure that your installer and archives are not aliases or shortcuts. Check that neither has an arrow in the icon, and make sure that the zip file is a reasonable size (with this project, it will likely be between 50 & 100 megabytes).
- Put the (correct) installer and zip files into a folder named generator-firstname-lastname, then zip that folder, and then hand it in.