Challenge Overview
Welcome to SunShot - SolarBook - WordPress Theme Skin Development Challenge! The team at Pick My Solar is taking the next step in solar transparency by developing SolarBook, an online portal covering all things solar for both consumers and industry professionals.
Each stage of the solar process, from first learning what it is and how it works, to what to consider when choosing an installer, to monitoring the system and properly filing for tax credits and rebates, will be covered in educational videos, blogs, workshops, case studies, and quick tips. Quick and to the point, visual learning will accomplish what now takes hours of research and reading. The more informed the consumer, the faster the solar sales process.
For this challenge, the goal is to apply the storyboard to the provided WordPress base theme with the features outlined in the Challenge Details section.
As part of this challenge you will need to document all WordPress, PHP, HTML5, CSS3, and JavaScript codes. We need clear explanation of the code to help us figure all the code functions and make it easier for future developers and the client to understand what you have built. You are allowed to use Bootstrap and jQuery for this challenge.
Final Submission Guidelines
The goal of this challenge is to implement the provided storyboard over the provided wordpress theme. The provided wordpress theme is the result of our first challenge which handles most (if not all) the functionality needed to create the site requirement of this project.
What’s included in the provided wordpress theme are theme, plugins, deployment guide, and sample data.
General Requirements:
1. Header bar
- Solar Book logo always link to home page.
- Aside from the regular header shown in the storyboard, implement double header. Refer to doublebar.jpg, the “pick my solar” logo is in the provided ai file.
- Link the “pick my solar” logo to http://pickmysolar.com/
2. Blog comments
- Make sure your theme follows the WP settings for “Discussion Settings”.
- Users must be registered and logged in to comment.
- Comment must be manually approved.
3. Page text header and page description content should not be dependent on class name, they should also work regardless of CSS class. Use H2 tag for the header while p tag for the page description.
4. Search
- Exclude pages Solar Journey, Case Study, 60 in 60, Workshop, FAQ, and Blog from being searchable.
- Search result should be split into 2 columns and categorized by section. Refer to 01a-search.png for reference.
- Filter arrow should be replaced by filter icon.
5. Make sure all content are editable in WP Admin and no hardcoded content in the template files.
6. Remove any not needed elements from the base theme that are not shown in the storyboard.
7. Implement consistent hover effects on nav, links, and buttons.
8. Navigation
- The sub-navigation should be expanded if an active nav has child/sub navigation items.
- Implement active nav on current page and current ancestors.
9. Content - update content to reflect the content from the provided storyboard.
10. For reference on the backend functionality, custom post types, and custom fields, please refer to the previous challenge.
11. Base Theme
- Create new CSS file and do not use the CSS file of the base theme.
- You can re-use and update the existing PHP template files OR create new one but make sure to remove unnecessary files when you create new one.
- You can re-use update existing JS files.
11. Deployment Guide - Update and polish the deployment guide.
Pages:
1. Home page
- Refer to 01-homepage.png
- The whole item on each tile should be clickable just like in the provided theme. Make sure to follow the height in the provided storyboard.
- Tile title and description should be located at the bottom and height should be auto adjusted regardless of the length of the its content.
- Background of each tile should come from WP Admin and not from CSS file. This functionality is already been built in the provided wordpress theme.
2. Solar Journey
- Refer to 02-the-journey.png
- This is a page for listing custom taxonomy of the Solar Journey custom post type.
- Each tile should have the background image, title of the book, and description. The whole tile should be clickable.
- Background of each tile should come from WP Admin and not from CSS file. This functionality is already been built in the provided wordpress theme.
2.1. Book page
- Refer to 03-book.png
- This is a taxonomy of Solar Journey custom post type.
- Each tile should be clickable.
- Background should come from WP Admin and not from CSS file. This functionality is already been built in the provided wordpress theme.
- Remove “Book selected :” text from the header, just display the title of the book taxonomy.
- “Next video” and “Previous video” should be placed underneath sub-header, just above a thin line. Should not be buttons. Instead should be blue underlined text.
- Each video block should have a title along with a description.
2.2. Solar Journey Single/Details page
- Refer to 04-solar-journey-single.png
3. 60 in 60
- Refer to 05-60in60.png
- This is a page for listing the posts under 60 in 60 custom post type.
- Background of each tile should come from Youtube API based on the video ID and not from CSS file. This functionality is already been built in the provided wordpress theme.
3.1. 60 in 60 Single/Details page
- Refer to 06-60in60-single.png
4. Workshop
- Refer to 07-workshop.png
- This is a page for listing the posts under Workshop custom post type.
- Background of each tile should come from Youtube API based on the video ID and not from CSS file. This functionality is already been built in the provided wordpress theme.
5. Blog
- Refer to 08-blog.png
- The image on the left side behind the date is the Author photo.
- Remove unnecessary elements.
- Add “Recent Comments” widget in the sidebar.
5.1. Blog Single
- Refer to 09-blog-single.png
5.2. Archive page
- Archive pages including the Author, Date Archives, and Tags will have similar layout as the Blog main page.
6. Case Study
- Refer to 10-case-studies.png
- This is a page for listing the posts under Case Study custom post type.
- Background of each tile should come from WP Admin and not from CSS file. This functionality is already been built in the provided wordpress theme.
6.1. Case Study Single/Details page
- Refer to 11-case-studies-single.png
7. FAQ
- Refer to 12-faq.png
- This is a page for listing the posts under FAQ custom post type.
7.1. FAQ Single/Details page
- Refer to 13-faq-single.png
Wordpress:
- version 4.3.1
- use the provided plugins and wordpress framework.
HTML5:
- HTML should be valid HTML5 compliant.
- Provide comments on the page elements to give clear explanation of the code usage. The goal is to help future developers understand the code.
- Please use clean INDENTATION for all HTML code so future developers can follow the code.
- All HTML code naming should not have any conflicts or errors.
- Element and Attribute names should be in lowercase and use a "-" or camel naming to separate multiple-word classes (i.e.. "main-content", or "mainContent)
- Use semantically correct tags- use H tags for headers, etc. Use strong and em tags instead of bold and italic tags.
- No inline CSS styles- all styles must be placed in an external stylesheet.
- Validate your code- reviewers may accept minor validation errors, but please comment your reason for any validation errors. Use the validators listed in the scorecard.
CSS3:
- Use CSS3 Media Queries to load different styles for each page and don't build different page for different device/layout.
- You are allowed to use Bootstrap for this challenge.
- Provide comments on the CSS code. We need CSS comments to give a clear explanation of the code usage. The goal is to help future developers understand the code.
- Please use clean INDENTATION for all CSS so developers can follow the code.
- All CSS naming should not have any conflicts.
- As possible use CSS3 style when create all styling.
- Use CSS to space out objects, not clear/transparent images (GIFs or PNGs) and use proper structural CSS to lay out your page.
- Only use table tags for tables of data/information and not for page layout.
Javascript:
- All JavaScript must not have a copyright by a third party. You are encouraged to use your own scripts, or scripts that are free, publicly available and do not have copyright statements or author recognition requirements anywhere in the code.
Submission Guidelines:
- Wordpress Theme source code that includes PHP template, CSS, JS, and Images files including all the required plugins.
- Sample data and Deployment guide.