How to Prepare a WordPress Theme for Public Release

HOW TO — for — PUBLIC RELEASEprepare aWordPressTHEME

DAVID YEISER — on — twitter: @davidyeiserthe web: designintellection.com

1. Why release a theme?

1. Why release a theme?2. The process.

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

THEM WHAT IS A THEME?

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

HY REL WHY RELEASE a theme?

WHY RELEASEa theme?

WHY RELEASE a theme?• Give back to the community

WHY RELEASE a theme?• Give back to the community• Learn something new

WHY RELEASE a theme?• Give back to the community• Learn something new• Get noticed

WHY RELEASE a theme?• Give back to the community• Learn something new• Get noticed• Build a reputation

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

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

GIVE BGIVE BACK

GIVE BGIVE BACK :)

LEARNLEARN

LEARNLEARN• Child themes

LEARNLEARN• Child themes• Product development

LEARNLEARN• Child themes• Product development• Community management

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

NOTICE GET NOTICED

NOTICE GET NOTICED TOTAL downloads Numbers as of 2010-12-01

NOTICE GET NOTICED THEMES 24,038,221 downloads TOTAL downloads Numbers as of 2010-12-01

NOTICE GET NOTICED THEMES PLUGINS 24,038,221 downloads 132,931,828 downloads TOTAL downloads Numbers as of 2010-12-01

NOTICE GET NOTICED

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

NOTICE GET NOTICED THEMES 18,562 downloads/theme AVG. PER ITEM 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

NOTICE GET NOTICED Embrace Distribution channels

NOTICE GET NOTICED

EPUTAREPUTATION

EPUTAREPUTATIONPRODUCT

EPUTAREPUTATIONPRODUCT PLATFORM +

EPUTAREPUTATION

EPUTAREPUTATIONAttainable.

EPUTAREPUTATIONAttainable.But not easy.

EPUTAREPUTATIONAttainable.But not easy.Blogging is hard.

AID WO PAID WORK

UBLISHPUBLISH

Magnolia

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

ETHE PROCESSCSix stepsO

THE PROCESSSix steps

THE PROCESSSix steps1. PLAN

THE PROCESS Six steps1. PLAN2. DESIGN

THE PROCESS Six steps1. PLAN2. DESIGN3. BUILD

THE PROCESS Six steps1. PLAN2. DESIGN3. BUILD4. TEST & CHECK

THE PROCESS Six steps1. PLAN2. DESIGN3. BUILD4. TEST & CHECK5. RELEASE

THE PROCESS Six steps1. PLAN2. DESIGN3. BUILD4. TEST & CHECK5. RELEASE6. SUPPORT

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

PLAN PLANOUT IN

PLAN PLAN NO MAN’S LANDOUT IN

PLANPLANFocus

PLAN PLAN Focus• A certain market?

PLAN PLAN Focus• A certain market?• A particular audience?

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

PLANPLANBrowser support

PLAN PLAN Browser support• Largely determined by target audience and goals

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

PLANPLAN

PLANPLAN• FREE

PLANPLAN• FREE• FREEMIUM

PLANPLAN• FREE• FREEMIUM• PREMIUM

DESIGNDESIGN

DESIGN DESIGN• Browser or graphics editor ﬁrst

DESIGN DESIGN• Browser or graphics editor ﬁrst• Then integrate WordPress

DESIGN

DESIGNDESIGN FOR

DESIGNDESIGN FORranges not extremes

BUILDBUILD

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

2010wp-admin/wp-content/— themes/— — default/— — your-public-theme/— — — header.php— — — index.php— — — style.css— — — rtl.css— — — comments.php— — — front-page.php— — — home.php

— — — page.php— — — category.php— — — tag.php 2010— — — taxonomy.php— — — author.php— — — date.php— — — archive.php— — — search.php— — — attachment.php— — — image.php— — — 404.php— — — footer.php

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>

MARKUP <header class="identity"> <hgroup> <h1 class="site-title">Acme Publishing</h1> <h2 class="site-tagline">A clear, concise company description.</h2> </hgroup> </header> STYLE.CSS .identity { … } header.identity .site-title { … } h2.site-tagline { … }

