How to Prepare a WordPress Theme for Public Release

PU

BLIC

R

ELEAS

E

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

PAID WORKPAID WORK

PAID WORKPAID WORK

PUBLISHPUBLISH

Magnolia

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

Magnolia

https://github.com/davidyeiser/magnolia

https://github.com/davidyeiser/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/

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

PLAN

• 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/

20

04

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/

20

10

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/

20

10

Advanced

> Be > consitent> in> your> code.

MARKUP<header class="identity">

<hgroup>

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

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

</hgroup>

</header>


<hgroup>



</hgroup>

</header>

STYLE.CSS

.identity { … }

header.identity .site-title { … }

h2.site-tagline { … }

BAD!


<hgroup>



</hgroup>

</header>

STYLE.CSS

.identity { … }



BAD!


<hgroup>



</hgroup>

</header>

STYLE.CSS

.identity { … }



BAD!


<hgroup>



</hgroup>

</header>

STYLE.CSS

.identity { … }



BAD!


<hgroup>



</hgroup>

</header>

STYLE.CSS

.identity { … }

.site-title { … }

.site-tagline { … }

GOOD!


<hgroup>



</hgroup>

</header>

STYLE.CSS

.identity { … }

.site-title { … }


GOOD!


<hgroup>



</hgroup>

</header>

STYLE.CSS

.identity { … }

.site-title { … }


GOOD!


<hgroup>



</hgroup>

</header>

STYLE.CSS

.identity { … }

.site-title { … }


GOOD!

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

BAD!

SOMETHEME/

archive.php

/css/

-- ie.css

-- ie6.css

footer.php

header.php

/images/

-- spacer.gif

index.php

/js/

-- 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

/_js/

-- 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">

<hgroup>

<h1 class="site-title">

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

</h1>


</hgroup>

</header>

BAD!


<hgroup>


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

</h1>


</hgroup>

</header>

BAD!


<hgroup>


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

</h1>


</hgroup>

</header>

GOOD!


<hgroup>



</h1>


</hgroup>

</header>

GOOD!

Watch out for

DEPRECATEDfunction calls.


<hgroup>



</h1>


</hgroup>

</header>

GOOD!


<hgroup>


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

</h1>


</hgroup>

</header>

BAD!


<hgroup>


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

</h1>


</hgroup>

</header>

BAD!

Theme Unit Test

BOOKMARKhttp://codex.wordpress.org/Theme_Unit_Test

http://codex.wordpress.org/Theme_Review


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

/css/

footer.php

functions.php

header.php

index.php

/js/

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

http://gmpg.org/xfn/11






CODE QUALITY

With HTML 5 it’s simple.

CODE QUALITY: Valid Doctype

header.php

<!DOCTYPE html>

CODE QUALITY




CODE QUALITY: language_attributes()

header.php

<html <?php language_attributes(); ?>>

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>

<meta charset="<?php bloginfo('charset'); ?>" />

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>

<?php

// 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

<aside class="comments">

<?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')) { ?>

<nav class="main-nav">

<?php

wp_nav_menu(

array(

'theme_location' => 'primary',

'container' => '',

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

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

)

);

?>

<span class="clear"></span>

</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()) { ?>

<p class="post-thumbnail"><?php the_post_thumbnail('thumbnail'); ?></p>

<?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()


http://codex.wordpress.org/Function_Reference/wp_head


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


header.php

<?php wp_head(); ?>

</head>


• wp_head()

• body_class()




http://codex.wordpress.org/Template_Tags/body_class


Goes inside the <body> tag.


header.php

<body <?php body_class(); ?>>


• 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()






http://codex.wordpress.org/Template_Tags/post_class


Same as the body_class() but for posts.


index.php, single.php & archive.php

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>


• wp_head()

• body_class()

• $content_width

• post_class()

• wp_link_pages()








http://codex.wordpress.org/Function_Reference/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()










http://codex.wordpress.org/Function_Reference/paginate_comments_links


http://codex.wordpress.org/Function_Reference/previous_comments_link


http://codex.wordpress.org/Function_Reference/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="navigation">

<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()
















http://codex.wordpress.org/Function_Reference/posts_nav_link


http://codex.wordpress.org/Function_Reference/previous_posts_link


http://codex.wordpress.org/Function_Reference/next_posts_link


http://codex.wordpress.org/Function_Reference/paginate_links


Navigating posts on a per-page basis.


index.php & archive.php

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

<section id="post-nav-below" class="post-nav">

<span class="post-nav-older"><?php next_posts_link('← Older posts'); ?></span>

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

span>


</section>

<?php endif; ?>

Navigating posts on an individual basis.


single.php

<section id="post-nav-below" class="post-nav post-nav-single post-nav-single-below">

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

></span>

<span class="post-nav-newer"><?php next_post_link('%link', 'Next 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()
























http://codex.wordpress.org/Function_Reference/wp_footer

http://codex.wordpress.org/Function_Reference/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


INCLUDING FILES

header.php


INCLUDING FILES

header.php

<?php get_header(); ?>

GOOD!


INCLUDING FILES

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

BAD!


INCLUDING FILES

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


INCLUDING FILES

html5.js



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

http://codex.wordpress.org/CSS#WordPress_Generated_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

http://www.gnu.org/philosophy/license-list.html#GPLCompatibleLicenses/

http://www.gnu.org/philosophy/license-list.html#GPLCompatibleLicenses/

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.

http://codex.wordpress.org/Theme_Unit_Test

http://codex.wordpress.org/Theme_Unit_Test

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

THEME OBSOLESCENCE

RELEASERELEASE

RELEASERELEASE

RELEASERELEASE

PLATFORMRELEASERELEASE

RELEASERELEASE

SUPPORTSUPPORT

SUPPORTRoll your own…

SUPPORT

SUPPORTSUPPORT

SUPPORTSUPPORT

SUPPORTPick your poison… ;)

SUPPORT

FRO

MTH

EW

AYS

TO STA

ND

OU

TCR

OW

D

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

iPad

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

Technology

How to Prepare a WordPress Theme for Public Release