Challenge Overview
Challenge Overview
Topcoder is in the process of creating an updated version of its marketing site. We are happy to bring challenges to our community to help us build this component based website.For this challenge, we’re looking forward to create a maintainable wordpress theme using the provided frontend files.
Project Overview
The goal of this new version is to make a component based website that are reusable, clean, and easy to maintain.The objective of this challenge is to build the backend requirements and apply it to the frontend pages of a WordPress theme with the features outlined below.
Requirements:
1. Grid Framework/Plugin- we are going to use the plugin Page Builder by SiteOrigin to define the grid layout of the page post type content body
- each cell will use widget (built-in and custom) to display different type of content
2. Templates
The following are the basic template requirements, these are the required but your are not limited to only these.
a. Page
- this will be the index.php
- the home page and most of the pages will use this template
- the composition of this page layout will be header, footer, and the content
- the content body will be populated with widgets via the Page Builder
- logos in the header and footer should be uptable in WP Admin (wp customizer)
- navs (and sub menu) in the header and footer should use wp menu
- search in the header should be functional
b. Search Result
- this will be the search.php
- see the provided search-result.html for reference
- the “Application Design” title is a sample search string, this should reflect the actual search string
- Left side list are unique top most ancestor pages of the result items, if result item is a blog post, then it will belong to “Blog” item
- Clicking any of the items on the left will update the search result items.
- Right content is the actual search result list, each item should be linked to their respective pages/posts.
- “Load More Result” button will fetch and display additional search results via AJAX
c. Blog - Home
- this will be the home.php
- see the provided blog-home.html for reference
- Top part will display the most recent posts
- “View All New” button will lead “Blog - All New Posts” page
- Most Popular section are posts that has the most viewed, create a function that will create/update post views count and store it as a custom field for each post. No need to use plugin for this.
d. Blog - All New Posts
- this page will display all the recent posts, see blog-all-new.html for details
- create a custom template page that is specific for this use
- use style from style-1 to style 4 in series
- “Load More Articles” button will fetch and display additional posts items via AJAX
e. Blog - Post
- this will be the single.php
- see the provided blog-post.html for reference
- “123” count on the left side indicates total number of share the post is shared across social sharing sites, you can use plugin similar to this to show only share count
- “Share” icons: implement an AddThis social sharing plugin
- “Related Post”, implement this based on tags or maybe use a plugin that match posts based on their content (e.g. Contextual Related Posts)
f. Blog - Category
- see blog-category.html for details
- this will be the category.php, this template will only display blog posts from the selected category
- the tab below the main navigation should use wp menu
- “Innovation Tales” is a category title
- text below the category title will be the category description
- “Load More Articles” button will fetch and display additional posts items via AJAX
g. Blog - Author Profile
- this will be the author.php
- see the provided blog-profile.html for reference
- Name, this will use the user’s display name
- Role/Work Description, create a custom user field to be used for this purpose
- Description, use the built-in wp Biographical Info
- Links, this will display social sites of the user starting from website up to Facebook profile URL
-- if a field is empty, do not display it
-- if all fields are empty, do not display them all including the text “Links”
- Photo, use the user’s profile picture
- My Posts, display all the posts that the user have authored
h. Customer Story
- this will be the template for the single file of a custom post type (see Custom Post Type requirements below)
- this template will have 3 variations (see customer-story.html, customer-story-2.html, and customer-story-3.html)
- the 3 variations are the carousel, photo gallery, and video
- the analytic text at the bottom of customer-story-3.html should be available to all variations but optional
- “App Design & Development” text is from the custom taxonomy
- Count and Share are similar to the one in Blog - Post
- “Related Customer Stories” is also similar to the “Related Posts” of Blog - Post template
3. Custom Widgets
- build the components outlined below as custom wordpress widgets
- widgets should be built in compliance with SiteOrigin’s widgets bundle
- each widget/component have their own variations, see each details below
- study the provided frontend files for the code markup of each components and always ask questions in the forum for clarifications
a. Tabs
- this widget works like a navigation menu instead of a real “tab”
- tab items will come from WP Menu
- Admin should be able to select from the available menu
- nav items when clicked will open the page in a normal way instead of using AJAX
b. Hero
- there will be three variations of the hero layout, see hero.html for details
- there should be an option for title, description, call to action button (URL and label with default text), and background image upload
- there should be an option on what layout to use
c. Quotes
- see quotes.html for the 2 different variations of this widget
- there should be an option on what variation to use
- depending on what variation to use, it will display their corresponding fields
- if selected option is Carousel, it should have unlimited number of fields for company name, quote, image upload, and person’s role
- if selected option is Full, it should have 1 set of fields for quote, name, image upload, and person’s role
d. Feature
- see feature.html for the details of this widget
- there should be fields for title, description, and call to action button (URL and label with default text)
- there should be additional fields for youtube video ID and optional image upload
- if there is uploaded image, that image will be used as video thumbnail
- there should be an option to use Statistics or Carousel
- if selected option is Statistics, there should be additional fields of up to 3 sets for icon select (see the list of available icons in _icons.scss file) , title, and short description
- if selected option is Carousel, there should be unlimited number of field for content
e. Stories
- see stories.html for the different options for this widget
- there should be selection for options (Gradient Background, Gradient Top Bar, Solid Top Bar, and Featured)
- there should be fields for image upload, title, description, call to action button (URL and label with default text)
- optionally, there should be fields for footer text with or without link
- there should be selection for style (Style 1 up to Style 8)
f. Content Box
- see content-box.html for different variations of this widget
- there should be selection for layout (Full Width - Wide Image, Full Width - Half Image, 6 column, and 4 column)
- if selected layout option is 4 column, there should be additional field (checkbox) if the content box will add solid color bar
- there should be fields for image upload with image mask style selection (Style 1 up to Style 8), title, content (ideally a wysiwyg), call to action button (URL and label with default text), and icon selection with optional checkbox if the icon is with “step flow”
- the “step flow” checkbox is to show the arrow (see the “Content box flow with icon” section for details)
g. Solutions
- see solutions.html for details
- there should layout selection (Large or Small)
- there should be fields for icon selection, title, description, call to action button (URL and label with default text)
- if the selected layout is Large, there should be additional fields for Duration, Deliverables, PDF file, and Youtube Video ID (if any of these are empty, they should not show in the frontend)
h. Banner
- see banner.html for details
- there should be fields for text, call to action button (URL and label with default text), style selection (Style 1 to Style 4), and background image upload
- if there’s no uploaded background image, use the gradient color background
- if there’s is uploaded background image, use the selected style as its image mask
- there should be an option for the placement of the button (Inline or Bottom)
i. Accordion
- see the accordion items under the page how-it-works-faq.html
- for this widget, we need fields for the title (question) and content (answer)
- no need to make this unlimited fields
j. Video
- see about-community.html on the video section for details
- there should be a field for Youtube Video ID, a checkbox to implement or not an offset margin top
k. Colored Headings
- see about-community.html on the stat section below the video for details
- there should be a field for the text heading and selection for its theme color
l. Timeline
- see the "A Short History of Crowdsourcing" section in about-crowdsourcing.html for details
- there should be unlimited sets of fields for the year and description
m. In The News
- see about-in-the-news.html for details
- there should be field for selecting custom taxonomy of the “In The News” custom post type and a “View All…” button (URL and label)
- there should also be a field to limit the number of items to show
- if the limit value is -1, it means it will show all the items with the selected taxonomy
- if the limit value is not -1 and if the total number of posts with the selected taxonomy is more than the limit value, the button will be displayed
- the content of each item/post will come from the post of the custom post type
- the button “Read More” should be opened in a new window (_blank)
4. Custom Post Types
a. Customer Stories
- maintain url slug of 'about-topcoder/customer-stories'
- add custom fields as necessary to support the options and templates mentioned above in “2. Templates > h. Customer Story”.
b. In The News
This will be for external links. Ideally, we need the following:
- title
- custom taxonomy for the category (this should not appear to the category in the normal post)
- custom field for external URL
5. Demo Pages
The purpose of this requirement is to demo the different widgets/components within the SiteOrigin’s page builder plugin.
You need to create all the page under the Prototype Pages from the provided Demo files.
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 the scripts from the provided files, 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
- IE 11+- Latest Chrome on Mac and Windows
- Latest Safari on Mac and Windows
- Latest Firefox on Mac and Windows