In this exercise, you will make a responsive WordPress-based site about guitar pedals called PedalMania. You can use any resource: the internet, your notes, past work. You may not talk.
You will use the Underscores starter theme.
Please download the sample content.
Set up a new MAMP project with an underscores theme, import the images, then import the content. With luck, your posts will have the feature images connected to the posts. If the wrong image is connected to posts, don’t worry. If the posts don’t have the feature images connected, do it manually: any image can go with any post.
Notice that the banner has a search field. Note, also, that it does NOT have a menu. All navigation on the site is taken care of with post titles, categories, and tags.
The site banner, the post titles, and the category links all use the Google font Oswald, weight 700. Other text uses a Georgia, Times, Times New Roman, serif stack.
Your feature image will of course be responsive, but I do not want you importing the full size image. Add the appropriate code to your theme to make feature images that are 800px wide.
The feature image, on the home page only, will link to the post. If you forgot how we did that, look it up in the codex.
Remember: you do not have to make everything absolutely pixel perfect. Get the main stuff working first. Do not get hung up on details.
How You Will Be Marked
When you are finished, call me over to look at what you did.
Theme outputting required content: 4 marks
Styling for desktop: 3 marks
Styling for mobile : 3 marks
Screenshot: Full Size Index Page
Explanation of the Full-Size Index Page Content
On the index page, each post has a title, the feature image, a category link, and tag links. The title of the post is in the top left. The category is in the top right. The title, category, and tags are all links.
Notice that the title of the page. Add the phrase “Guitar Porn” to the appropriate place in the WordPress dashboard.
When a tag link is rolled over on the index page, it looks like this:
Screenshots: Full Size Full Post Page
Note the different treatment of the tags on the Post Page. The music note character that is dividing the tags can be found at copypastecharacter.
Screenshot: Responsive Views
