WordPress Templates

Jazz Icons 2018

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:

  • Post thumbnails will already have links to their respective posts (you will still need to put the_post_thumbnail() into the appropriate theme file).
  • All YouTube videos will be automatically wrapped in a DIV to make it easier for them to be styled responsively. The CSS to do that is your responsibility, however.

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.

If we have done SASS in class, please use it in the exercise.

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 exercise, 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 JazzIconsTheme. 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.

If I have asked you to do the exercise in groups, please include a TEXT file named group.txt, which lists your group members.

Marks Breakdown

If this is a lab exercise, the mark is out of 1 (as usual). If this is a test, the mark breakdown will be more detailed:

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


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


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.