Successfully reported this slideshow.

How to Prepare a WordPress Theme for Public Release

32

Share

Loading in …3
×
1 of 204
1 of 204

How to Prepare a WordPress Theme for Public Release

32

Share

Download to read offline

A presentation for WordCamp Louisville on how to prepare a theme for distribution. It mainly follows the theme review process outlined at WordPress.org. It also discusses reasons to release a theme and briefly highlights ways to stand out from the crowd.

A presentation for WordCamp Louisville on how to prepare a theme for distribution. It mainly follows the theme review process outlined at WordPress.org. It also discusses reasons to release a theme and briefly highlights ways to stand out from the crowd.

More Related Content

Related Books

Free with a 14 day trial from Scribd

See all

Related Audiobooks

Free with a 14 day trial from Scribd

See all

How to Prepare a WordPress Theme for Public Release

  1. HOW TO PUBLIC RELEASE — for — prepare a WordPress THEME
  2. DAVID YEISER — on — twitter: @davidyeiser the web: designintellection.com
  3. 1. Why release a theme? 2. The process. 3. Ways to stand-out.
  4. THEM WHAT IS A THEME?
  5. wp-admin/ wp-content/ — themes/ — — default/ — — your-theme/ wp-includes/
  6. HY REL WHY RELEASE a theme?
  7. WHY RELEASE a theme? • Give back to the community • Learn something new • Get noticed • Build a reputation • Get paid work • Publish!
  8. GIVE B GIVE BACK :)
  9. LEARN LEARN • Child themes • Product development • Community management • Professional development
  10. NOTICE GET NOTICED THEMES PLUGINS 24,038,221 downloads 132,931,828 downloads TOTAL downloads Numbers as of 2010-12-01
  11. NOTICE GET NOTICED THEMES PLUGINS 18,562 downloads/theme 10,919 downloads/plugin AVG. PER ITEM downloads Numbers as of 2010-12-01
  12. NOTICE GET NOTICED
  13. NOTICE GET NOTICED Embrace Distribution channels
  14. NOTICE GET NOTICED
  15. EPUTA REPUTATION PRODUCT PLATFORM +
  16. EPUTA REPUTATION Attainable. But not easy. Blogging is hard.
  17. AID WO PAID WORK
  18. AID WO PAID WORK
  19. AID WO PAID WORK
  20. UBLISH PUBLISH
  21. Magnolia
  22. Magnolia GitHub: https://github.com/davidyeiser/magnolia Trac Ticket: http://themes.trac.wordpress.org/ticket/2215
  23. E THE PROCESS C Six steps O
  24. THE PROCESS Six steps 1. PLAN 2. DESIGN 3. BUILD 4. TEST & CHECK 5. RELEASE 6. SUPPORT
  25. PLAN PLAN Photo credit: http://www.flickr.com/photos/pepemichelle/3645214132/
  26. PLAN PLAN OUT IN
  27. PLAN PLAN NO MAN’S LAND OUT IN
  28. PLAN PLAN Focus • A certain market? • A particular audience? • Scratching your own itch?
  29. PLAN PLAN Browser support • Largely determined by target audience and goals • But ultimately up to you
  30. PLAN PLAN • FREE • FREEMIUM • PREMIUM
  31. DESIGN DESIGN • Browser or graphics editor first • Then integrate WordPress
  32. DESIGN
  33. DESIGN DESIGN FOR ranges not extremes
  34. DESIGN DESIGN FOR ranges not extremes
  35. DESIGN DESIGN FOR ranges not extremes
  36. DESIGN DESIGN FOR ranges not extremes
  37. DESIGN DESIGN FOR ranges not extremes
  38. DESIGN DESIGN FOR ranges not extremes
  39. BUILD BUILD
  40. 2004 wp-admin/ wp-content/ — themes/ — — default/ — — your-public-theme/ — — — index.php — — — style.css wp-includes/
  41. 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
  42. — — — 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/
  43. Advanced
  44. > Be > consitent > in > your > code.
  45. MARKUP <header class="identity"> <hgroup> <h1 class="site-title">Acme Publishing</h1> <h2 class="site-tagline">A clear, concise company description.</h2> </hgroup> </header>
  46. 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!
  47. 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!
  48. 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!
  49. 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!
  50. 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!
  51. 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!
  52. 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!
  53. 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!
  54. Good -- file -- -- organization
  55. 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!
  56. 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
  57. 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
  58. Use dynamic paths. Not relative.
  59. 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!
  60. 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!
  61. 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!
  62. 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!
  63. Watch out for DEPRECATED function calls.
  64. 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!
  65. 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!
  66. 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!
  67. Theme Unit Test BOOKMARK http://codex.wordpress.org/Theme_Unit_Test
  68. style.css header.php index.php footer.php
  69. style.css header.php index.php single.php page.php archive.php footer.php
  70. 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
  71. 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; }
  72. Further… • “Native” support for popular plugins • Look at plugins for WordPress.com • Add theme options
  73. ST & CH TEST & CHECK BOOKMARK http://codex.wordpress.org/Theme_Review
  74. CODE QUALITY Themes are required not to have any notices, warnings, errors; or use of deprecated functions. wp-config.php define('WP_DEBUG', true);
  75. CODE QUALITY Themes are required to utilize current recognized version(s) of (X)HTML and CSS. NOT (entirely) TRUE!
  76. Twenty Ten Theme header.php <!DOCTYPE html>
  77. CODE QUALITY Themes are required to generate no JavaScript errors. Sounds good.
  78. 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
  79. CODE QUALITY Themes are required to have a valid HTML document HEAD: • Valid DOCTYPE declaration
  80. CODE QUALITY: Valid Doctype With HTML 5 it’s simple. header.php <!DOCTYPE html>
  81. CODE QUALITY Themes are required to have a valid HTML document HEAD: • Valid DOCTYPE declaration • <html> tag includes language_attributes()
  82. CODE QUALITY: language_attributes() header.php <html <?php language_attributes(); ?>>
  83. 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.)
  84. CODE QUALITY: XFN Profile link HTML5 exception header.php <head>
  85. 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
  86. CODE QUALITY: Content-Type Again, with HTML 5 it’s easy. header.php <head> <meta charset="<?php bloginfo('charset'); ?>" />
  87. 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
  88. 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('&mdash;', 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 " &mdash; $site_description"; // Add a page number if necessary: if ($paged >= 2 || $page >= 2) echo ' &mdash; ' . sprintf('Page %s', max($paged, $page)); ?> </title>
  89. FUNCTIONALITY Theme is required to incorporate the following WordPress core functionality:
  90. FUNCTIONALITY Theme is required to incorporate the following WordPress core functionality: • Automatic Feed Links
  91. 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');
  92. FUNCTIONALITY Theme is required to incorporate the following WordPress core functionality: • Automatic Feed Links • Widgets
  93. 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');
  94. FUNCTIONALITY: Widgets Define widget area in theme. (2 of 2) sidebar.php <?php if (!dynamic_sidebar('main-sidebar')) : ?> <!-- STUFF --> <?php endif; ?>
  95. FUNCTIONALITY Theme is required to incorporate the following WordPress core functionality: • Automatic Feed Links • Widgets • Comments
  96. 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;
  97. 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>
  98. FUNCTIONALITY: Comments PHP template tag to output appropriate JS for threaded comments. (2 of 4)
  99. FUNCTIONALITY: Comments PHP template tag to output appropriate JS for threaded comments. (2 of 4)
  100. FUNCTIONALITY: Comments 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>
  101. 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
  102. FUNCTIONALITY Theme is recommended to incorporate the following WordPress core functionality, but is not required to do so.
  103. FUNCTIONALITY Theme is recommended to incorporate the following WordPress core functionality, but is not required to do so. • Navigation Menus
  104. 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', ));
  105. 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 } ?>
  106. FUNCTIONALITY Theme is recommended to incorporate the following WordPress core functionality, but is not required to do so. • Navigation Menus • Post Thumbnails
  107. FUNCTIONALITY: Post Thumbnails Register support. (1 of 2) functions.php // This theme uses post thumbnails add_theme_support('post-thumbnails');
  108. 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 } ?>
  109. FUNCTIONALITY Theme is recommended to incorporate the following WordPress core functionality, but is not required to do so. • Navigation Menus • Post Thumbnails • Custom Header
  110. 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
  111. 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
  112. 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:
  113. 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()
  114. TEMPLATE TAGS & HOOKS Required to be placed directly before the <body> tag. header.php <?php wp_head(); ?> </head>
  115. 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()
  116. TEMPLATE TAGS & HOOKS Goes inside the <body> tag. header.php <body <?php body_class(); ?>>
  117. 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
  118. TEMPLATE TAGS & HOOKS 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;
  119. 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()
  120. 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(); ?>>
  121. 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()
  122. 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>')); ?>
  123. 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()
  124. 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">&larr;</span> Older Comments'); ?></div> <div class="nav-next"><?php next_comments_link('Newer Comments <span class="meta- nav">&rarr;</span>'); ?></div> </div> <?php endif; ?>
  125. 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()
  126. 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; ?>
  127. 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>
  128. 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()
  129. TEMPLATE TAGS & HOOKS Directly before the closing </body> tag. footer.php <?php wp_footer(); ?> </body>
  130. INCLUDING FILES If incorporated into the Theme, standard template files are required to be called using the correct template tag
  131. INCLUDING FILES If incorporated into the Theme, standard template files are required to be called using the correct template tag header.php
  132. INCLUDING FILES If incorporated into the Theme, standard template files are required to be called using the correct template tag header.php <?php get_header(); ?> GOOD!
  133. INCLUDING FILES If incorporated into the Theme, standard template files are required to be called using the correct template tag header.php <?php include(TEMPLATEPATH . '/header.php') ?> BAD!
  134. INCLUDING FILES If incorporated into the Theme, standard template files are required to be called using the correct template tag header-secondary.php <?php get_template_part('header', 'secondary'); ?>
  135. INCLUDING FILES If incorporated into the Theme, standard template files are required to be called using the correct template tag html5.js <!--[if lt IE 9]> <script src="<?php echo get_template_directory_uri(); ?>/js/html5.js"></script> <![endif]-->
  136. 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
  137. WORDPRESS-GENERATED CSS CLASSES 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
  138. WORDPRESS-GENERATED CSS CLASSES 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
  139. WORDPRESS-GENERATED CSS CLASSES 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; }
  140. WORDPRESS-GENERATED CSS CLASSES Alignment classes
  141. WORDPRESS-GENERATED CSS CLASSES 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
  142. 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; }
  143. WORDPRESS-GENERATED CSS CLASSES Caption classes
  144. WORDPRESS-GENERATED CSS CLASSES Themes are recommended to support the following WordPress-generated classes. Post Classes: .sticky Comment Classes: .bypostauthor
  145. WORDPRESS-GENERATED CSS CLASSES Themes are recommended to support the following WordPress-generated classes. Post Classes: .sticky Comment Classes: .bypostauthor
  146. 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; }
  147. WORDPRESS-GENERATED CSS CLASSES Post “sticky” classes
  148. WORDPRESS-GENERATED CSS CLASSES Themes are recommended to support the following WordPress-generated classes. Post Classes: .sticky Comment Classes: .bypostauthor
  149. 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; }
  150. WORDPRESS-GENERATED CSS CLASSES Comment by post author classes
  151. THEME TEMPLATE FILES Theme is required to include, at a minimum: • index.php • comments.php • screenshot.png • style.css
  152. THEME TEMPLATE FILES Theme is recommended to include: • 404.php • archive.php • footer.php • header.php • page.php • search.php • sidebar.php • single.php
  153. THEME TEMPLATE FILES Theme may optionally include: • attachment.php • author.php • category.php • date.php • editor-style.css • image.php • tag.php
  154. THEME TEMPLATE FILES Submitted theme are recommended not to include files named like the following. • page-foobar.php • category-foobar.php • tag-foobar.php • taxonomy-foobar.php
  155. 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()
  156. 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
  157. 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.
  158. THEME NAME Theme Name Guidelines are required for new Themes, and recommended for existing Themes.
  159. THEME NAME Theme Name Guidelines are required for new Themes, and recommended for existing Themes. • Don’t use “WordPress” in the name
  160. 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
  161. 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-specific, markup-related term
  162. 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-specific, markup-related term • Don’t credit yourself in the name.
  163. 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-specific, markup-related term • Don’t credit yourself in the name. • Feel free to use the WP in the name.
  164. 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/
  165. 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 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.
  166. THEME UNIT TESTS The Theme must meet all the requirements of the Theme Unit Test. Referenced in the beginning of the “Build” section.
  167. THEME OBSOLESCENCE Themes must be kept current once submitted, approved, and accepted into the Theme Repository.
  168. ELEASE RELEASE
  169. ELEASE RELEASE
  170. ELEASE RELEASE
  171. ELEASE RELEASE PLATFORM
  172. ELEASE RELEASE
  173. UPPOR SUPPORT
  174. UPPOR SUPPORT Roll your own…
  175. UPPOR SUPPORT
  176. UPPOR SUPPORT
  177. UPPOR SUPPORT Pick your poison… ;)
  178. FROM THE WAYS TO STANDOUT CROWD
  179. THEMES THEMES THEMES THEMES THEMES THEMES THEMES AS PLUGINS THEMES THEMES THEMES THEMES THEMES THEMES THEMES THEMES THEMES THEMES THEMES THEMES
  180. iPad
  181. Kindle
  182. Photo credit: http://www.fastcodesign.com/1662356/ideo-creates-three-visions-for-books-in-the-digital-age
  183. Photo credit: http://www.flickr.com/photos/elwillo/4258135741/
  184. Photo credit: http://www.fastcodesign.com/1662197/how-augmented-reality-windshields-could-transform-driving
  185. THEMES THEMES THEMES THEMES THEMES THEMES THEMES AS APPLICATIONS THEMES THEMES THEMES THEMES THEMES THEMES THEMES THEMES THEMES THEMES THEMES THEMES
  186. Traditional AUDIENCE
  187. Application ACTIVITY
  188. DESIGN + Custom content types
  189. THEMES THEMES THEMES THEMES THEMES THEMES THEMES BEYOND WORDPRESS THEMES THEMES THEMES THEMES THEMES THEMES THEMES THEMES THEMES THEMES THEMES THEMES
  190. THANK YOU —!— twitter: @davidyeiser the web: designintellection.com

Editor's Notes

  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • ×