Building for WordPress' Theme Directory

Welcome WordCamp 2012 Attendees!

Who Me Be?


Dennis Gaebel

http://grayghostvisuals.com

Freelance Front–end Web Developer living in sunny Buffalo, New York

WP–Flex

A blank & responsive WordPress theme adhering to best practices and requirements set forth by the official WordPress Codex and theme review guidelines.

Demo » http://wpflex.grayghostvisuals.com

Questions

The Dirty Work

  • Coding Standards
  • Template Functionality
  • Theme Feature Requirements
  • Theme Unit Testing and Debugging
  • Theme Submission Prepping

Before We Start…

No Child Themes

Presently, Child Themes are not eligible to be hosted in the WordPress Theme Repository. All Themes submitted must be stand-alone Themes.

Theme Namespacing

Themes are required to use a unique slug as a prefix for anything in the public namespace, including all custom function names, classes, hooks, public/global variables, database entries (Theme options, post custom metadata, etc.)

var badmuthah-test-flag = true; badmuthah_title_filter() {}; .badmuthah-title {}

Theme Name

  • Themes are not to use "WordPress" in their name
  • Themes are not to use the term "Theme" in their name
  • Themes may use the "WP" acronym in the theme name
  • Themes are not to use related theme names (i.e Twenty Ten, Twenty Eleven)
  • Themes are REQUIRED to spell "WordPress" correctly in all public facing text: all one word, with both an uppercase W and P.

Keep It Relevant!

Themes must be kept current once submitted, approved, and accepted into the Theme Repository. Any Theme not updated to the current theme review process as of the most recent release of WordPress may be subject to temporary suspension.

Standards

why bother?

http://codex.wordpress.org/WordPress_Coding_Standards

Because your theme won't be accepted for review

Create code that is readable, meaningful, consistent, and beautiful.

{ CSS }

"Files within a project should appear as though created by a single entity." http://make.wordpress.org/core/handbook/coding-standards/css

Handy Tips

  • Use lowercase and separate words with hyphens when naming selectors. (Avoid camelcase and underscores)
  • Use human readable selectors that describe what element(s) they style
  • Attribute selectors should use double quotes around values
  • Themes may optionally link the default stylesheet (style.css) directly in the document <head>, or via wp_enqueue_style(). Whichever method is used, the default stylesheet must be referenced via get_stylesheet_uri()
  • Remember to include your WordPress Generated classses http://codex.wordpress.org/CSS#WordPress_Generated_Classes

< HTML >

  • When mixing PHP and HTML together, indent PHP blocks to match the surrounding HTML code. Closing PHP blocks should match the same indentation level as the opening block.
  • All attributes must have a value, and must use double - or single-quotes
  • All tags must be properly closed.
  • Feed links are not hard-coded into the document head
  • No CSS files other than style.css are hard-coded into the document head

<?PHP ?>

...
  • Use single and double quotes when appropriate. If you're not evaluating anything in the string, use single quotes.
  • Text that goes into attributes should be run through esc_attr() so that single or double quotes do not end the attribute value and invalidate the HTML and cause a security issue. Best to use esc_attr() for text inputs and esc_html() for text areas.

    Data Validation » http://codex.wordpress.org/Data_Validation

  • Never use shorthand PHP start tags. Always use full PHP tags.
  • If you do not omit the closing PHP tag at the end of a file (which is preferred), make sure you remove trailing whitespace
  • Themes must not provide backward compatibility for out-of-date WordPress versions, including using function_exists() conditional wrappers for current WordPress functions.

Javascript.this

  • JavaScript code should be placed in external files whenever possible.
  • Themes must not generate any JavaScript errors
  • Use wp_enqueue_script to load your scripts. The safe and recommended method of adding JavaScript to a WordPress generated page. http://wpcandy.com/teaches/how-to-load-scripts-in-wordpress-themes
  • jQuery included with WordPress automatically calls jQuery.noConflict(); which gives control of the $ variable back to whichever library that first implemented it.
function wpflex_asset_loader() {
    // Load WordPress' jQuery. Must be registered first before wp_enqueue_script()
    wp_register_script( 'jquery', false, array(), '', true);
    wp_enqueue_script( 'jquery' );
}
add_action( 'wp_enqueue_scripts', 'wpflex_asset_loader' );
//This is most frequently used in the case where you still want the benefits of really
// short jQuery code, but don't want to cause conflicts with other libraries.
jQuery(document).ready(function($) { $('element').addClass('new_class'); });

Foundational

Template Functionality

  • index.php
  • comments.php
  • screenshot.png » 300x225px.
    must be a "reasonable facsimile" of the default view of the site
  • style.css

Recommended

Templates

  • 404.php
  • archive.php
  • page.php
  • search.php
  • header.php
  • footer.php
  • sidebar.php

Optional

Templates

  • attachment.php
  • author.php
  • category.php
  • date.php
  • editor-style.css
  • image.php
  • tag.php

