WordPress Templates

Jazz Icons 2017

Please download the Duplicator archive for this exercise, then download the screenshots package. The Duplicator archive contains all the site content, including the menus.

It also includes an UNDERSCORES starter theme with two modifications. The first modification makes post thumbnails already have their associated links. The second wraps all YouTube videos in a DIV to make it easier for them to be styled responsively.

Any sans-serif fonts used are the helvetica, arial, sans-serif font stack. Any serif fonts are the Google font LORA.

No page in the site will have a sidebar.

You can use SASS if you want to, or not use it if you don’t want to.

Make sure that you are testing the site with Google Chrome, as that is the browser I will mark with.

How To Hand In The Exercise

When you are done the exam, please make a Duplicator archive of the site. Make sure that you do this in Chrome.

Then hand it into the class handin folder, in a folder called JazzIcons. Inside that folder there needs to be a file called installer.php and a zip archive with a long name. Make sure that you did not accidentally unzip the zip file.

Marks Breakdown

Header 10%
Menu 15%
Article Styling 20%
Home, Archive, Search Layout 40%
404 Page Text Change 5%
Search Page Heading 10%
Single Post Bonus 50%

Header Area

The header on all pages will look like this. The Underscores starter theme has a button that appears at smaller widths in the header. Remove it.

Header screenshot

Menu

The menu will have the following items: a link to home, category links, and a link to a Contact page.

With the menu, make sure that the user’s current location in the site is indicated. In the above screenshot, the user is on an archive listing all posts about Saxophone players.

Menu: Responsive Strategy

The screenshot above shows menu items when they fit into one row. At smaller browser widths, the menu items reflow. Both rows in the menu will always take the full width of their content area. The menu items, in other words, automatically take whatever space is available to them.

menu screenshot menu screenshot menu screenshot

Articles

On the home page, category archives, and search results, each article will look like the screenshot below.  Think about what this means for your templating.

On those pages, each article will have the post title, the posted-on date, the post excerpt, the feature image, and the post and category links. ( A logged in user might also see the EDIT link as well ).

Article Screenshot

Home Page, Archive Pages, Search Results Layout

These pages will all behave the same way:

  • at full screen width, the articles sit three in a row (if available)
  • at medium width, the articles site two in a row (if available)
  • at small width, the articles sit in a single column, but with the main text still beside the image
  • at small phone width, the articles sit in a single column, but with the main text now underneath the image

Consult the downloaded screenshots to get what I mean here. You determine the breakpoints needed.

404 Page

For the 404 page, change the phrase It looks like nothing was found at this location. The new line will be We’re sorry: there appears to be no content at this location. 

Search Page

On the Search Results page, make the heading that shows the search results stand out like this:

Search Results

 

Single Posts

This part is for a 50% bonus.

When a user clicks on the title of post or the thumbnail, they will be taken to the single view of the post.

It will look like this. Click it for a bigger view, or consult the downloaded screenshot file.

The text will be in the middle of the screen. It will be prevented from getting too wide. The thumbnail will not appear. The video, which is the first thing in the content window, will be responsive.

Standard