Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
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• Pub...
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 downl...
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/p...
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
AID WO PAID WORK
AID WO PAID WORK
AID WO PAID WORK
AID WO PAID WORK
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.flickr.com/photos/pepemichelle/3645214132/
PLANPLANPhoto credit: http://www.flickr.com/photos/pepemichelle/3645214132/
PLANPLANPhoto credit: http://www.flickr.com/photos/pepemichelle/3645214132/
PLAN PLANOUT     IN
PLAN PLANOUT     IN
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 first
DESIGN DESIGN• Browser or graphics editor first• Then integrate WordPress
DESIGN
DESIGNDESIGN FOR
DESIGNDESIGN FORranges not extremes
DESIGNDESIGN FORranges not extremes
DESIGNDESIGN FORranges not extremes
DESIGNDESIGN FORranges not extremes
DESIGNDESIGN FORranges not extremes
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...
—   —   —   page.php—   —   —   category.php—   —   —   tag.php                             2010—   —   —   taxonomy.php— ...
Advanced
>   Be>   consitent>   in>   your>   code.
MARKUP <header class="identity">         <hgroup>                    <h1 class="site-title">Acme Publishing</h1>          ...
MARKUP <header class="identity">         <hgroup>                    <h1 class="site-title">Acme Publishing</h1>          ...
MARKUP <header class="identity">         <hgroup>                    <h1 class="site-title">Acme Publishing</h1>          ...
MARKUP <header class="identity">         <hgroup>                    <h1 class="site-title">Acme Publishing</h1>          ...
MARKUP <header class="identity">         <hgroup>                    <h1 class="site-title">Acme Publishing</h1>          ...
MARKUP <header class="identity">         <hgroup>                    <h1 class="site-title">Acme Publishing</h1>          ...
MARKUP <header class="identity">         <hgroup>                    <h1 class="site-title">Acme Publishing</h1>          ...
MARKUP <header class="identity">         <hgroup>                    <h1 class="site-title">Acme Publishing</h1>          ...
MARKUP <header class="identity">         <hgroup>                    <h1 class="site-title">Acme Publishing</h1>          ...
MARKUP <header class="identity">         <hgroup>                    <h1 class="site-title">Acme Publishing</h1>          ...
Good-- file-- -- organization
SOMETHEME/archive.phpfooter.phpheader.phphtml5.jsie.cssie6.cssindex.phpjquery-latest.jspage.phpscreenshot.pngsearch.phpsin...
SOMETHEME/archive.phpfooter.phpheader.phphtml5.jsie.cssie6.cssindex.phpjquery-latest.jspage.phpscreenshot.pngsearch.phpsin...
SOMETHEME/archive.php/css/-- ie.css-- ie6.cssfooter.phpheader.php/images/-- spacer.gifindex.php/js/-- html5.js-- jquery-la...
SOMETHEME//_css/-- ie.css-- ie6.css/_images/-- spacer.gif/_js/-- html5.js-- jquery-latest.jsarchive.phpfooter.phpheader.ph...
Use dynamic paths.Not relative.
CODE<header class="identity">    <hgroup>                         <h1 class="site-title">                  </h1>          ...
CODE<header class="identity">    <hgroup>                         <h1 class="site-title">                  </h1>          ...
CODE<header class="identity">    <hgroup>                         <h1 class="site-title">                  </h1>          ...
CODE<header class="identity">    <hgroup>                         <h1 class="site-title">                  </h1>          ...
CODE<header class="identity">    <hgroup>                         <h1 class="site-title">                  </h1>          ...
Watch out forDEPRECATEDfunction calls.
CODE<header class="identity">    <hgroup>                         <h1 class="site-title">                  </h1>          ...
CODE<header class="identity">    <hgroup>                         <h1 class="site-title">                  </h1>          ...
CODE<header class="identity">    <hgroup>                         <h1 class="site-title">                  </h1>          ...
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.p...
STYLE.CSStable { width:100%; margin-bottom:22px; border-bottom:2px solid #ccc; }th { padding:5px; border-right:1px solid #...
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-config.php d...
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 lan...
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 lan...
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 lan...
CODE QUALITY: XFN Profile link HTML5 exception header.php <head>
CODE QUALITY Themes are required to have a valid HTML document HEAD: • Valid DOCTYPE declaration • <html> tag includes lan...
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 lan...
CODE QUALITY: <title> tag Copied from the Twenty Ten theme. header.php <title> <?php       // Print the <title> tag based ...
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 defau...
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_wid...
FUNCTIONALITY: Widgets Define widget area in theme. (2 of 2) sidebar.php <?php if (!dynamic_sidebar(main-sidebar)) : ?>    ...
FUNCTIONALITY Theme is required to incorporate the following WordPress core functionality: • Automatic Feed Links • Widget...
FUNCTIONALITY: Comments Set single comment display and functionality (taken from Twenty Ten theme). (1 of 4) functions.php...
FUNCTIONALITY: Comments PHP template tag to output appropriate JS for threaded comments. (2 of 4) header.php    <?php if (...
FUNCTIONALITY: Comments PHP template tag to output appropriate JS for threaded comments. (2 of 4)
FUNCTIONALITY: Comments PHP template tag to output appropriate JS for threaded comments. (2 of 4)
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="com...
FUNCTIONALITY: Comments Copied from Twenty Ten theme. (4 of 4) comments.php // OTHER STUFF // Copied from Twenty Ten theme...
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...
FUNCTIONALITY: Navigation Menus Register the navigation menu. (1 of 2) functions.php // This theme uses wp_nav_menu() in o...
FUNCTIONALITY: Navigation Menus Add it to the theme. (2 of 2) header.php <?php if (has_nav_menu(primary)) { ?>     <nav cl...
FUNCTIONALITY Theme is recommended to incorporate the following WordPress core functionality, but is not required to do so...
FUNCTIONALITY: Post Thumbnails Register support. (1 of 2) functions.php // This theme uses post thumbnails add_theme_suppo...
FUNCTIONALITY: Post Thumbnails Add it to the theme. (2 of 2) single.php, index.php & archive.php <?php if (has_post_thumbn...
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...
FUNCTIONALITY Theme is recommended to incorporate the following WordPress core functionality, but is not required to do so...
TEMPLATE TAGS & HOOKS All template tags and hooks used in a Theme are required to be implemented properly. The following t...
TEMPLATE TAGS & HOOKS All template tags and hooks used in a Theme are required to be implemented properly. The following t...
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 t...
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 t...
TEMPLATE TAGS & HOOKS Used for images and content. functions.php /* Set width for content and images.        --- The layou...
TEMPLATE TAGS & HOOKS All template tags and hooks used in a Theme are required to be implemented properly. The following t...
TEMPLATE TAGS & HOOKS Same as the body_class() but for posts. index.php, single.php & archive.php <article id="post-<?php ...
TEMPLATE TAGS & HOOKS All template tags and hooks used in a Theme are required to be implemented properly. The following t...
TEMPLATE TAGS & HOOKS If a post or page is paginated. index.php, single.php & archive.php <?php wp_link_pages(array(before...
TEMPLATE TAGS & HOOKS All template tags and hooks used in a Theme are required to be implemented properly. The following t...
TEMPLATE TAGS & HOOKS Comment pagination. (Lifted from the Twenty Ten theme.) comments.php <?php if (get_comment_pages_cou...
TEMPLATE TAGS & HOOKS All template tags and hooks used in a Theme are required to be implemented properly. The following t...
TEMPLATE TAGS & HOOKS Navigating posts on a per-page basis. index.php & archive.php <?php if ($wp_query->max_num_pages > 1...
TEMPLATE TAGS & HOOKS Navigating posts on an individual basis. single.php <section id="post-nav-below" class="post-nav pos...
TEMPLATE TAGS & HOOKS All template tags and hooks used in a Theme are required to be implemented properly. The following t...
TEMPLATE TAGS & HOOKS Directly before the closing </body> tag. footer.php <?php wp_footer(); ?> </body>
INCLUDING FILES If incorporated into the Theme, standard template files are required to be called using the correct templat...
INCLUDING FILES If incorporated into the Theme, standard template files are required to be called using the correct templat...
INCLUDING FILES If incorporated into the Theme, standard template files are required to be called using the correct templat...
INCLUDING FILES If incorporated into the Theme, standard template files are required to be called using the correct templat...
INCLUDING FILES If incorporated into the Theme, standard template files are required to be called using the correct templat...
INCLUDING FILES If incorporated into the Theme, standard template files are required to be called using the correct templat...
INCLUDING FILES If incorporated into the Theme, standard template files are required to be called using the correct templat...
INCLUDING FILES If incorporated into the Theme, standard template files are required to be called using the correct templat...
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....
WORDPRESS-GENERATED CSS CLASSES Themes are required to support the following WordPress-defined CSS classes, or similar elem...
WORDPRESS-GENERATED CSS CLASSES Themes are required to support the following WordPress-defined CSS classes, or similar elem...
WORDPRESS-GENERATED CSS CLASSES Alignment classes style.css .post-content img { border:4px solid #ddd; } .alignleft { marg...
WORDPRESS-GENERATED CSS CLASSES Alignment classes
WORDPRESS-GENERATED CSS CLASSES Alignment classes
Upcoming SlideShare
Loading in …5
×

How to Prepare a WordPress Theme for Public Release

28,793 views

Published on

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.

Published in: Technology, Business
  • https://www.fiverr.com/jadufahad/install-wordpress-setuptheme-like-demo
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • great article,this is i need for build my first wp theme for public release
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Nice articlel. I would like to suggest some themes that will be helpfull for your websites to improove functionalities, look and feel. Here you can take a look at some free &amp; premium wordpress multipurpose and responsive themes https://goo.gl/8aGHB5
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • The slides look awesome! Did you know we’re currently running a competition to win a 3M PocketProjector MP180? This fits perfectly in the ‘3MGenius’ category. To enter, simply tag your presentation with ‘3MGenius’ to be entered. Head over to our page for more details... and don’t forget to follow us to find out if you get shortlisted!
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • China Wholesale Spy camera hidden camera Discount Price!
    http://www.wholesalespycams.com
    http://www.wholesalespycams.com/pinhole-spy-toothbrush-hidden-camera-dvr-8gbmotion-ativated-p-221.html
    http://www.wholesalespycams.com/Wholesale-Discount-bathroom-spy-camera_c628.html
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

How to Prepare a WordPress Theme for Public Release

  1. HOW TO — for — PUBLIC RELEASEprepare aWordPressTHEME
  2. DAVID YEISER — on — twitter: @davidyeiserthe web: designintellection.com
  3. 1. Why release a theme?
  4. 1. Why release a theme?2. The process.
  5. 1. Why release a theme?2. The process.3. Ways to stand-out.
  6. THEM WHAT IS A THEME?
  7. wp-admin/wp-content/— themes/— — default/— — your-theme/wp-includes/
  8. HY REL WHY RELEASE a theme?
  9. WHY RELEASEa theme?
  10. WHY RELEASE a theme?• Give back to the community
  11. WHY RELEASE a theme?• Give back to the community• Learn something new
  12. WHY RELEASE a theme?• Give back to the community• Learn something new• Get noticed
  13. WHY RELEASE a theme?• Give back to the community• Learn something new• Get noticed• Build a reputation
  14. WHY RELEASE a theme?• Give back to the community• Learn something new• Get noticed• Build a reputation• Get paid work
  15. WHY RELEASE a theme?• Give back to the community• Learn something new• Get noticed• Build a reputation• Get paid work• Publish!
  16. GIVE BGIVE BACK
  17. GIVE BGIVE BACK :)
  18. LEARNLEARN
  19. LEARNLEARN• Child themes
  20. LEARNLEARN• Child themes• Product development
  21. LEARNLEARN• Child themes• Product development• Community management
  22. LEARNLEARN• Child themes• Product development• Community management• Professional development
  23. NOTICE GET NOTICED
  24. NOTICE GET NOTICED TOTAL downloads Numbers as of 2010-12-01
  25. NOTICE GET NOTICED THEMES 24,038,221 downloads TOTAL downloads Numbers as of 2010-12-01
  26. NOTICE GET NOTICED THEMES PLUGINS 24,038,221 downloads 132,931,828 downloads TOTAL downloads Numbers as of 2010-12-01
  27. NOTICE GET NOTICED
  28. NOTICE GET NOTICED AVG. PER ITEM downloads Numbers as of 2010-12-01
  29. NOTICE GET NOTICED THEMES 18,562 downloads/theme AVG. PER ITEM downloads Numbers as of 2010-12-01
  30. NOTICE GET NOTICED THEMES PLUGINS 18,562 downloads/theme 10,919 downloads/plugin AVG. PER ITEM downloads Numbers as of 2010-12-01
  31. NOTICE GET NOTICED
  32. NOTICE GET NOTICED Embrace Distribution channels
  33. NOTICE GET NOTICED
  34. EPUTAREPUTATION
  35. EPUTAREPUTATIONPRODUCT
  36. EPUTAREPUTATIONPRODUCT PLATFORM +
  37. EPUTAREPUTATION
  38. EPUTAREPUTATIONAttainable.
  39. EPUTAREPUTATIONAttainable.But not easy.
  40. EPUTAREPUTATIONAttainable.But not easy.Blogging is hard.
  41. AID WO PAID WORK
  42. AID WO PAID WORK
  43. AID WO PAID WORK
  44. AID WO PAID WORK
  45. AID WO PAID WORK
  46. AID WO PAID WORK
  47. UBLISHPUBLISH
  48. Magnolia
  49. MagnoliaGitHub: https://github.com/davidyeiser/magnoliaTrac Ticket: http://themes.trac.wordpress.org/ticket/2215
  50. ETHE PROCESSCSix stepsO
  51. THE PROCESSSix steps
  52. THE PROCESSSix steps1. PLAN
  53. THE PROCESS Six steps1. PLAN2. DESIGN
  54. THE PROCESS Six steps1. PLAN2. DESIGN3. BUILD
  55. THE PROCESS Six steps1. PLAN2. DESIGN3. BUILD4. TEST & CHECK
  56. THE PROCESS Six steps1. PLAN2. DESIGN3. BUILD4. TEST & CHECK5. RELEASE
  57. THE PROCESS Six steps1. PLAN2. DESIGN3. BUILD4. TEST & CHECK5. RELEASE6. SUPPORT
  58. PLANPLANPhoto credit: http://www.flickr.com/photos/pepemichelle/3645214132/
  59. PLANPLANPhoto credit: http://www.flickr.com/photos/pepemichelle/3645214132/
  60. PLANPLANPhoto credit: http://www.flickr.com/photos/pepemichelle/3645214132/
  61. PLAN PLANOUT IN
  62. PLAN PLANOUT IN
  63. PLAN PLANOUT IN
  64. PLAN PLAN NO MAN’S LANDOUT IN
  65. PLANPLANFocus
  66. PLAN PLAN Focus• A certain market?
  67. PLAN PLAN Focus• A certain market?• A particular audience?
  68. PLAN PLAN Focus• A certain market?• A particular audience?• Scratching your own itch?
  69. PLANPLANBrowser support
  70. PLAN PLAN Browser support• Largely determined by target audience and goals
  71. PLAN PLAN Browser support• Largely determined by target audience and goals• But ultimately up to you
  72. PLANPLAN
  73. PLANPLAN• FREE
  74. PLANPLAN• FREE• FREEMIUM
  75. PLANPLAN• FREE• FREEMIUM• PREMIUM
  76. DESIGNDESIGN
  77. DESIGN DESIGN• Browser or graphics editor first
  78. DESIGN DESIGN• Browser or graphics editor first• Then integrate WordPress
  79. DESIGN
  80. DESIGNDESIGN FOR
  81. DESIGNDESIGN FORranges not extremes
  82. DESIGNDESIGN FORranges not extremes
  83. DESIGNDESIGN FORranges not extremes
  84. DESIGNDESIGN FORranges not extremes
  85. DESIGNDESIGN FORranges not extremes
  86. DESIGNDESIGN FORranges not extremes
  87. BUILDBUILD
  88. 2004wp-admin/wp-content/— themes/— — default/— — your-public-theme/— — — index.php— — — style.csswp-includes/
  89. 2010wp-admin/wp-content/— themes/— — default/— — your-public-theme/— — — header.php— — — index.php— — — style.css— — — rtl.css— — — comments.php— — — front-page.php— — — home.php
  90. — — — 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
  91. Advanced
  92. > Be> consitent> in> your> code.
  93. MARKUP <header class="identity"> <hgroup> <h1 class="site-title">Acme Publishing</h1> <h2 class="site-tagline">A clear, concise company description.</h2> </hgroup> </header>
  94. 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 { … }
  95. 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!
  96. 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!
  97. 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!
  98. 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!
  99. 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!
  100. 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!
  101. 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!
  102. 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!
  103. Good-- file-- -- organization
  104. SOMETHEME/archive.phpfooter.phpheader.phphtml5.jsie.cssie6.cssindex.phpjquery-latest.jspage.phpscreenshot.pngsearch.phpsingle.phpspacer.gifstyle.css
  105. SOMETHEME/archive.phpfooter.phpheader.phphtml5.jsie.cssie6.cssindex.phpjquery-latest.jspage.phpscreenshot.pngsearch.phpsingle.phpspacer.gifstyle.css BAD!
  106. 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!
  107. 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!
  108. Use dynamic paths.Not relative.
  109. 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>
  110. 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!
  111. 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!
  112. 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!
  113. 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!
  114. Watch out forDEPRECATEDfunction calls.
  115. 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!
  116. 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!
  117. 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!
  118. Theme Unit Test
  119. Theme Unit TestBOOKMARKhttp://codex.wordpress.org/Theme_Unit_Test
  120. style.cssheader.phpindex.phpfooter.php
  121. style.cssheader.phpindex.php single.php page.php archive.phpfooter.php
  122. 404.phparchive.phpcomments.php/css/footer.phpfunctions.phpheader.phpindex.php/js/license.txtpage.phpREADME.txtscreenshot.pngsearch.phpsidebar.phpsingle.phpstyle.css
  123. 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; }
  124. Further…
  125. Further…• “Native” support for popular plugins
  126. Further…• “Native” support for popular plugins• Look at plugins for WordPress.com
  127. Further…• “Native” support for popular plugins• Look at plugins for WordPress.com• Add theme options
  128. ST & CHTEST & CHECK
  129. ST & CHTEST & CHECKBOOKMARKhttp://codex.wordpress.org/Theme_Review
  130. CODE QUALITY Themes are required not to have any notices, warnings, errors; or use of deprecated functions.
  131. CODE QUALITY Themes are required not to have any notices, warnings, errors; or use of deprecated functions. wp-config.php define(WP_DEBUG, true);
  132. CODE QUALITY Themes are required to utilize current recognized version(s) of (X)HTML and CSS.
  133. CODE QUALITY Themes are required to utilize current recognized version(s) of (X)HTML and CSS. NOT (entirely) TRUE!
  134. Twenty Ten Theme header.php <!DOCTYPE html>
  135. CODE QUALITY Themes are required to generate no JavaScript errors.
  136. CODE QUALITY Themes are required to generate no JavaScript errors. Sounds good.
  137. 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
  138. CODE QUALITY Themes are required to have a valid HTML document HEAD: • Valid DOCTYPE declaration
  139. CODE QUALITY: Valid Doctype With HTML 5 it’s simple. header.php <!DOCTYPE html>
  140. CODE QUALITY Themes are required to have a valid HTML document HEAD: • Valid DOCTYPE declaration • <html> tag includes language_attributes()
  141. CODE QUALITY: language_attributes() header.php <html <?php language_attributes(); ?>>
  142. 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
  143. CODE QUALITY: XFN Profile link HTML5 exception header.php <head>
  144. 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
  145. CODE QUALITY: Content-Type Again, with HTML 5 it’s easy. header.php <head> <meta charset="<?php bloginfo(charset); ?>" />
  146. 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
  147. 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>
  148. FUNCTIONALITY Theme is required to incorporate the following WordPress core functionality:
  149. FUNCTIONALITY Theme is required to incorporate the following WordPress core functionality: • Automatic Feed Links
  150. 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);
  151. FUNCTIONALITY Theme is required to incorporate the following WordPress core functionality: • Automatic Feed Links • Widgets
  152. 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);
  153. FUNCTIONALITY: Widgets Define widget area in theme. (2 of 2) sidebar.php <?php if (!dynamic_sidebar(main-sidebar)) : ?> <!-- STUFF --> <?php endif; ?>
  154. FUNCTIONALITY Theme is required to incorporate the following WordPress core functionality: • Automatic Feed Links • Widgets • Comments
  155. 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;
  156. 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>
  157. FUNCTIONALITY: Comments PHP template tag to output appropriate JS for threaded comments. (2 of 4)
  158. FUNCTIONALITY: Comments PHP template tag to output appropriate JS for threaded comments. (2 of 4)
  159. FUNCTIONALITY: Comments PHP template tag to output appropriate JS for threaded comments. (2 of 4)
  160. 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>
  161. 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
  162. FUNCTIONALITY Theme is recommended to incorporate the following WordPress core functionality, but is not required to do so.
  163. FUNCTIONALITY Theme is recommended to incorporate the following WordPress core functionality, but is not required to do so. • Navigation Menus
  164. 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, ));
  165. 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 } ?>
  166. FUNCTIONALITY Theme is recommended to incorporate the following WordPress core functionality, but is not required to do so. • Navigation Menus
  167. FUNCTIONALITY: Post Thumbnails Register support. (1 of 2) functions.php // This theme uses post thumbnails add_theme_support(post-thumbnails);
  168. 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 } ?>
  169. FUNCTIONALITY Theme is recommended to incorporate the following WordPress core functionality, but is not required to do so. • Navigation Menus • Post Thumbnails • Custom Header
  170. 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
  171. 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
  172. 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
  173. 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:
  174. TEMPLATE TAGS & HOOKS Required to be placed directly before the <body> tag. header.php <?php wp_head(); ?> </head>
  175. 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()
  176. TEMPLATE TAGS & HOOKS Goes inside the <body> tag. header.php <body <?php body_class(); ?>>
  177. 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
  178. 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;
  179. 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()
  180. 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(); ?>>
  181. 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()
  182. 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>)); ?>
  183. 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()
  184. 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; ?>
  185. 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>)
  186. 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; ?>
  187. 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>
  188. 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()
  189. TEMPLATE TAGS & HOOKS Directly before the closing </body> tag. footer.php <?php wp_footer(); ?> </body>
  190. INCLUDING FILES If incorporated into the Theme, standard template files are required to be called using the correct template tag
  191. INCLUDING FILES If incorporated into the Theme, standard template files are required to be called using the correct template tag header.php
  192. 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!
  193. 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!
  194. INCLUDING FILES If incorporated into the Theme, standard template files are required to be called using the correct template tag header-secondary.php
  195. 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); ?>
  196. INCLUDING FILES If incorporated into the Theme, standard template files are required to be called using the correct template tag html5.js
  197. 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]-->
  198. SITE INFORMATION If incorporated into the Theme, site information is required to be called using the correct template tag.
  199. 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
  200. 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
  201. 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
  202. 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; }
  203. WORDPRESS-GENERATED CSS CLASSES Alignment classes
  204. WORDPRESS-GENERATED CSS CLASSES Alignment classes
  205. WORDPRESS-GENERATED CSS CLASSES Alignment classes
  206. WORDPRESS-GENERATED CSS CLASSES Alignment classes
  207. 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
  208. 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; }
  209. WORDPRESS-GENERATED CSS CLASSES Caption classes
  210. WORDPRESS-GENERATED CSS CLASSES Caption classes
  211. WORDPRESS-GENERATED CSS CLASSES Caption classes
  212. WORDPRESS-GENERATED CSS CLASSES Themes are recommended to support the following WordPress-generated classes. Post Classes: .sticky Comment Classes: .bypostauthor
  213. WORDPRESS-GENERATED CSS CLASSES Themes are recommended to support the following WordPress-generated classes. Post Classes: .sticky Comment Classes: .bypostauthor
  214. 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; }
  215. WORDPRESS-GENERATED CSS CLASSES Post “sticky” classes
  216. WORDPRESS-GENERATED CSS CLASSES Themes are recommended to support the following WordPress-generated classes. Post Classes: .sticky Comment Classes: .bypostauthor
  217. 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; }
  218. WORDPRESS-GENERATED CSS CLASSES Comment by post author classes
  219. THEME TEMPLATE FILES Theme is required to include, at a minimum: • index.php • comments.php • screenshot.png • style.css
  220. THEME TEMPLATE FILES Theme is recommended to include: • 404.php • archive.php • footer.php • header.php • page.php • search.php • sidebar.php • single.php
  221. THEME TEMPLATE FILES Theme may optionally include: • attachment.php • author.php • category.php • date.php • editor-style.css • image.php • tag.php
  222. 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
  223. 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()
  224. 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
  225. 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.
  226. THEME NAME Theme Name Guidelines are required for new Themes, and recommended for existing Themes.
  227. THEME NAME Theme Name Guidelines are required for new Themes, and recommended for existing Themes. • Don’t use “WordPress” in the name
  228. 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
  229. 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
  230. 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.
  231. 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.
  232. CREDIT LINKS
  233. CREDIT LINKS Themes may optionally designate Author URI and Theme URI in style.css.
  234. 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.
  235. 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.
  236. 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/
  237. 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.
  238. THEME UNIT TESTS The Theme must meet all the requirements of the Theme Unit Test.
  239. THEME UNIT TESTS The Theme must meet all the requirements of the Theme Unit Test. Referenced in the beginning of the “Build” section.
  240. THEME OBSOLESCENCE Themes must be kept current once submitted, approved, and accepted into the Theme Repository.
  241. ELEASERELEASE
  242. ELEASERELEASE
  243. ELEASERELEASE
  244. ELEASERELEASE
  245. ELEASERELEASE
  246. ELEASERELEASE
  247. ELEASERELEASE PLATFORM
  248. ELEASERELEASE
  249. UPPORSUPPORT
  250. UPPORSUPPORT
  251. UPPORSUPPORTRoll your own…
  252. UPPORSUPPORT
  253. UPPORSUPPORT
  254. UPPORSUPPORTPick your poison… ;)
  255. FROMTHEWAYSTOSTANDOUTCROWD
  256. THEMES THEMES THEMESTHEMES THEMES THEMESTHEMESASPLUGINSTHEMES THEMES THEMESTHEMES THEMES THEMESTHEMES THEMES THEMESTHEMES THEMES THEMES
  257. iPad
  258. Kindle
  259. Photo credit: http://www.fastcodesign.com/1662356/ideo-creates-three-visions-for-books-in-the-digital-age
  260. Photo credit: http://www.flickr.com/photos/elwillo/4258135741/
  261. Photo credit: http://www.fastcodesign.com/1662197/how-augmented-reality-windshields-could-transform-driving
  262. THEMES THEMES THEMESTHEMES THEMES THEMESTHEMESASAPPLICATIONSTHEMES THEMES THEMESTHEMES THEMES THEMESTHEMES THEMES THEMESTHEMES THEMES THEMES
  263. TraditionalAUDIENCE
  264. ApplicationACTIVITY
  265. DESIGN +Custom content types
  266. THEMES THEMES THEMESTHEMES THEMES THEMESTHEMESBEYONDWORDPRESSTHEMES THEMES THEMESTHEMES THEMES THEMESTHEMES THEMES THEMESTHEMES THEMES THEMES
  267. THANK YOU —!— twitter: @davidyeiserthe web: designintellection.com

×