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

20,980

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
2 Comments
32 Likes
Statistics
Notes
  • 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
No Downloads
Views
Total Views
20,980
On Slideshare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
476
Comments
2
Likes
32
Embeds 0
No embeds

No notes for slide
  • \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
  • How to Prepare a WordPress Theme for Public Release

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

      Recortar slides é uma maneira fácil de colecionar informações para acessar mais tarde.

    ×