Healthy Islands Vision Responsive Website Wordpress Theme Challenge

Welcome to the Healthy Islands Vision Responsive Website Wordpress Theme Challenge! We already build the prototype pages and we need you to convert those pages into WordPress themes.

Final Submission Guidelines

The new wordpress site will consolidate multiple Pacific Health web sites under a single portal.  It is envisioned that the site will become the principal source of information for Pacific health; data, information and research dissemination; be a one stop shop for Pacific countries to follow up on matters related to regional health governance and the implementation of the different components related to the Healthy Islands Vision.

There will be a parent site and child sites. Some section of the parent site will show information from the child sites. Your task is to create a wordpress theme that can be used by the parent and child sites OR create a separate theme for the parent and for child sites.

Important Rules:

1. Create the WordPress template files based on the HTML prototype files and build the pages using those created templates.
2. Follow WordPress hierarchy structure. We recommend to use named templates for pages so that we can re-use them on other future page.
3. Use Wordpress Customizer for specific theme options.
4. There should be no hardcoded text labels in the theme files, all of them should be editable via WP Admin.
5. Use Advanced Custom Field plugin ( https://www.advancedcustomfields.com/ or ACF Pro ) for custom fields or suggest an open source plugin that will still serve the purpose.  Please note that you need to organize the custom fields to make them presentable in WP Admin (ex. use of tabs).
6. Extensive documentation is required on how to manage and deploy the theme(s) and page configurations.
7. Each site (parent and child sites) should be installed individually and do not use multi-site setup.

Options Requirements

1. Common
- Logo upload
- Option to have text field and the value should be displayed beside the logo
- Footer copyright text
- Privacy & Terms link urls

2. Parent site
- A way to add child sites 
- Footer social media urls

3. Child site
- Page header - upload image
- Select footer layout, there will be 3 options (see pacific-ncd_home.html, pphsn_home.html, and sscsip_home.html for reference)
 

Custom Post Type Requirements:

1. Our Members
- this should have fields for the title and content.
- this is for parent site only.

2. Resources
- this is for child sites only
- should have fields for the title, content, featured image, and custom field for upload PDF document.

3. News
- this is for child sites only
- use a plugin for this 

4. Team
- this is for child sites only
- required fields are outlined below.
 

Template Files and Page Requirements:

0. Overall
a. Top navigation
- use wp menu

b. Search
- Implement search functionality

c. Top Footer section
- This should use widget on each column.
- The logo of the child sites is not a widget, the logos and links can be fetch from the entered Child sites in options.

d. Footer
- should be able to set copyright text via theme’s option
- should be able to set footer links via wp menu
- should be able to set social media account URL’s via theme’s option or via wp menu.

e. Breadcrumbs
- implement this feature either using plugin or your own code.

1. Parent: Frontpage template
Reference: parent_home.html

a. Top section carousel
- Content will come from the recent posts aggregated from the child sites. This can be done via WP API.
- Read More button should link to its details page (in child site) and not the parent listing page.

b. New & Events section
- Should have an option to set the content automatically or manually.
- If automatic, it will fetch the most recent post from the child sites.
- If manual, there should be custom fields for title, thumbnail, and link

c. Highlights section
- This will have similar options and fields as with the “New & Events” section.

d. More News & Event button 
- Leads to the News & Events page

e. Our Work section
- There should be a way to select a child site or a page from the parent site, ideally via custom fields.

f. Our Members section
- Use custom fields (not just one but individually) to set info for the different part of this section.

2. Parent: Search Result template
Reference: search_result.html
- implement search result functionality with pagination
- search scope is global including post from the child sites.

3. Parent: News & Events page template
Reference: parent_news-events.html 

a . content
- this page loads the parent posts aggregated from the child sites.
- by default it will load 8 recent items
- pagination is done via “More News & Events” button that when engaged will load the next 8 recent items via AJAX.
- Comments count should come from the number of comments from the details page.
- Minutes read should be a custom field where we can set the number of minutes.
- The “heart” icon works like a like, you can either use custom field and programmatically update this whenever a user clicks on the heart icon or use a post like system plugin.

b. Search 
- this popup box will just search the news & events
- the result will be displayed also on this page either via AJAX or via page reload.

c. Filter 
- this acts like a search for news & events but with field options to act as filter.

d. Sort 
- this will sort the listed news & events.

4. Parent: Our Work page template
Reference: parent_work.html

a. top image 
- this will utilize the built-in featured image field
b. left text content 
- this will be via the built-in content editor

c. right side links 
- these are are custom fields (repeater) for external links
- each link should have a field for label and for url

d. bottom content 
- there should be a WYSIWYG editor that will serve as the section heading/title.
- there should be a repeater field for adding PDF content. Each should have image thumbnail, title, subtitle, and WYSIWYG field for its description.

5. Parent: Our Members template
Reference: parent_members.html

a. top image
- this can be set together with the content or via the featured image field.

b. stats/figures (countries, territories, participants)
- this will be repeater fields with sub-fields of label and value.

c. right side
- this will list down all the member countries pulled from the member post type.

6. Parent: Contact Us template
Reference: sscsip_contact-us.html (except for the header and footer)

a. map
- this is a google map custom field

b. contact form
- use available plugin (ex. Contact Form 7)

c. contact information
- all info here should have their own respective custom fields

7. Child Site: Frontpage template
References: pphsn_home.html, sscsip_home.html, and pacific-ncd_home.html
- the layout of this template will be configurable where admin can select predefined sections
- the location or order of each sections can be interchangeable by the admin
- use blocks to add section or group of fields that is only visible when a particular section is selected.
- the following are the sections:

a. Carousel
- should have ability to add slides
- each slide should have custom fields for the image background, text (title, subtitle, description, etc…), and button (label, url, and target to open the link in new window or same window).
- if particular field is empty, its element should not be rendered.

b. Explore More - Grid
- see sscsip_home.html for reference
- each column should have fields for thumbnail, title, description (in pphsn_home.html description is visible), and page selection to link (not text field).

c. Explore More - List
- see pacific-ncd_home.html for reference
- have the same fields as with the Grid version but this time for 4 items.

d. Latest News
- see sscsip_home.html for reference
- this will pull and display the recent news (this is not a custom post type but the built in post type with “news” category).
- clicking “More News” will load the next 3 recent news via AJAX

e. Resources
- see pphsn_home.html for reference
- this will pull and display the 3 recent resources (custom post type)
- each item leads to their respective resource details page.

f. News and Events
- see pphsn_home.html for reference
- this will display 1 upcoming event and 1 recent news.
- the data will come from the built in post type- there should also custom fields for the right side title and links.

8. Child Site: News Details (single template)
- see sscsip_news-detail.html for reference
- image above is from the featured image
- content is from the built-in content editor
- add comment form and comment list at the bottom of the page right after the content, the style should follow the overall look and feel of the theme.

9. Child Site: Resources Details (resources single template)
- this will have similar layout as with the News Details template but without the comment form and comment list.

10. Child Site: Left Sidebar page template
- see pphsn_members.html for reference
- left sidebar will utilize the wp menu and there should be a custom field to select the menu
- right content will be from the built in content editor.

11. Child Site: News list template
- see sscsip_latest-news.html for reference
- this will be the blog list template
- “More News” will load additional posts via AJAX
- each item links to their respective News Details page (item #8 above).
- right sidebar archives leads to their respective archive page.

12.  Child Site: Archive
- this will have similar layout as with the News list page (item #11 above).

13. Child Site: Team template
- see sscsip_team.html for reference
- this will be a custom post type
- each post should have a title (name) and featured image
- and with custom taxonomy of group (“Clinical Advisors” or “Development and Coordination Team”)
- also with custom fields of role, affiliation, contact infos, and biography.

14. Child Site: Contact Us template
- see sscsip_contact-us.html for reference
- this is similar to the parent contact us template (item #6 above).

15. Child Site: Search Result template
- this will have similar layout as with the parent search result template (item #2 above).
- search scope should be limited to the current site only.

16. Child Site: Regional Meetings template
- see pacific-ncd_regional-meetings.html for reference
- each column should have fields for title, background image, and link.
 

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 SCSS 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.
 

Browsers Requirements

- Mobile Browsers
- Tablet Browsers
- IE11 & IE Edge
- Chrome Latest Browser
- Safari Latest Browser
- Firefox Latest Browser