Challenge Overview
Project Overview:
Welcome to BrandX Wordpress Theme Challenge! The goal of this challenge is to convert the attached HTML5 prototype to a fully functional, responsive Wordpress theme.
As part of this challenge you will need to document all PHP/HTML/CSS/JavaScript code, etc. We need a clear explanation of the code to make future development easier and represent a clear picture to the client.
Competition Task Overview:
The main task of this challenge is to transform the provided HTML5 prototype into a responsive Wordpress theme. Your theme must work properly in all required browsers and on mobile devices, and follow Wordpress theme development standards.
Your Prototype must match the "look and feel" of the provided HTML5 prototype. All HTML5 and CSS3 should be standardized, validated and follow best practices. Images should be optimized for the web JPGs, GIFs and PNGs) and used appropriately.
Create your theme according to the WordPress template heirarchy http://codex.wordpress.org/Template_Hierarchy.
Page Requirements
- The news and blogs should be configurable in wordpress admin.
- View All links are dead links.
- User must login first
- Navigation and Menus should be configurable in wordpress admin.
Final Submission Guidelines
A WordPress Theme is a folder containing all the images, css, javascript, and PHP files that describe the appearance and layout of a WordPress blog. The PHP files have a standard naming convention for page types, and contain and use template tags to call for specific information from the blog's database, such as a post title, the post date, it's categories, and more.
A proper understanding of the way WordPress selects template files to display the various pages on your site is essential. If you seek to customize an existing WordPress theme, this article aims to help you decide which template file needs editing.
Theme Build References:
Tutorial- Building Custom WordPress Theme:
http://www.webdesignerwall.com/tutorials/building-custom-wordpress-theme
http://www.wpdesigner.com/2007/02/19/so-you-want-to-create-wordpress-themes-huh/
The WordPress Codex (a guide to template tags)
http://codex.wordpress.com/
Wordpress Developers Toolbox
http://www.smashingmagazine.com/2008/09/15/wordpress-developers-toolbox/
TECHNOLOGY GUIDELINES:
1. Wordpress
- Provide ALL installation step by step, create details notes needed for your WordPress Theme
- Your pages must match the colors and structure of the provided storyboards.
- Ensure your pages display correctly in all browsers and on mobile devices. It is your responsibility to make sure the pages display correctly.
- Ensure you submission clear of HTML and CSS Validation error and warning.
- Create a Theme based on the provided Storyboard PSDs and existing WordPress Theme.
- All content (headings, text, etc...) should be dynamic and editable via the WordPress Admin backend.
- DO NOT just create static HTML/PHP templates and have them served up by WordPress - you much create the Admin functionality
- Only use custom fields when appropriate. Do not over use them. It is advisable to use Custom Field Template plugin if in case you use custom fields. We want it to be easy for a non-technical editor to update content on the pages, so as much as possible the pages that are relatively simple content should be editable by updating the page content.
- A user should be able to edit the site without the need of an Super Admin privileges
2. HTML5
- Provide comments on the page elements to give clear explanation of 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
- Make sure all HTML files pass Validation without Error/Warning.
3. CSS3
- The design should work with fluid/flexible nature, so the prototype supports both Portrait and Landscape orientation
- Provide comments on the CSS code, we need CSS comments to give clear explanation of the code usage. The goal is to help future developers understand the code.
- Please use clean INDENTATION for all CSS so future developers can follow the code.
- All CSS naming should not have any conflicts
- Make sure all CSS files pass validation without Error/Warning.
- Use CSS3 Media Queries to load different styles for each page and don't build different page for different device/layout.
4. JAVASCRIPT
- Provide comments on the JavaScript code, JS codes to give clear explanation of the code usage. The goal is to help future developers understand the code and know what needs to be developer further.
- Please use clean INDENTATION for all JavaScript code so future developers can follow the code.
5. IMAGES
- As possible using background color properties, instead of repetition usage of background based image.
- Use sprites technique for the image slicing. Page reference
FOR REVIEWERS:
When reviewing this prototype, Reviewer should look at:
- There is customization involved within this Challenge - please document your Theme and how to install it for the Client and the Reviewers.
- Does the Theme match the Storyboard design?
- Does the Theme work well in all the required browsers?
- Does the Theme work well on mobile devices?
- If a Client was to implement this Theme - did it work at first without major Final Fixes?
- Did the submitter provide adequate installation notes?
- Overall - would the client be able to use this Theme with some minor fixes?
Browsers Requirements:
- IE 9+ Browsers on PC - (use HTML5shiv to support IE9 version)
- Latest Safari Browser on MAC and PC
- Latest Chrome Browser on MAC and PC
- Latest Firefox Browser on MAC and PC
- Latest Chrome on iPhone (retina & non) and Android
- Latest Safari on iPhone (retina & non)