For this exercise, please download the starter content. Start with version 8.2: if that doesn’t work use version 7.4.33.
This will be a Duplicator archive. Unzip it.
Rename the folder first-name-last-name-as-we-used-to-sing.
Go through the Duplicator installation process: in doing so, be sure to make a new admin account for yourself.
If WordPress asks about the admin email address, just say OK.
Additional Downloads
Loom Video
Scoring
If this is a test, it is marked out of 85. Each section has an associated points total. Plan your time accordingly.
If this is an exercise, it is marked out of 1.
Theme & Plugin
Install the Ocean WP Theme.
Install the Ocean Extra Plugin.
Useful Tip:
After enabling the Ocean Extra plugin, go to the Ocean WP area in the Dashboard sidebar and enable Customizer Search.
Site Identity (1)
Name the site as we used to sing and use the phrase creative community for the site tagline.
Typography (10)
Set the default font for the site to Noto Sans.
Set the font-weight of the site title to 900.
Set the site’s default font size to 14px, and the default line-height to 1.7.
Set the site to use the woff2 font format.
Set Page Titles to be 56px on Desktop, 36px on tablet, and 24px on phone.
Menus (3)
Create a menu with all the post categories except untitled
Put that menu in the top right of the site, the bottom of the site, and in the mobile menu.
In the top left, right above the title, put links to twitter, facebook, instagram, and linkedin. These links must show up as icons.
Home Page, Archive, and Single Layouts (15)
Make the Home page, Archives, and Single post view layouts appear as they are in the screenshots.
Search Box Behavior (3)
Watch the Loom video for a demonstration of the search box behavior.
Main Menu Link Hovers (3)
Watch the Loom video for a demonstration of the main menu link hover behavior.
Colors (2)
Set your Primary accent color to Hotpink.
Excerpts (2)
Set excerpt lengths to 18 words.
Back to Top Icon (3)
Set the Back to Top Icon to be an arrow inside a square, like in the screenshots.
Set your back-to-top hover color to deeppink.
Posts Without Feature Images (2)
For any posts that don’t have feature images, add the redunzl image as the feature image. That file is in the downloaded images.
Article Spacing (4)
On the home page and archives, increase the space between the feature images and the meta information (like author, date, category etc).
Meta Information (10)
On the home page and archives, make sure that the area for meta information is showing up underneath the feature images.
Make sure that the meta information has the following parts, in the following order:
- author
- category
- reading time
- modified date
- comments
Set the meta information and the associated icons to be be 10px.
Consult the screenshots if this is unclear.
Meta Area Separators (3)
Set the Separators in the Meta area to appear as they do in the screenshots.
Icons (4)
Make the icons for the site use Font Awesome Icons. To see what these look like, examine the screenshots.
To improve performance, turn off the CSS for the other icon styles (svg icons and simple line icons).
Image Rounding (5)
Make sure that feature images have a border-radius of 10px.
Make sure that images in the “You Might Also Like” sections in single post views have the same rounding.
Make sure that when you round those “You Might Also Like” images, that we don’t see anything in the corner of the containing boxes.
See screenshots if this is not clear.
404 Page (5)
For the 404 page, upload the 404 page image from the downloaded files.
Set that image to go no wider than 600px.
Single Page Feature Images (8)
Set feature images on single views of posts to be 400px high—without distorting. You will need to use the object-fit property for this task.
Limit this effect to apply only above 800px in screen width.
Footer (2)
Set the message at the bottom left of the page to say All content copyright [ the year, dynamically generated] — As We Used to Sing.
Make the font-weight of that message 900.
Set the bottom right of the footer to have the main menu.
When you are done:
Please make a Duplicator archive, put the two files in a folder and name the folder your-name-as-we-used-to-sing.
Then zip the folder and hand it into Brightspace.