Don't Do this

  • page-foobar.php
  • category-foobar.php
  • tag-foobar.php

If you require this naming convention then you must provide end-user documentation explaining the funcitonality of each custom named slug template.

Core Feature

Requirements

While we can't go over everything in its entirety, there are a few points to mention for reference.

http://codex.wordpress.org/Theme_Review#Theme_Features

Required

  • add_theme_support( 'automatic-feed-links' )
  • register_sidebar()
  • comments_template()
  • comment_form()
  • wp_list_comments()
  • wp_enqueue_script( 'comment-reply' )

Nice To Have

  • wp_nav_menu()
  • register_nav_menu()
  • add_theme_support('custom-header')
  • add_theme_support('custom-background')
  • add_editor_style()

Theme Hooks

  • wp_title()
  • wp_head()
  • body_class()
  • wp_link_pages()
  • post_class()
  • wp_footer()

Don't forget!

http://justintadlock.com/archives/2010/11/17/how-to-load-files-within-wordpress-themes
get_template_directory():
// Returns the absolute template directory path.

The proper way of including files and templates in WordPress themes

get_template_directory_uri():
// Returns the template directory URI.

This should be used when including JavaScript, CSS, and image files

This too!


» header.php

<title><?php wp_title('»', true, 'left'); ?></title>

» functions.php

function wp_flex_title_filter( $title, $sep, $sep_location ) { ... }
add_filter( 'wp_title', 'wp_flex_title_filter', 10, 3 );
The wp_title() function should not be used by a theme in conjunction with other strings or functions (like concocting with bloginfo(‘name’) ) to set the title because it will render plugins unable to rewrite page titles correctly. The best practice is to use the wp_title filter with a callback function. This method is now a requirement for themes.

Theme Testing and Duh-buggin'

http://codex.wordpress.org/Theme_Development#Theme_Testing_Process

Fix any PHP Erros

http://codex.wordpress.org/Theme_Unit_Test

Add the following debug setting to your wp-config.php file to see deprecated function calls and other WordPress-related errors: define('WP_DEBUG', true);

Theme Unit Test

http://codex.wordpress.org/Theme_Unit_Test

Do a run-through using the Theme Unit Test.

This database of content lets us check our theme functionality using features like sticky post, protected password post, layout tests, image sizing, comment testing, disabled comments, clearing floats and other four legged creatures that lurk about.

Debogger

This tool intercepts all debug information and prints it all out neatly into the footer. It also checks each page for W3C validation. This plugin is released as a tool to aid the development of themes and plugins for WordPress and can be used to aid debugging your theme before submission to the themes directory

http://wordpress.org/extend/plugins/debogger

Theme Check

A simple and easy way to test your theme for all the latest WordPress standards and practices. The tests are run through a simple admin menu and all results are displayed at once.

http://wordpress.org/extend/plugins/theme-check

Theme Bible

A Guide to Reviewing Themes for the WordPress Theme Repository

http://www.chipbennett.net/2011/04/20/a-guide-to-reviewing-themes-for-the-wordpress-theme-repository

The exact specs and documentation used by the WordPress Theme Review Team

Fire in the hole!

Getting ready to submit? make sure you've done the following.

Licensing

  • Themes are required to be 100% GPL-licensed, or use a GPL-compatible license. This includes all PHP, HTML, CSS, images, fonts, icons, and everything else. All of the theme must be GPL-Compatible.
  • Themes may optionally include a full-text license, referenced as license.txt, or else link to a reasonably permanent URL that contains the full-text license.
  • Declare License and License URI header slugs to style.css in this format
    License: GNU General Public License v2.0
    License URI: http://www.gnu.org/licenses/gpl-2.0.html
  • Themes are required to declare copyright and license information as specified by the applicable license, e.g.:
    /*
    WP-Flex Copyright ©2011 Gray Ghost Visuals
    Permission is granted to copy, ...
    */

Bundled Resources

  • Fonts
  • Icons
  • Scripts, Imagery etc.

Themes are required to state the copyright and license information for any bundled resources not covered by the Theme's license statement. Themes are recommended to state this information in the Theme's README documentation.

http://www.gnu.org/licenses/gpl-howto.html

High Five Time!

Upload Your Theme

Authors must log in with their WordPress.org account.

In order to submit authors must have a wordpress.org account in order to follow trac issues and receive feedback.

Submitted Themes are automatically checked during upload to make sure they meet a few basic requirements

Themes > Theme Authors > Add Your Theme To The Directory

Coffee Time!

Theme authors receive an automated e-mail message, indicating that their Theme files have been received.

While you're waiting you can sign up for the Theme Reviewers Mailing List

Shanks Very Much

twitter: @gryghostvisuals

site: http://grayghostvisuals.com

blog: http://blog.grayghostvisuals.com

Yay WordPress! Thanks WordCamp Buffalo 2012!