MARKUP <header class="identity"> <hgroup> <h1 class="site-title">Acme Publishing</h1> <h2 class="site-tagline">A clear, concise company description.</h2> </hgroup> </header> STYLE.CSS .identity { … } header.identity .site-title { … } h2.site-tagline { … } BAD!

MARKUP <header class="identity"> <hgroup> <h1 class="site-title">Acme Publishing</h1> <h2 class="site-tagline">A clear, concise company description.</h2> </hgroup> </header> STYLE.CSS .identity { … } .site-title { … } .site-tagline { … } GOOD!

Good-- ﬁle-- -- organization

SOMETHEME/archive.phpfooter.phpheader.phphtml5.jsie.cssie6.cssindex.phpjquery-latest.jspage.phpscreenshot.pngsearch.phpsingle.phpspacer.gifstyle.css

SOMETHEME/archive.phpfooter.phpheader.phphtml5.jsie.cssie6.cssindex.phpjquery-latest.jspage.phpscreenshot.pngsearch.phpsingle.phpspacer.gifstyle.css BAD!

SOMETHEME/archive.php/css/-- ie.css-- ie6.cssfooter.phpheader.php/images/-- spacer.gifindex.php/js/-- html5.js-- jquery-latest.jspage.phpscreenshot.pngsearch.phpsingle.phpstyle.css GOOD!

SOMETHEME//_css/-- ie.css-- ie6.css/_images/-- spacer.gif/_js/-- html5.js-- jquery-latest.jsarchive.phpfooter.phpheader.phpindex.phppage.phpscreenshot.pngsearch.phpsingle.phpstyle.css GOOD!

Use dynamic paths.Not relative.

CODE<header class="identity"> <hgroup> <h1 class="site-title"> </h1> <a href="/">Acme Publishing</a> <h2 class="site-tagline">A clear, concise company description.</h2> </hgroup></header>

CODE<header class="identity"> <hgroup> <h1 class="site-title"> </h1> <a href="/">Acme Publishing</a> <h2 class="site-tagline">A clear, concise company description.</h2> </hgroup></header> BAD!

CODE<header class="identity"> <hgroup> <h1 class="site-title"> </h1> <a href="<?php echo home_url(); ?>">Acme Publishing</a> <h2 class="site-tagline">A clear, concise company description.</h2> </hgroup></header> GOOD!

Watch out forDEPRECATEDfunction calls.

CODE<header class="identity"> <hgroup> <h1 class="site-title"> </h1> <a href="<?php echo home_url(); ?>">Acme Publishing</a> <h2 class="site-tagline">A clear, concise company description.</h2> </hgroup></header> GOOD!

CODE<header class="identity"> <hgroup> <h1 class="site-title"> </h1> <a href="<?php get_option("home"); ?>">Acme Publishing</a> <h2 class="site-tagline">A clear, concise company description.</h2> </hgroup></header> BAD!

Theme Unit Test

Theme Unit TestBOOKMARKhttp://codex.wordpress.org/Theme_Unit_Test

style.cssheader.phpindex.phpfooter.php

style.cssheader.phpindex.php single.php page.php archive.phpfooter.php

404.phparchive.phpcomments.php/css/footer.phpfunctions.phpheader.phpindex.php/js/license.txtpage.phpREADME.txtscreenshot.pngsearch.phpsidebar.phpsingle.phpstyle.css

