Trackster Blog Wordpress Theme Build

Project Overview

Welcome to the Trackster Blog WordPress Theme Build contest! The goal of this contest is to create a functional WordPress Theme of based on the provided wireframes and storyboards.

This contest is focused in creating the pages outlined below. Pages and Templates should be built according to the WordPress template heirarchy http://codex.wordpress.org/Template_Hierarchy.

Competition Task Overview

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, its categories, and more.

We want to leverage HTML5/CSS3 but we still need to support some older browsers. Feel free to use the HTML5 Shiv fix for Internet Explorer.

Key Requirements

• Create a new theme based on the provided documents.
• Test in all the required browsers.
• Provide ALL installation step by step, create details notes needed for your WordPress Theme.
• Replicate the design of the approved Storyboards (PSD Files) for all pages.
• Your pages must match the colors and structure of the provided storyboards.
• Ensure your pages display correctly in all browsers. 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.
• 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 must create the Admin functionality.

Detailed Requirements

All pages shown in the storybard must be implemented, you may also refer to the wireframes for reference (just these under Home/Blog/Article).

Specific HTML/CSS/JavaScript Requirements

• You MUST use HTML5 and CSS3
• 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.
• 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.
• No inline CSS styles - all styles must be placed in an external stylesheet.
• Use semantically correct tags - use H tags for headers, etc. Use strong and em tags instead of bold and italic tags.
• 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).
• Label all CSS, JavaScript, or HTML hacks with explanations so others will understand.
• Your code must render properly in all browsers listed in the scorecard in both Mac and PC environments.

Specific Wordpress Requirements (Optional)

In addition to following Wordpress standards and best practices, please note the following requirements.

• General Requirement - Do not break or override any of the standard Wordpress features. If you need to, please explicitly explain in your submission.
• Make proper use of the Wordpress Menu system.
• The editor must function as expected by our content editors. When then set styles via the rich editor, it should preview and display correctly on the site. This includes inserting images into posts, formatting fonts, positioning text around images, etc.
• Do not hardcode URL paths. Everything should be relative.
• Do not hardcode settings/config in the template code. Please create a "Theme Options" panel for configuration settings.
• Use sidebars when appropriate. We should be able to add widgets to sidebars.
• Use Widgets when appropriate. We'd like to avoid doing a copy/paste to include the same functionality in multiple templates/pages.

JavaScript Libraries/Plugins

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.

• You are allowed to use the JQuery JavaScript library for this contest.

Browser Requirements

• IE7+
• Firefox Latest
• Safari 5+
• Chrome Latest

References

Tutorial- Building Custom WordPress Theme:

http://www.webdesignerwall.com/tutorials/building-custom-wordpress-theme

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/

Documentation Provided

Register to download documents from contest forum.

Final Submission Guidelines

Submission Deliverables

• A WordPress theme is a folder with new name mentioned above and 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, its categories, and more.
• You must include Deployment Guide.
• You must include All Assets and PHP files from provided theme into your theme, and please make sure the existing menus, pages, blog still work properly.
• You must include any necessary plug-in files along with the necessary configuration settings.
• You must include your new exported XML file.

Submission Guidelines

Submit an archive file contains all HTML/CSS/JS/images and another required files into Online Review.