How to Prepare a WordPress Theme for Public Release

WordPress THEME —

for —

HOW TO prepare a

DAVID YEISER

— on —twitter: @davidyeiser

the web: designintellection.com

1. Why release a theme?

2. The process.3. Ways to stand-out.

THEME?WHAT IS A

THEME?

wp-admin/wp-content/— themes/— — default/— — your-theme/wp-includes/

WHY RELEASEa theme?WHY RELEASE

• Give back to the community• Learn something new• Get noticed• Build a reputation• Get paid work

a theme?WHY RELEASE

• Publish!

GIVE BACKGIVE BACK

LEARNLEARN

• Child themes• Product development• Community management• Professional development

GET NOTICEDGET NOTICED

THEMES24,038,221 downloads

PLUGINS

132,931,828 downloads

Numbers as of 2010-12-01

TOTAL downloads

THEMES18,562 downloads/theme

PLUGINS10,919 downloads/plugin

Numbers as of 2010-12-01

AVG. PER ITEM downloads

Embrace Distribution channels

REPUTATIONREPUTATIONPRODUCT PLATFORM

REPUTATIONREPUTATION

Attainable.But not easy.Blogging is hard.

PAID WORKPAID WORK

PUBLISHPUBLISH

Magnolia

GitHub: https://github.com/davidyeiser/magnoliaTrac Ticket: http://themes.trac.wordpress.org/ticket/2215

Magnolia

THE PROCESSSix stepsTHE PROCESS

Six stepsTHE PROCESS

1. PLAN2. DESIGN3. BUILD4. TEST & CHECK5. RELEASE6. SUPPORT

PLANPLAN

Photo credit: http://www.flickr.com/photos/pepemichelle/3645214132/

PLANPLAN

OUT IN

PLANPLAN

OUT IN

NO MAN’S LAND

PLANFocusPLAN

• A certain market?• A particular audience?• Scratching your own itch?

PLANBrowser supportPLAN

• Largely determined by target audience and goals• But ultimately up to you

PLAN• FREE

• FREEMIUM• PREMIUM

DESIGNDESIGN

• Browser or graphics editor first• Then integrate WordPress

DESIGN

DESIGNranges not extremesDESIGN FOR

BUILDBUILD

wp-admin/wp-content/— themes/— — default/— — your-public-theme/— — — index.php— — — style.csswp-includes/

wp-admin/wp-content/— themes/— — default/— — your-public-theme/— — — header.php— — — index.php— — — style.css— — — rtl.css— — — comments.php— — — front-page.php— — — home.php— — — single.php— — — page.php— — — category.php— — — tag.php— — — taxonomy.php— — — author.php— — — date.php— — — archive.php— — — search.php— — — attachment.php— — — image.php— — — 404.php— — — footer.phpwp-includes/

Advanced

> Be > consitent> in> your> code.

MARKUP<header class="identity">

<h1 class="site-title">Acme Publishing</h1>

<h2 class="site-tagline">A clear, concise company description.</h2>

</hgroup>

</header>

</hgroup>

</header>

STYLE.CSS

.identity { … }

header.identity .site-title { … }

h2.site-tagline { … }

</hgroup>

</header>

STYLE.CSS

.identity { … }

</hgroup>

</header>

STYLE.CSS

.identity { … }

</hgroup>

</header>

STYLE.CSS

.identity { … }

</hgroup>

</header>

STYLE.CSS

.identity { … }

.site-title { … }

.site-tagline { … }

</hgroup>

</header>

STYLE.CSS

.identity { … }

.site-title { … }

</hgroup>

</header>

STYLE.CSS

.identity { … }

.site-title { … }

</hgroup>

</header>

STYLE.CSS

.identity { … }

.site-title { … }

Good-- file-- -- organization

SOMETHEME/

archive.php

footer.php

header.php

html5.js

ie.css

ie6.css

index.php

jquery-latest.js

page.php

screenshot.png

search.php

single.php

spacer.gif

style.css

SOMETHEME/

archive.php

-- ie.css

-- ie6.css

footer.php

header.php

/images/

-- spacer.gif

index.php

-- html5.js

-- jquery-latest.js

page.php

screenshot.png

search.php

single.php

style.css GOOD!

SOMETHEME/

/_css/

-- ie.css

-- ie6.css

/_images/

-- spacer.gif

-- html5.js

-- jquery-latest.js

archive.php

footer.php

header.php

index.php

page.php

screenshot.png

search.php

single.php