STYLE.CSStable { 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…

Further…• “Native” support for popular plugins

Further…• “Native” support for popular plugins• Look at plugins for WordPress.com

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

ST & CHTEST & CHECK

ST & CHTEST & CHECKBOOKMARKhttp://codex.wordpress.org/Theme_Review

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

CODE QUALITY Themes are required not to have any notices, warnings, errors; or use of deprecated functions. wp-conﬁg.php deﬁne(WP_DEBUG, true);

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

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.

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 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 Themes are required to have a valid HTML document HEAD: • Valid DOCTYPE declaration

CODE QUALITY: Valid Doctype With HTML 5 it’s simple. header.php <!DOCTYPE html>

CODE QUALITY Themes are required to have a valid HTML document HEAD: • Valid DOCTYPE declaration • <html> tag includes language_attributes()

CODE QUALITY: language_attributes() header.php <html <?php language_attributes(); ?>>

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

CODE QUALITY: XFN Proﬁle link HTML5 exception header.php <head>

CODE QUALITY 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: Content-Type Again, with HTML 5 it’s easy. header.php <head> <meta charset="<?php bloginfo(charset); ?>" />

CODE QUALITY 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: <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 Theme is required to incorporate the following WordPress core 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 Theme is required to incorporate the following WordPress core functionality: • Automatic Feed Links • 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 Theme is required to incorporate the following WordPress core functionality: • Automatic Feed Links • 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;

FUNCTIONALITY: Comments 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>

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

FUNCTIONALITY: Comments Call comments.php from single.php (and page.php). (3 of 4) single.php & page.php <aside class="comments"> <?php // The ﬁrst parameter is the ﬁle 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>

FUNCTIONALITY: Comments 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 Theme is recommended to incorporate the following WordPress core functionality, but is not required to do so. • 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 Theme is recommended to incorporate the following WordPress core functionality, but is not required to do so. • Navigation Menus

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 Theme is recommended to incorporate the following WordPress core functionality, but is not required to do so. • Navigation Menus • Post Thumbnails • Custom Header

FUNCTIONALITY Theme is recommended to incorporate the following WordPress core functionality, but is not required to do so. • Navigation Menus • Post Thumbnails • Custom Header • Custom Background

FUNCTIONALITY Theme is recommended to incorporate the following WordPress core functionality, but is not required to do so. • Navigation Menus • 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

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:

TEMPLATE TAGS & HOOKS Required to be placed directly before the <body> tag. header.php <?php wp_head(); ?> </head>

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

TEMPLATE TAGS & HOOKS Goes inside the <body> tag. header.php <body <?php body_class(); ?>>

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() • body_class() • $content_width

TEMPLATE TAGS & HOOKS Used for images and content. functions.php /* Set width for content and images. --- The layout is ﬂuid with max- and min-width constraints. The value below represents the half-way width between */ if (!isset($content_width)) $content_width = 556;

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() • body_class() • $content_width • post_class()

TEMPLATE TAGS & HOOKS Same as the body_class() but for posts. index.php, single.php & archive.php <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>

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() • body_class() • $content_width • post_class() • wp_link_pages()

TEMPLATE TAGS & HOOKS 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>)); ?>

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() • body_class() • $content_width • post_class() • wp_link_pages() • paginate_comments_links() or previous_comments_link()/next_comments_link()

TEMPLATE TAGS & HOOKS 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; ?>

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() • body_class() • $content_width • post_class() • wp_link_pages() • paginate_comments_links() or previous_comments_link()/next_comments_link() • posts_nav_link(), or previous_posts_link()/ next_posts_link(), or paginate_links() • wp_footer() – (immediately before </body>)

TEMPLATE TAGS & HOOKS 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> <span class="clear"></span> </section> <?php endif; ?>

TEMPLATE TAGS & HOOKS 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> <span class="clear"></span> </section>

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() • body_class() • $content_width • post_class() • wp_link_pages() • paginate_comments_links() or previous_comments_link()/next_comments_link() • posts_nav_link(), or previous_posts_link()/ next_posts_link(), or paginate_links() • wp_footer()

TEMPLATE TAGS & HOOKS 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 If incorporated into the Theme, standard template ﬁles are required to be called using the correct template tag header.php

INCLUDING FILES If incorporated into the Theme, standard template ﬁles are required to be called using the correct template tag header.php <?php get_header(); ?> GOOD!

INCLUDING FILES If incorporated into the Theme, standard template ﬁles are required to be called using the correct template tag header.php <?php include(TEMPLATEPATH . /header.php) ?> BAD!

INCLUDING FILES If incorporated into the Theme, standard template ﬁles are required to be called using the correct template tag header-secondary.php

INCLUDING FILES If incorporated into the Theme, standard template ﬁles are required to be called using the correct template tag header-secondary.php <?php get_template_part(header, secondary); ?>

INCLUDING FILES If incorporated into the Theme, standard template ﬁles are required to be called using the correct template tag html5.js

