How to Prepare a WordPress Theme for Public Release

HOW TO

PUBLIC
RELEASE
— for —
prepare a
WordPress
THEME

DAVID
YEISER
— on —
twitter: @davidyeiser
the web: designintellection.com

1. Why release a theme?
2. The process.
3. Ways to stand-out.

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

WHY RELEASE
a theme?

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

GIVE B
GIVE BACK

:)

LEARN
LEARN

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

NOTICE
GET NOTICED

THEMES PLUGINS
24,038,221 downloads 132,931,828 downloads

TOTAL downloads
Numbers as of 2010-12-01

NOTICE
GET NOTICED

THEMES PLUGINS
18,562 downloads/theme 10,919 downloads/plugin

AVG. PER ITEM downloads
Numbers as of 2010-12-01

NOTICE
GET NOTICED

Embrace
Distribution channels

EPUTA
REPUTATION
PRODUCT PLATFORM

+

EPUTA
REPUTATION

Attainable.
But not easy.
Blogging is hard.

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

THE PROCESS
Six steps
1. PLAN
2. DESIGN
3. BUILD
4. TEST & CHECK
5. RELEASE
6. SUPPORT

PLAN
PLAN

Photo credit: http://www.ﬂickr.com/photos/pepemichelle/3645214132/

PLAN
PLAN

NO MAN’S LAND

OUT IN

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

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

PLAN
PLAN

• FREE
• FREEMIUM
• PREMIUM

DESIGN
DESIGN

• Browser or graphics editor ﬁrst
• Then integrate WordPress

DESIGN
DESIGN FOR
ranges not extremes

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

2010
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

— — — category.php
— — — tag.php

2010
— — — taxonomy.php
— — — author.php
— — — date.php
— — — archive.php
— — — search.php
— — — attachment.php
— — — image.php
— — — 404.php
— — — footer.php
wp-includes/

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

MARKUP
<hgroup>
</hgroup>
</header>

STYLE.CSS

.identity { … }
header.identity .site-title { … }
h2.site-tagline { … }

BAD!

MARKUP
<hgroup>
</hgroup>
</header>

STYLE.CSS

.identity { … }
.site-title { … }
.site-tagline { … }

GOOD!

Good
-- ﬁle
-- -- 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

GOOD!
style.css

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

GOOD!
style.css

Use dynamic paths.
Not relative.

CODE
<hgroup>
<h1 class="site-title">

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

</hgroup>
</header>

BAD!

CODE
<hgroup>

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

</hgroup>
</header>

GOOD!

Watch out for
DEPRECATED
function calls.

CODE
<hgroup>

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

</hgroup>
</header>

BAD!

Theme Unit Test

BOOKMARK
http://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.php
footer.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

ST & CH
TEST & CHECK

BOOKMARK
http://codex.wordpress.org/Theme_Review

CODE QUALITY

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

wp-conﬁg.php

define('WP_DEBUG', true);

CODE QUALITY

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

NOT (entirely) TRUE!

Twenty Ten Theme

header.php

<!DOCTYPE html>

CODE QUALITY

Themes are required to generate no
JavaScript errors.

Sounds good.

CODE QUALITY

Themes are required to have a valid HTML
document HEAD:

• Valid DOCTYPE declaration
• <html> tag includes language_attributes()
• Correct XFN proﬁle link in <head> tag: <head profile="http://gmpg.org/
xfn/11"> (Exception: Wholly HTML 5 themes must not have the proﬁle, as
HTML 5 does not support it.)
• Correct content-type meta declaration
• <title> includes bloginfo() for title and description

CODE QUALITY

document HEAD:


CODE QUALITY: Valid Doctype
With HTML 5 it’s simple.

header.php

<!DOCTYPE html>

CODE QUALITY

document HEAD:


CODE QUALITY: language_attributes()

header.php

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

CODE QUALITY

document HEAD:

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

CODE QUALITY: XFN Proﬁle link
HTML5 exception

header.php

<head>

CODE QUALITY

document HEAD:



CODE QUALITY: Content-Type
Again, with HTML 5 it’s easy.

header.php

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

CODE QUALITY

document HEAD:


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

CODE QUALITY: <title> tag
Copied from the Twenty Ten theme.

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>

FUNCTIONALITY

Theme is required to incorporate the following
WordPress core functionality:

FUNCTIONALITY


• Automatic Feed Links

FUNCTIONALITY: Automatic Feed Links
Add default posts and comments RSS feed links via wp_head()

functions.php

// Add default posts and comments RSS feed links to head
add_theme_support('automatic-feed-links');

FUNCTIONALITY


• Widgets

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

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');

FUNCTIONALITY: Widgets
Deﬁne widget area in theme. (2 of 2)

sidebar.php

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



<?php endif; ?>

FUNCTIONALITY


• Widgets
• Comments

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

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>

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

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

FUNCTIONALITY

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

FUNCTIONALITY


• Navigation Menus

FUNCTIONALITY: Navigation Menus
Register the navigation menu. (1 of 2)

functions.php

// This theme uses wp_nav_menu() in one location.
register_nav_menus(array(
'primary' => 'Primary Navigation',
));

FUNCTIONALITY: Navigation Menus
Add it to the theme. (2 of 2)

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

FUNCTIONALITY


• Post Thumbnails

FUNCTIONALITY: Post Thumbnails
Register support. (1 of 2)

functions.php

// This theme uses post thumbnails
add_theme_support('post-thumbnails');

FUNCTIONALITY: Post Thumbnails
Add it to the theme. (2 of 2)

single.php, index.php & archive.php

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

FUNCTIONALITY


• Post Thumbnails
• Custom Header

FUNCTIONALITY


• Post Thumbnails
• Custom Header
• Custom Background

FUNCTIONALITY


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

TEMPLATE TAGS & HOOKS

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:



• 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

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

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

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

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

Directly before the closing </body> tag.

footer.php

<?php wp_footer(); ?>
</body>

INCLUDING FILES

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

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

SITE INFORMATION

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

This is what we talked
about in the “Build” section

WORDPRESS-GENERATED CSS CLASSES

Themes are required to support the following WordPress-
deﬁned CSS classes, or similar elements

Alignment Classes:
.aligncenter
.alignleft
.alignright

Caption Related Classes:
.wp-caption
.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

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

Theme is required to include, at a minimum:

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


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

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.

THEME NAME

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-speciﬁc,
markup-related term

THEME NAME




markup-related term

• Don’t credit yourself in the name.

THEME NAME




markup-related term

• Don’t credit yourself in the name.

• Feel free to use the WP in the name.

CREDIT LINKS

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

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.

BOOKMARK
http://themeshaper.com/sample-theme-options/

THEME DOCUMENTATION

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 deﬁciencies, 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 UNIT TESTS

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

Referenced in the beginning of
the “Build” section.

THEME OBSOLESCENCE

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

UPPOR
SUPPORT

Roll your own…

UPPOR
SUPPORT

Pick your poison… ;)

FROM
THE
WAYS
TO
STANDOUT
CROWD

THEMES THEMES THEMES
THEMES
AS
PLUGINS

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

Photo credit: http://www.ﬂickr.com/photos/elwillo/4258135741/

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

THEMES
AS
APPLICATIONS

THEMES
BEYOND
WORDPRESS

THANK
YOU
—!—
twitter: @davidyeiser
the web: designintellection.com

How to Prepare a WordPress Theme for Public Release

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to How to Prepare a WordPress Theme for Public Release

Similar to How to Prepare a WordPress Theme for Public Release (20)

Recently uploaded

Recently uploaded (20)

How to Prepare a WordPress Theme for Public Release

Editor's Notes