style.css GOOD!

Use dynamic paths.Not relative.

CODE<header class="identity">

<a href="/">Acme Publishing</a>

</hgroup>

</header>

<a href="/">Acme Publishing</a>

</hgroup>

</header>

<a href="<?php echo home_url(); ?>">Acme Publishing</a>

</hgroup>

</header>

</hgroup>

</header>

Watch out for

DEPRECATEDfunction calls.

</hgroup>

</header>

<a href="<?php get_option("home"); ?>">Acme Publishing</a>

</hgroup>

</header>

<a href="<?php get_option("home"); ?>">Acme Publishing</a>

</hgroup>

</header>

Theme Unit Test

BOOKMARKhttp://codex.wordpress.org/Theme_Unit_Test

style.css

header.php

index.php

footer.php

style.css

header.php

index.php

⇒ single.php⇒ page.php⇒ archive.phpfooter.php

404.php

archive.php

comments.php

footer.php

functions.php

header.php

index.php

license.txt

page.php

README.txt

screenshot.png

search.php

sidebar.php

single.php

style.css

STYLE.CSS

table { width:100%; margin-bottom:22px; border-bottom:2px solid #ccc; }

th { padding:5px; border-right:1px solid #ccc; border-bottom:1px solid

#ccc; background-color:#ddd; }

td { padding:4px 5px; border-bottom:1px solid #eee; }

Further…

• “Native” support for popular plugins• Look at plugins for WordPress.com• Add theme options

TEST & CHECKTEST & CHECK

BOOKMARKhttp://codex.wordpress.org/Theme_Review

Themes are required not to have any notices, warnings, errors; or use of deprecated functions.

CODE QUALITY

wp-config.php

define('WP_DEBUG', true);

Themes are required to utilize current recognized version(s) of (X)HTML and CSS.

CODE QUALITY

NOT (entirely) TRUE!

Twenty Ten Theme

header.php

<!DOCTYPE html>

Themes are required to generate no JavaScript errors.

CODE QUALITY

Sounds good.

Themes are required to have a valid HTML document HEAD:

• Valid DOCTYPE declaration

• <html> tag includes language_attributes()

• Correct XFN profile link in <head> tag: <head profile="http://gmpg.org/xfn/11"> (Exception: Wholly HTML 5 themes must not have the profile, as HTML 5 does not support it.)• Correct content-type meta declaration

• <title> includes bloginfo() for title and description

CODE QUALITY

With HTML 5 it’s simple.

CODE QUALITY: Valid Doctype

header.php

<!DOCTYPE html>

CODE QUALITY

CODE QUALITY: language_attributes()

header.php

CODE QUALITY

• Correct XFN profile link in <head> tag: <head profile="http://gmpg.org/xfn/11"> (Exception: Wholly HTML 5 themes must not have the profile, as HTML 5 does not support it.)

HTML5 exception

CODE QUALITY: XFN Profile link

header.php

<head>

CODE QUALITY

• Correct content-type meta declaration

Again, with HTML 5 it’s easy.

CODE QUALITY: Content-Type

header.php

<head>

CODE QUALITY

• Correct content-type meta declaration

• <title> includes bloginfo() for title and description

Copied from the Twenty Ten theme.

CODE QUALITY: <title> tag

header.php

<title>

// Print the <title> tag based on what is being viewed.

// Taken from the 2010 theme.

global $page, $paged;

wp_title('—', true, 'right');

// Add the blog name.

bloginfo('name');

// Add the blog description for the home/front page.

$site_description = get_bloginfo('description', 'display');

if ($site_description && (is_home() || is_front_page()))

echo " — $site_description";

// Add a page number if necessary:

if ($paged >= 2 || $page >= 2)

echo ' — ' . sprintf('Page %s', max($paged, $page));

</title>

Theme is required to incorporate the following WordPress core functionality:

FUNCTIONALITY

• Automatic Feed Links

FUNCTIONALITY

Add default posts and comments RSS feed links via wp_head()

FUNCTIONALITY: Automatic Feed Links

functions.php

// Add default posts and comments RSS feed links to head

add_theme_support('automatic-feed-links');

• Automatic Feed Links• Widgets

FUNCTIONALITY

Initiate widget area in the admin and set HTML output. (1 of 2)

FUNCTIONALITY: Widgets

functions.php

function magnolia_widgets_init() {

register_sidebar(array(

'name' => 'Main Sidebar',

'id' => 'main-sidebar',

'description' => 'The main sidebar of the site.',

'before_widget' => '<section id="%1$s" class="secondary-block %2$s"><div>',

'after_widget' => '</div></section>',

'before_title' => '</div><header class="secondary-block-label"><h1 class="secondary-

block-title">',

'after_title' => '</h1></header><div class="secondary-block-content">',

//Register sidebars by running magnolia_widgets_init() on the widgets_init hook.

add_action('widgets_init', 'magnolia_widgets_init');

Define widget area in theme. (2 of 2)

FUNCTIONALITY: Widgets

sidebar.php

<?php if (!dynamic_sidebar('main-sidebar')) : ?>

<?php endif; ?>

• Automatic Feed Links• Widgets• Comments

FUNCTIONALITY

Set single comment display and functionality (taken from Twenty Ten theme). (1 of 4)

FUNCTIONALITY: Comments

functions.php

if (!function_exists('magnolia_comment')) :

function magnolia_comment($comment, $args, $depth) {

// Comment function data from Twenty Ten theme.

endif;

PHP template tag to output appropriate JS for threaded comments. (2 of 4)

header.php

<?php if (is_singular()) { wp_enqueue_script('comment-reply'); } ?>

<?php wp_head(); ?>

</head>

Call comments.php from single.php (and page.php). (3 of 4)

single.php & page.php

// The first parameter is the file to call. Defaults to comments.php.

// The second parameter is whether to separate comments by comment type.

// (pingback, trackbacks, comment, etc.)

comments_template('', true);

</aside>

Copied from Twenty Ten theme. (4 of 4)

comments.php

// OTHER STUFF

// Copied from Twenty Ten theme.

// Have to change a few things though.

// Primarily the call to the function we created in functions.php

<?php wp_list_comments(array('callback' => 'magnolia_comment')); ?>

// OTHER STUFF

Theme is recommended to incorporate the following WordPress core functionality, but is not required to do so.

FUNCTIONALITY

• Navigation Menus

FUNCTIONALITY

Register the navigation menu. (1 of 2)

FUNCTIONALITY: Navigation Menus

functions.php

// This theme uses wp_nav_menu() in one location.

register_nav_menus(array(

'primary' => 'Primary Navigation',

Add it to the theme. (2 of 2)

FUNCTIONALITY: Navigation Menus

header.php

<?php if (has_nav_menu('primary')) { ?>

wp_nav_menu(

array(

'theme_location' => 'primary',

'container' => '',

'menu_class' => 'main-nav-list',

'depth' => '0', // Sub pages are shown beneath the tabs.

</nav>

<?php } ?>

• Navigation Menus• Post Thumbnails

FUNCTIONALITY

Register support. (1 of 2)

FUNCTIONALITY: Post Thumbnails

functions.php

// This theme uses post thumbnails

add_theme_support('post-thumbnails');

Add it to the theme. (2 of 2)

FUNCTIONALITY: Post Thumbnails

single.php, index.php & archive.php

<?php if (has_post_thumbnail()) { ?>

<?php } ?>

• Navigation Menus• Post Thumbnails• Custom Header

FUNCTIONALITY

• Navigation Menus• Post Thumbnails• Custom Header• Custom Background

FUNCTIONALITY

• Navigation Menus• Post Thumbnails• Custom Header• Custom Background• Visual Editor CSS

FUNCTIONALITY

All template tags and hooks used in a Theme are required to be implemented properly. The following template tags and hooks are required to be included where appropriate:

TEMPLATE TAGS & HOOKS

• wp_head()

Required to be placed directly before the <body> tag.

header.php

<?php wp_head(); ?>

</head>

• wp_head()

• body_class()

Goes inside the <body> tag.

header.php

• wp_head()

• body_class()

• $content_width

Used for images and content.

functions.php

/* Set width for content and images.

--- The layout is fluid with max- and min-width constraints.

The value below represents the half-way width between

if (!isset($content_width))

$content_width = 556;

• wp_head()

• body_class()

• $content_width

• post_class()

Same as the body_class() but for posts.

index.php, single.php & archive.php

• wp_head()

• body_class()

• $content_width

• post_class()

• wp_link_pages()

If a post or page is paginated.

index.php, single.php & archive.php

<?php wp_link_pages(array('before' => '<div class="post-pages">' . '<span class="post-pages-

label">Pages:</span> ', 'after' => '</div>')); ?>

• wp_head()

• body_class()

• $content_width

• post_class()

• wp_link_pages()

• paginate_comments_links() or previous_comments_link()/next_comments_link()

Comment pagination. (Lifted from the Twenty Ten theme.)

comments.php

<?php if (get_comment_pages_count() > 1 && get_option('page_comments')) : ?>

<div class="nav-previous"><?php previous_comments_link('<span class="meta-

nav">←</span> Older Comments'); ?></div>

<div class="nav-next"><?php next_comments_link('Newer Comments <span class="meta-

nav">→</span>'); ?></div>

</div>

<?php endif; ?>

• wp_head()

• body_class()

• $content_width

• post_class()

• wp_link_pages()

• posts_nav_link(), or previous_posts_link()/next_posts_link(), or paginate_links()

Navigating posts on a per-page basis.

index.php & archive.php

<?php if ($wp_query->max_num_pages > 1) : ?>

<span class="post-nav-newer"><?php previous_posts_link('Newer posts →'); ?></

</section>

<?php endif; ?>

Navigating posts on an individual basis.

single.php

<span class="post-nav-older"><?php previous_post_link('%link', '← Previous Post'); ?

></span>

</section>

• wp_head()

• body_class()

• $content_width

• post_class()

• wp_link_pages()

• posts_nav_link(), or previous_posts_link()/next_posts_link(), or paginate_links()

• wp_footer()

Directly before the closing </body> tag.

footer.php

<?php wp_footer(); ?>

</body>

If incorporated into the Theme, standard template files are required to be called using the correct template tag

INCLUDING FILES

header.php

INCLUDING FILES

header.php

<?php get_header(); ?>

INCLUDING FILES

header.php<?php include(TEMPLATEPATH . '/header.php') ?>

INCLUDING FILES

header-secondary.php<?php get_template_part('header', 'secondary'); ?>

INCLUDING FILES

html5.js

<!--[if lt IE 9]>

<![endif]-->

If incorporated into the Theme, site information is required to be called using the correct template tag.

SITE INFORMATION

This is what we talkedabout in the “Build” section

Themes are required to support the following WordPress-defined CSS classes, or similar elements

Alignment Classes:.aligncenter

.alignleft

.alignright

Caption Related Classes:.wp-caption

.wp-caption-text

.gallery-caption

WORDPRESS-GENERATED CSS CLASSES

.alignleft

.alignright

.wp-caption-text

.gallery-caption

Alignment classes

style.css

.post-content img { border:4px solid #ddd; }

.alignleft { margin:0 10px 10px 0; float:left; }

.alignright { margin:0 0 10px 10px; float:right; }

.aligncenter { display:block; margin:10px auto; text-align:center; }

Alignment classes

.alignleft

.alignright

.wp-caption-text

.gallery-caption

Caption classes

style.css

.wp-caption { padding:10px; background-color:#eee; -webkit-border-radius:5px; -moz-border-radius:

5px; border-radius:5px; }

.wp-caption-text { padding:5px 0 10px 0; font-size:13px; font-style:italic; line-height:16px;

color:#777; }

.post-content .gallery-item { padding-top:15px; padding-bottom:0; border-top:1px solid #eee; }

.post-content .gallery-icon { }

.post-content .gallery-caption { padding:0 10px 10px 10px; font-size:13px; font-style:italic;

line-height:16px; color:#777; }

Caption classes

Themes are recommended to support the following WordPress-generated classes.

Post Classes:.sticky

Comment Classes:.bypostauthor

Post “sticky” classes

style.css

.sticky { padding:30px 15px; border-top:4px solid #ddddc1; background-color:#ffffe3; }

.sticky .post-date { color:#adad93; }

.sticky .post-footer { background-image:none; border:1px solid #ddddc1; background-

color:#eeeed2; }

.sticky .post-meta { color:#adad93; border-bottom-color:#ddddc1; }

.sticky .post-meta em, .sticky .post-tags a { color:#adad93; }

.sticky .post-tags { border-top-color:#fffff3; }

.sticky .post-pages { border:1px dotted #ddddc1; }

.sticky .post-pages a { background-color:#ddddc1; }

.sticky .post-pages a:hover, .sticky .post-pages a:focus { background-color:#ccccb0; }

Post “sticky” classes

Comment by post author classes

style.css

.commentlist .bypostauthor { padding:10px; border-bottom-color:#eeeed2; background-

color:#ffffe3; }

.bypostauthor .avatar { border-color:#ddddc1; }

.bypostauthor .comment-author { color:#adad93; }

.bypostauthor .comment-meta a, .bypostauthor .comment-meta a:visited { color:#adad93; }

Comment by post author classes

Theme is required to include, at a minimum:

• index.php• comments.php• screenshot.png• style.css

THEME TEMPLATE FILES

Theme is recommended to include:

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

Theme may optionally include:

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

Submitted theme are recommended not to include files named like the following.

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

Themes are recommended to use core markup for the following forms, using the indicated template tag:

• Login Form — wp_login_form()

• Search Form — wp_search_form()

Themes are recommended to use core markup for the following forms, using the indicated template tag:

• Login Form — wp_login_form()

• Search Form — wp_search_form()

searchform.php

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.

LICENSING

Theme Name Guidelines are required for new Themes, and recommended for existing Themes.

THEME NAME

• Don’t use “WordPress” in the name

THEME NAME

• Don’t use “Theme” in the name

THEME NAME

• Don’t use HTML or CSS or any other version-specific, markup-related term

THEME NAME

• Don’t credit yourself in the name.

THEME NAME

• Don’t credit yourself in the name.

• Feel free to use the WP in the name.

THEME NAME

Themes may optionally designate Author URI and Theme URI in style.css.

CREDIT LINKS

Themes may optionally include a public-facing credit link in the Theme footer.

Themes may optionally include a Theme Option to display additional credit links or text.

BOOKMARKhttp://themeshaper.com/sample-theme-options/

Please be clear about the following in your Theme documentation.

1. Indicate what the theme will do.

2. Adhere to the standard naming conventions.

3. Indicate deficiencies, if any.

4. Clearly reference anything out of the ordinary with comments in the code.

5. If you have any special requirements indicate these explicitly.

6. Provide contact information, if possible, for support and questions.

THEME DOCUMENTATION

The Theme must meet all the requirements of the Theme Unit Test.

THEME UNIT TESTS

Referenced in the beginning ofthe “Build” section.

Themes must be kept current once submitted, approved, and accepted into the Theme Repository.

THEME OBSOLESCENCE

RELEASERELEASE

PLATFORMRELEASERELEASE

RELEASERELEASE

SUPPORTSUPPORT

SUPPORTRoll your own…

SUPPORT

SUPPORTSUPPORT

SUPPORTPick your poison… ;)

SUPPORT

TO STA

THEMES THEMES THEMESTHEMES THEMES THEMESTHEMESASPLUGINSTHEMES THEMES THEMESTHEMES THEMES THEMESTHEMES THEMES THEMESTHEMES THEMES THEMES

Kindle

Photo credit: http://www.fastcodesign.com/1662356/ideo-creates-three-visions-for-books-in-the-digital-age

Photo credit: http://www.flickr.com/photos/elwillo/4258135741/

Photo credit: http://www.fastcodesign.com/1662197/how-augmented-reality-windshields-could-transform-driving

THEMES THEMES THEMESTHEMES THEMES THEMESTHEMESASAPPLICATIONSTHEMES THEMES THEMESTHEMES THEMES THEMESTHEMES THEMES THEMESTHEMES THEMES THEMES

TraditionalAUDIENCE

ApplicationACTIVITY

DESIGN +Custom content types

THEMES THEMES THEMESTHEMES THEMES THEMESTHEMESBEYONDWORDPRESSTHEMES THEMES THEMESTHEMES THEMES THEMESTHEMES THEMES THEMESTHEMES THEMES THEMES

THANK YOU

— ! —twitter: @davidyeiser

the web: designintellection.com

How to Prepare a WordPress Theme for Public Release

Technology

Documentation:A Portfolio WordPress Theme · Documentation:A Portfolio WordPress Theme Install A Portfolio WordPress Theme within a few minutes. A Portfolio is responsive, customizable

WordPress Custom Theme Designer, WordPress Customization, WordPress SEO

WordPress Theme Mechanics

Theme de Wordpress

Survivor: WordPress Theme Edition

Wordpress Ultimatum Theme

Minuscula WordPress Theme

Wordpress theme from scratch

Wordpress directory theme

How to set-up your Eventbrite WordPress Theme Theme... · How to set-up your Eventbrite WordPress Theme Congratulations on getting your hands on this completely free WordPress theme

WordPress Theme Reviewers Team

Your First Wordpress Theme

Choosing a WordPress Theme

WordPress Child Theme

WordPress Theme Basics

WordPress Theme Structure

Metro Style Wordpress Theme

WordPress Theme Safety Tips

Foodfarm WordPress Theme

Wordpress Theme Hacks