INCLUDING FILES If incorporated into the Theme, standard template ﬁles are required to be called using the correct template tag html5.js

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

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

WORDPRESS-GENERATED CSS CLASSES Alignment classes style.css .post-content img { border:4px solid #ddd; } .alignleft { margin:0 10px 10px 0; ﬂoat:left; } .alignright { margin:0 0 10px 10px; ﬂoat:right; } .aligncenter { display:block; margin:10px auto; text-align:center; }

WORDPRESS-GENERATED CSS CLASSES Alignment classes

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

WORDPRESS-GENERATED CSS 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; }

WORDPRESS-GENERATED CSS CLASSES Caption classes

WORDPRESS-GENERATED CSS CLASSES Themes are recommended to support the following WordPress-generated classes. Post Classes: .sticky Comment Classes: .bypostauthor

WORDPRESS-GENERATED CSS CLASSES 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; }

WORDPRESS-GENERATED CSS CLASSES Post “sticky” classes

WORDPRESS-GENERATED CSS CLASSES Themes are recommended to support the following WordPress-generated classes. Post Classes: .sticky Comment Classes: .bypostauthor

WORDPRESS-GENERATED CSS 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; }

WORDPRESS-GENERATED CSS CLASSES 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 TEMPLATE FILES Theme is recommended to include: • 404.php • archive.php • footer.php • header.php • page.php • search.php • sidebar.php • single.php

THEME TEMPLATE FILES Theme may optionally include: • attachment.php • author.php • category.php • date.php • editor-style.css • image.php • tag.php

THEME TEMPLATE FILES Submitted theme are recommended not to include ﬁles named like the following. • page-foobar.php • category-foobar.php • tag-foobar.php • taxonomy-foobar.php

THEME TEMPLATE FILES 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()

THEME TEMPLATE FILES 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 Theme Name Guidelines are required for new Themes, and recommended for existing Themes. • Don’t use “WordPress” in the name

THEME NAME Theme Name Guidelines are required for new Themes, and recommended for existing Themes. • Don’t use “WordPress” in the name • Don’t use “Theme” in the name

THEME NAME Theme Name Guidelines are required for new Themes, and recommended for existing Themes. • Don’t use “WordPress” in the name • Don’t use “Theme” in the name • Don’t use HTML or CSS or any other version-speciﬁc, markup-related term

THEME NAME Theme Name Guidelines are required for new Themes, and recommended for existing Themes. • Don’t use “WordPress” in the name • Don’t use “Theme” in the name • Don’t use HTML or CSS or any other version-speciﬁc, markup-related term • Don’t credit yourself in the name.

THEME NAME Theme Name Guidelines are required for new Themes, and recommended for existing Themes. • Don’t use “WordPress” in the name • Don’t use “Theme” in the name • Don’t use HTML or CSS or any other version-speciﬁc, markup-related term • Don’t credit yourself in the name. • Feel free to use the WP in the name.

CREDIT LINKS

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

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.

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.

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.

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.

ELEASERELEASE

ELEASERELEASE PLATFORM

ELEASERELEASE

UPPORSUPPORT

UPPORSUPPORTRoll your own…

UPPORSUPPORT

UPPORSUPPORTPick your poison… ;)

FROMTHEWAYSTOSTANDOUTCROWD

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.ﬂickr.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: @davidyeiserthe web: designintellection.com

http://designintellection.com	1434
http://michelsaguiardg.wordpress.com	62
http://www.designintellection.com	38
http://marcbreidbach.posterous.com	7
http://www.twylah.com	6
http://arwensabendstern.tumblr.com	6
http://web.archive.org	4
http://www.globalfundforchildren.com	3
http://edicolaeuropea.blogspot.com	3
file://	2
http://webcache.googleusercontent.com	2
http://static.slidesharecdn.com	2
http://www.odijoodev.com	2
http://translate.googleusercontent.com	1
http://htmledit.squarefree.com	1
http://test6.wp.home	1

How to Prepare a WordPress Theme for Public Release

by David Yeiser on Dec 04, 2010

Accessibility

Categories

Upload Details

Usage Rights

16 Embeds 1,574

Statistics

How to Prepare a WordPress Theme for Public Release Presentation Transcript