Challenge Overview
Welcome to SunShot - SolarBook - WordPress Base Theme 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.
We don’t have storyboard design to follow but we have wireframe of the layout that must be follow. For this challenge, the goal is to create the based theme and all the wordpress functionalities 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
General Requirements:
- Sidebar navigation should utilize the built-in menu of wordpress
- Page layout should be responsive. Our focus for this challenge will be on desktop browsers (medium and large devices), but do not limit them to these sizes, we are going to support full responsive layout (mobile and tablet) in the next challenge. Since we are using Bootstrap, please refer to http://getbootstrap.com/css/#grid for reference.
- Use Bootstrap’s “.container” class for the page content width.
- All pages content should be editable in WP Admin. No hardcoded content in template files.
- Images should be considered as content, make sure they are not css backgrounds nor hard coded in template files.
- Use correct template file name based on WordPress Template Hierarchy. That is front-page.php for the homepage, page-$slug.php or custom template for page type, single-$posttype.php for custom post types single pages, etc.
Pages:
1. Overall pages
- Link the logo to homepage.
- Login link - use deadlink for now.
- Search - implement auto suggest dropdown functionality. Use https://twitter.github.io/typeahead.js/ library for this functionality.
- Left Sidebar should indicate active state. This should have a feature of expand/collapse of child nav items.
- All video image thumbnail will come from Youtube API based on the Video ID entered in each post articles, please get the high quality image.
- Listing of posts or custom posts on their respective pages are sorted by the most recent first.
2. Homepage
- Header should be editable, this can come from the_content.
- Main content will be tiles. Follow the tile layout in the provided wireframe. The assigned post type per type is not hardcoded in the template, this should be controlled in the Theme’s Option (see Theme Option requirements below for details).
- Each tile will display the corresponding page title, featured image as tile background, and a short description that should come from a custom field on that particular page.
- The whole tile should be linked to the their respective post type main page as shown in the wireframe.
3. Solar Journey
- Please refer to #2 in the provided wireframe.
- Please refer to the Solar Journey custom post type below for the feature requirements of this page and its sub pages/post items.
- Header and Sub-header are text editable from the page content, this can come from the_conent of this page.
- This will list all books custom taxonomy under the Solar Journal custom post type with image and description.
- Clicking a book will lead to Book taxonomy page.
3.1. Book Taxonomy page
- Please refer to #3, #4, and #5 from the provided wireframe.
- This taxonomy page will list all Solar Journal post that have the particular book assigned organized by chapter (Ex. Book 1, Book 2, etc.. The “header” in each section indicates the location of the chapter).
- Clicking this thumbnail image and a “Read More” link will lead to the Solar Journal details page.
- Clicking Prev or Next button will lead to the Previous or Next Book taxonomy page.
- If no Previous book taxonomy page, the button should be disabled. Same thing applies to the Next button when there’s no next book taxonomy page.
3.2. Solar Journal Details/Single page
- Please refer to #6 from the provided wireframe.
- Prev and Next link will navigate through solar journal posts within the chapter without having to go back.
- This page will have embedded youtube player along with the title and content.
4. 60 in 60
- Please refer to #9 screen in the provided wireframe.
- Please refer to “60 in 60” custom post type below for the feature requirements of this page and its post items.
- This page will list all post of “60 in 60” post types organized by category.
- Top “Header” and “Sub-header” are text editable from the page content, this can come from the_conent of this page.
- The “header” in black background indicates the category name.
- Clicking the thumbnail or “Read More” link on each post leads to the 60 in 60 details page.
4.1. 60 in 60 Details/Single page
- Please refer to screen #10 in the provided wireframe.
- Prev and Next buttons will navigate through the previous and next post within this custom post type regardless of category.
- This page will have embedded youtube player along with the title and content.
5. Workshop
- Please refer to screen #11 from the provided wireframe.
- Please refer the to Workshop custom post type below for the feature requirements of this page.
- Top “Header” and “Sub-header” are text editable from the page content, this can come from the_conent of this page.
- This will list all post under Workshop post type.
- Each post item contains image thumbnail and description.
- The whole part of each items are clickable.
- When an item is clicked the video will be automatically played at the main player located at the top of the page.
- By default, this main player should play the most recent post for this custom post type.
6. Blog
- Please refer to screen #12 from the provided wireframe.
- List down all post from the regular post type that is already built-in in wordpress.
- List only 10 post per page and add pagination at the bottom. Please use the standard Bootstrap pagination markup.
- Each post item should have the standard title, content (preview with read more link), featured image, author, category, tag, post date, and number of comments.
- Author image and date are on the left side. No need to create the vertical line.
- After the title, display the Author name, Category (with link to category page), Tags (with link to tag page), and number of comments.
- Use excerpt to display the preview of the content and add “Read More” text that will link to the post details page.
- Link also the title to the post details page.
- The right sidebar will have the standard wordpress archive, most recent, and tags widgets.
6.1. Blog Details/Single post
- Please refer to screen #13 from the provided wireframe.
- Top part displays the featured image followed by post title.
- After the title, show the post meta (author, date, category, and tags) in smaller text.
- After the post meta, show the full article content.
- The right sidebar will be similar to the main blog page.
6.2. Category page
- Similar layout and functionality as with the Blog main page but it will only filter or list the post with the corresponding category.
6.3. Tag page
- Similar layout and functionality as with the Blog main page but it will only filter or list the post with the corresponding tag.
6.4. Author page
- Similar layout and functionality as with the Blog main page but it will only filter or list the post of the corresponding author.
7. Case Study
- Please refer to screen #14 from the provided wireframe.
- Please refer to the Case Study custom post type below for reference on the required features of this post.
- Image thumbnail and post title are links that leads to the Case Study detail post.
- Use excerpt to display a preview of content.
- Add “Read More” link that is also linked to the Case Study detail post.
7.1. Case Study Details/Single post
- Please refer to screen #15 from the provided wireframe.
- This will display the featured image at the top followed by title, post meta, and the full content article.
8. FAQ
- Please refer to screen #16 from the provided wireframe.
- Please refer to the FAQ custom post type below for reference on the required features of this post.
- Top “Header” and “Sub-header” are text editable from the page content, this can come from the_conent of this page.
- Each questions are organized by specific category. The “header” part on each section indicates category name.
- Under each category name will list all the questions/post under the specific category.
- Each questions are linked to their details page.
8.1. FAQ Details/Single post
- Please refer to screen #17 from the provided wireframe.
- Top part will display the question and answer (title and content) of this post.
- Bottom part will display the category name and all the post under this category excluding the current displayed post.
Required Custom Post Types:
1. Solar Journal
- This post type should have standard title and content (editor).
- There should be custom field for the Video ID (Id that comes from youtube).
- This post type should also have custom taxonomy for Book. This taxonomy should have the capability of entering description and featured image to use.
- Another custom taxonomy for this post type is Chapter. This will work like a category. Example of a chapter are Book 1, Book 2, etc...
- Each post under Solar Journal should have assigned book and chapter.
- Articles/posts under this custom post type should be searchable in the
2. 60 in 60
- This post type should have standard title and content (editor).
- There should be custom field for the Video ID (Id that comes from youtube).
- This post type should support category. The categories appears on this custom post type should not appear in other post type.
3. Workshop
- This post type should have standard title and content (editor).
- There should be custom field for the Video ID (Id that comes from youtube).
4. Case Study
- This post type should have standard title, content (editor), and featured image.
5. FAQ
- This post type should have standard title, content (editor), featured image, and category.
- The title will serve as the question while the content will serve as the answer.
- The categories appears on this custom post type should not appear in other post type.
Required Theme Options:
1. Logo
- need to have the ability to upload logo file.
2. Homepage Tiles
- This will be a group of theme options with 6 dropdown fields.
- The 6 dropdown fields corresponds to the number and position of the tiles in the homepage.
- The options of each dropdown fields are the different post types except for Page.
- The options should be automatically populated based on available post type and custom post types.
Browser Compatibility:
- IE9+
- Latest Google Chrome (Windows & Mac OS)
- Latest Safari (Windows & Mac OS)
- Latest Firefox (Windows & Mac OS)
Wordpress:
- version 4.3.1
- Advance Custom Field is the recommended plugin for Custom Fields.
- Redux framework in case you need to use theme options.
- You are allowed to plugins and/or frameworks that you think is best to use as additional or alternate to the plugins/framework mentioned above.
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.