Challenge Overview
Welcome to the Deloitte Pixel(TM) - Anti-Corruption Education and Commitment Wordpress Theme Challenge! We already build the prototype pages and we need you to convert those pages into a WordPress theme.
The site will be launched on December 1st at the international Anti-Corruption Conference (IACC) and the timeline for this challenge is extremely tight.
Jump in and ask questions now!
Final Submission Guidelines
Create the WordPress template files based on the HTML prototype files and build the pages using those created templates.
Important Rules:
1. Use Wordpress Customizer for specific theme options.
2. Use Advanced Custom Field plugin (https://www.advancedcustomfields.com/) for custom fields outlined below or suggest an open source plugin that will still serve the purpose. The custom fields described below assumes that you will use the Advanced Custom Field plugin. Please note that you need to organize these custom fields to make them presentable in WP Admin (ex. use of tabs).
3. Extensive documentation is required on how to deploy the theme and page configurations.
Overall Page Requirements:
1. Logo
- Guide Reference: reference_home.png labelled #1
- use Wordpress' built-in the_custom_logo() function to upload the logo file. https://developer.wordpress.org/reference/functions/the_custom_logo/
- Please note that there should be a mobile version of logo that should be uploaded as well. Please add a way to upload this mobile logo file within Wordpress Customizer's Site Identity section.
2. Navigation Menus
- use wp_nav_menu and theme_location features of wordpress
- there will be 2 locations, Header(reference_main_nav.png label#1) and Footer(reference_home.png label #20).
3. Map
- Guide Reference: reference_home.png labelled #15
- Add a way to upload an image via the Customizer section.
4. Keep Me Updated
- Guide Reference: reference_home.png labelled #18
- Email address entered on this section should be saved within the wordpress.
- You can add the email as a user with Subscriber role.
5. Footer
- Guide Reference: reference_home.png (label #19 & #21)
- Add section in WP Customizer to have fields to upload logos (label #19) and copyright text (label #21)
6. Breadcrumbs
- Guide Reference: reference_what_is_bot.png labelled #2
- This should be implemented automatically based on the current displayed page.
7. Search
- Global search will show the result in a new page (search result page). There is not prototype page for this search result but we can use the list part layout of the Resource page to layout the page.
Template Files and Page Requirements:
1. Home page
- See prototype's home-page.html for reference.
- Utilize front-page.php as the template file.
- Refer to reference_home.png for the labels outlined below.
Top section
- Title (label #2) - this will be a text custom field.
- Description (label #3) - textarea custom field.
- Button (label #4) - page link field to select the page that this button will going to link.
- Stats (label #5) - text field for the titles and another text field the stat numbers for each stat numbers ( the total number of stats are 5).
What is Beneficial Ownership section
- Heading (label #6) - text field(s).
- Youtube video source (label #7) - text field to enter the source of the video.
- Image (label #8) - Image upload field.
- Intro paragraph (label #9) - wysiwyg editor custom field.
- Button (label #10) - page link field to select the page that this button will going to link.
Take Action section
- Title (label #11) - text field(s).
- Description (label #12) - wysiwyg editor custom field.
- Actions (label #13) - this section content will come from the child pages of "Take Action". Use the child page title and featured image as its icon.
- Button (label #14) - page link field to select the page that this button will going to link.
Map section
- get the uploaded image from the WP Customizer (outlined above in Overall section).
News Update section
- Title (label #16) - text field(s).
- News ticker (label #17)
-- this will get the data from the regular Post type.
-- use the built-in fields (category, post title, post content, and date time) except for the link.
-- the link will be an external link and there should be a custom field to enter it.
2. What is BOT page
- See prototype's what-is-bot.html for reference.
- Create a new template file for this page (ex. template-what-is-bot.php).
- Refer to reference_what_is_bot.png for the labels outlined below.
Top section
- Title heading (label #1) - text field(s).
- Top paragraph (label #3) - use the built-in content editor.
- Column paragraph (label #4) - wysiwyg editor custom field.
Bottom section
- Button (label #7) - page link field to select the page that this button will going to link.
Tab section
- Tab title (label #5) - text field. Each tab will have its own field.
- Business Case for BOT tab content (label #6) - wysiwyg editor custom field.
- Global Action on BOT tab content
-- Refer to reference_what_is_bot_global_action.png for this tab content.
-- Description (label #1) - wysiwyg editor custom field.
-- Timeline (label #2)
--- This should be a custom post type, changing/sliding the timeline should load the selected data via AJAX.
--- Month Year can be the title of the custom post.
--- Content can be the built-in content editor.
--- Bottom description (label #3) - wysiwyg editor custom field.
--- Government Action (label #4) - leave this as hardcoded for now.
--- Map (label #5) - get the same uploaded image from the WP Customizer (outlined above in Overall section).
- Issues Facing BOT tab content
-- Refer to reference_what_is_bot_issues.png for this tab content.
-- Content (label #1) - wysiwyg editor custom field.
3. Take Action page
- See prototype's take-action.html for reference.
- Create a new template file for this page (ex. template-take-action.php).
- Refer to reference_take_action.png for the labels outlined below.
- Title heading (label #1) - text field(s).
- Top paragraph (label #2) - use the built-in content editor.
- Actions (label 3)
-- This section content will come from the child pages of "Take Action". Use the child page title and featured image as its icon.
-- Button should be linked to their respective pages.
4. Take Action Detail pages
- See prototype's take-action-detail.html for reference.
- Create a new template file for this page (ex. template-take-action-detail.php).
- Refer to reference_take_action_detail.png for the labels outlined below.
- Make sure to create all the child pages of Take Action page.
Top section
- Title (label #1) - this is the page title.
- Content paragraph (label #2) - this is the page content via the built-in content editor.
Collapsable section
- There will be 2 items of collapsables with the following custom fields
- Title (label #3) - text field.
- Content (label #4) - wysiwyg editor custom field.
Commit Support buttons (label #5 & label #9) - page link field to select the page that this button will going to link.
Case Studies section
- There will be 2 items of case studies items with the following custom fields
- Title (label #6) - text field.
- Content (label #7) - wysiwyg editor custom field. Make sure that embedded images and videos will work. For the videos, there should be a shortcode that we can use so that the embedded video will be responsive.
Bottom Section
- Paragraph (label #8) - textarea field.
Sidebar Top section
- Title (label #10) - text field.
- Description (label #11) - textarea field.
- Button (label #12) - page link field to select the page that this button will going to link.
Sidebar Resource section
- Label #13
- There should be 3 fields to select a Resources custom post type. This custom post type is outlined below in Resources page.
Sidebar Take Action section
- Label #14
- This can be a textarea custom field that we can enter company name per line.
5. Commit Support page
- See prototype's commit-support.html for reference.
- Create a new template file for this page (ex. template-commit-support.php).
- Refer to reference_commit_support.png for the labels outlined below.
Top section
- Title (label #1) - this is the page title.
- Content paragraph (label #2) - this is the page content via the built-in content editor.
Form
- There should be a custom text field to enter a URL that will be use for form action.
- The form will send the post values to the URL entered on that custom post type.
- There should be a hidden field on the form that will hold the title of the Action Page where it came from.
6. Resources page
- See prototype's resources.html for reference.
- Create a new template file for this page (ex. template-resources.php).
- Refer to reference_resources.png for the labels outlined below.
- Create a Resources custom post type and list those post in this page.
- This custom post type should support title, content editor, category (custom taxonomy), post format, and featured image.
- Each post may need to have custom fields for file type, file size, and video length (time).
- Additional custom field is required for the external link or URL of the file to download.
- Make sure that the “video play” icon will show on the thumbnail of the post with video format.
Top Section
- Title (label #1) - this is the page title.
- Featured Resource (label #2) - There should be a way to select a featured resource, ideally in Theme Options (WP Customizer).
Search
- Label #3
- Searching a resource should update the resource list below the page (label #5).
- Category dropdown (label #4) - These are the categories or custom taxonomy of Resource custom post type.
- By default, there should be no selected category. Doing a search with no selected category will search all the resource post regardless of category.
- Doing a search with selected category will search resource posts that has those categories.
- Removing a selected category by either unchecking it from the dropdown or clicking the "x" icon should update the search result.
- If "clear all" is clicked or if all category are uncheked, it will update the resource list.
Pagination
- Label #6
- Make sure the pagination is also updated whenever the resource list is updated
7. About Us page
- See prototype's about-us.html for reference.
- Create a new template file for this page (ex. template-about-us.php).
- Refer to reference_about.png for the labels outlined below.
Top section
- Title (label #1) - text field(s).
- Content paragraph (label #2) - this is the page content via the built-in content editor.
- Column paragraph (label #3) - wysiwyg editor custom field.
Logos
- Label #4
- There should be a way to upload logo file and their corresponding links of up to 5 items.
- If there's a blank logo, make sure not to display it.
Contact Form
- Label #5
- This is a form that will send an email to a specific email address.
- You can use contact form 7 plugin for this.
Contact Info section
- Intro (label #6) - textarea field.
- Name (label #7) - text field.
- Contact info (label #8) - textarea field.
Code Requirements
HTML / HTML5 / PHP Template
- 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.
CSS
- Update the current SASS files if there's a need to update the CSS styles.
- Use Media Queries to load different styles for each page and don't build different page for different device/layout.
- Provide comments on the CSS code. We need comments to give a clear explanation of the code usage. The goal is to help future developers understand the code.
- All CSS naming should not have any conflicts.
- As possible use CSS style when create all styling whenever possible, avoid image usage.
- 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.
Wordpress Plugins
- Make sure all plugin are open source.
Images
- Images should be properly compressed while still having good visual quality.
- Please use best practice repetition usage of background based image.
- Please use sprites when using icons for your submission.
- Make sure your submission look sharp for Retina and Standard devices
Browsers Requirements
- Mobile Browsers
- Tablet Browsers
- IE11
- Chrome Latest Browser
- Safari Latest Browser
- Firefox Latest Browser