In this exercise, you will configure a WordPress classic theme to make a website called Doppelgänger.
If this is a test, the marks breakdown is included with each section. If this is just a weekly exercise, the mark is out of 1, as usual.
First please download:
Project Setup
- Unzip the starter content. Rename the folder to doppleganger.
Do not put any accents, such as the umlauts (¨), in the folder name. - Go through the Duplicator install process.
- Install and activate the Ocean WP theme.
- Install and activate the Ocean Extra plugin.
- Install and activate the Ocean Social Sharing plugin.
Do not upgrade to the paid version of the theme or plugin.
Do not install any other plugin.
Important: this site does not use a static front page.
Instead, it uses the default WordPress blog format.
Site Branding (5 marks)
- Set the site name to Doppelgänger.
- Set the site tagline to Thoughts about Things.
- Add the Doppelgänger Logo to the site.
- Crop it as close as possible to the graphic content.
- Set its max-width to 120px.
- Add the Doppelgänger Favicon to the site.
- Crop it as close as possible to the graphic content.
Menus (10 marks)
- Create a menu with all the categories in the site (except uncategorized).
- Create another menu with a link to https://langara-app.ca
Make the text of the link say Langara WMDD - Put the categories menu in the header.
- Put the WMDD link in the footer.
Typography (10 marks)
- Bebas Neue for all Headings
- Bebas Neue for Menus
- Lora for all other text.
- On the front page only, set the page title (Thoughts about Things) to scale with the browser width. Don’t let it get too big or too small.
- Make sure that page titles on the front page and archives are centered.
- Set all icons to use Font Awesome.
Header (10 marks)
- Make the layout of the header appear as it is in the screenshots. This will also include disabling the top bar.
- The header has both a desktop and a tablet/phone layout. Consult the screenshots.
The Sidebar (10 marks)
Make sure that the sidebar does not appear on any of the following pages:
- Front Page
- Archives
- Single Views
Front Page & Archives (20 marks)
- Make sure that the front page and the archives have three columns on desktop and one on phone/tablet.
- Make sure that the excerpt length is 37 words.
- Make sure that the front page and archives show 12 posts per page (if they have that many, of course).
- Make sure that the articles on the front page and archives have the features shown in the screenshots.
Single Views (30 marks)
The top area of single post views will contain the following (under the site header, where the article begins), in order:
- a full-width feature image,
- the author name,
- the author avatar (image)
- the post title
- meta: category
- meta: modified date
- meta: reading time
- meta: tags
You will need to make some CSS adjustments here:
- make sure that the tags in this area are on their own line, at all sizes.
- Make sure that those tags do not touch the edge of the screen at any size
- set the author image to greyscale and a max-width of 70px
- put the author image below the author name.
The content area of single post views will have, in this order:
- Content
- Meta: Tags
- Social Sharing
- Next / Previous Posts
- Related Posts (4)
- Comment Form
Consult the Single View screenshot to see the configuration and styling details.
Site Footer (10 marks)
At the bottom of the page, put a credit and a Scroll to Top button:
Copyright [year] Doppelgänger
Site created by YOUR NAME
Style it and the footer menu as in the screenshot. The layout will require some CSS.
How to Hand In Your Work
When you are done, make a Duplicator package of your work.
This will create two files to download:
- installer.php
- A zip file with a very long name.
Do not rename the zip file, or your installation will break.
Make a folder named first-name-last-name-doppelganger.
Put the installer.php file and the zip file inside that folder.
Now zip that folder.
This means that you will have a zip file inside a zip file. This is not a problem.
Hand in the zip file you have created: first-name-last-name-doggelganger.zip file.