How to Prepare a WordPress Theme for Public Release
Upcoming SlideShare
Loading in...5
×
 

How to Prepare a WordPress Theme for Public Release

on

  • 19,228 views

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

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.

Statistics

Views

Total Views
19,228
Views on SlideShare
17,623
Embed Views
1,605

Actions

Likes
31
Downloads
466
Comments
2

19 Embeds 1,605

http://designintellection.com 1434
http://michelsaguiardg.wordpress.com 76
http://www.designintellection.com 38
http://web.archive.org 10
http://www.academicid.com 9
http://marcbreidbach.posterous.com 7
http://arwensabendstern.tumblr.com 6
http://www.twylah.com 6
http://www.globalfundforchildren.com 3
http://edicolaeuropea.blogspot.com 3
file:// 2
http://webcache.googleusercontent.com 2
http://static.slidesharecdn.com 2
http://www.odijoodev.com 2
http://translate.googleusercontent.com 1
http://htmledit.squarefree.com 1
http://test6.wp.home 1
http://themedevp2.wordpress.com 1
http://awesomepitch.co 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • 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!
    Are you sure you want to
    Your message goes here
    Processing…
  • 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
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \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 How to Prepare a WordPress Theme for Public Release Presentation Transcript

  • HOW TO — for — PUBLIC RELEASEprepare aWordPressTHEME
  • DAVID YEISER — on — twitter: @davidyeiserthe web: designintellection.com
  • 1. Why release a theme?
  • 1. Why release a theme?2. The process.
  • 1. Why release a theme?2. The process.3. Ways to stand-out.
  • THEM WHAT IS A THEME?
  • wp-admin/wp-content/— themes/— — default/— — your-theme/wp-includes/
  • HY REL WHY RELEASE a theme?
  • WHY RELEASEa theme?
  • WHY RELEASE a theme?• Give back to the community
  • WHY RELEASE a theme?• Give back to the community• Learn something new
  • WHY RELEASE a theme?• Give back to the community• Learn something new• Get noticed
  • WHY RELEASE a theme?• Give back to the community• Learn something new• Get noticed• Build a reputation
  • WHY RELEASE a theme?• Give back to the community• Learn something new• Get noticed• Build a reputation• Get paid work
  • WHY RELEASE a theme?• Give back to the community• Learn something new• Get noticed• Build a reputation• Get paid work• Publish!
  • GIVE BGIVE BACK
  • GIVE BGIVE BACK :)
  • LEARNLEARN
  • LEARNLEARN• Child themes
  • LEARNLEARN• Child themes• Product development
  • LEARNLEARN• Child themes• Product development• Community management
  • LEARNLEARN• Child themes• Product development• Community management• Professional development
  • NOTICE GET NOTICED
  • NOTICE GET NOTICED TOTAL downloads Numbers as of 2010-12-01
  • NOTICE GET NOTICED THEMES 24,038,221 downloads TOTAL downloads Numbers as of 2010-12-01
  • NOTICE GET NOTICED THEMES PLUGINS 24,038,221 downloads 132,931,828 downloads TOTAL downloads Numbers as of 2010-12-01
  • NOTICE GET NOTICED
  • NOTICE GET NOTICED AVG. PER ITEM downloads Numbers as of 2010-12-01
  • NOTICE GET NOTICED THEMES 18,562 downloads/theme AVG. PER ITEM downloads Numbers as of 2010-12-01
  • NOTICE GET NOTICED THEMES PLUGINS 18,562 downloads/theme 10,919 downloads/plugin AVG. PER ITEM downloads Numbers as of 2010-12-01
  • NOTICE GET NOTICED
  • NOTICE GET NOTICED Embrace Distribution channels
  • NOTICE GET NOTICED
  • EPUTAREPUTATION
  • EPUTAREPUTATIONPRODUCT
  • EPUTAREPUTATIONPRODUCT PLATFORM +
  • EPUTAREPUTATION
  • EPUTAREPUTATIONAttainable.
  • EPUTAREPUTATIONAttainable.But not easy.
  • EPUTAREPUTATIONAttainable.But not easy.Blogging is hard.
  • AID WO PAID WORK
  • 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.css— — — comments.php— — — front-page.php— — — home.php
  • — — — page.php— — — category.php— — — tag.php 2010— — — taxonomy.php— — — author.php— — — date.php— — — archive.php— — — search.php— — — attachment.php— — — image.php— — — 404.php— — — footer.php
  • Advanced
  • > Be> consitent> in> your> code.
  • MARKUP <header class="identity"> <hgroup> <h1 class="site-title">Acme Publishing</h1> <h2 class="site-tagline">A clear, concise company description.</h2> </hgroup> </header>
  • MARKUP <header class="identity"> <hgroup> <h1 class="site-title">Acme Publishing</h1> <h2 class="site-tagline">A clear, concise company description.</h2> </hgroup> </header> STYLE.CSS .identity { … } header.identity .site-title { … } h2.site-tagline { … }
  • MARKUP <header class="identity"> <hgroup> <h1 class="site-title">Acme Publishing</h1> <h2 class="site-tagline">A clear, concise company description.</h2> </hgroup> </header> STYLE.CSS .identity { … } header.identity .site-title { … } h2.site-tagline { … } BAD!
  • MARKUP <header class="identity"> <hgroup> <h1 class="site-title">Acme Publishing</h1> <h2 class="site-tagline">A clear, concise company description.</h2> </hgroup> </header> STYLE.CSS .identity { … } header.identity .site-title { … } h2.site-tagline { … } BAD!
  • MARKUP <header class="identity"> <hgroup> <h1 class="site-title">Acme Publishing</h1> <h2 class="site-tagline">A clear, concise company description.</h2> </hgroup> </header> STYLE.CSS .identity { … } header.identity .site-title { … } h2.site-tagline { … } BAD!
  • MARKUP <header class="identity"> <hgroup> <h1 class="site-title">Acme Publishing</h1> <h2 class="site-tagline">A clear, concise company description.</h2> </hgroup> </header> STYLE.CSS .identity { … } header.identity .site-title { … } h2.site-tagline { … } BAD!
  • MARKUP <header class="identity"> <hgroup> <h1 class="site-title">Acme Publishing</h1> <h2 class="site-tagline">A clear, concise company description.</h2> </hgroup> </header> STYLE.CSS .identity { … } .site-title { … } .site-tagline { … } GOOD!
  • 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!
  • 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!
  • MARKUP <header class="identity"> <hgroup> <h1 class="site-title">Acme Publishing</h1> <h2 class="site-tagline">A clear, concise company description.</h2> </hgroup> </header> STYLE.CSS .identity { … } .site-title { … } .site-tagline { … } GOOD!
  • Good-- file-- -- organization
  • SOMETHEME/archive.phpfooter.phpheader.phphtml5.jsie.cssie6.cssindex.phpjquery-latest.jspage.phpscreenshot.pngsearch.phpsingle.phpspacer.gifstyle.css
  • SOMETHEME/archive.phpfooter.phpheader.phphtml5.jsie.cssie6.cssindex.phpjquery-latest.jspage.phpscreenshot.pngsearch.phpsingle.phpspacer.gifstyle.css BAD!
  • SOMETHEME/archive.php/css/-- ie.css-- ie6.cssfooter.phpheader.php/images/-- spacer.gifindex.php/js/-- html5.js-- jquery-latest.jspage.phpscreenshot.pngsearch.phpsingle.phpstyle.css GOOD!
  • SOMETHEME//_css/-- ie.css-- ie6.css/_images/-- spacer.gif/_js/-- html5.js-- jquery-latest.jsarchive.phpfooter.phpheader.phpindex.phppage.phpscreenshot.pngsearch.phpsingle.phpstyle.css GOOD!
  • Use dynamic paths.Not relative.
  • CODE<header class="identity"> <hgroup> <h1 class="site-title"> </h1> <a href="/">Acme Publishing</a> <h2 class="site-tagline">A clear, concise company description.</h2> </hgroup></header>
  • CODE<header class="identity"> <hgroup> <h1 class="site-title"> </h1> <a href="/">Acme Publishing</a> <h2 class="site-tagline">A clear, concise company description.</h2> </hgroup></header> BAD!
  • CODE<header class="identity"> <hgroup> <h1 class="site-title"> </h1> <a href="/">Acme Publishing</a> <h2 class="site-tagline">A clear, concise company description.</h2> </hgroup></header> BAD!
  • CODE<header class="identity"> <hgroup> <h1 class="site-title"> </h1> <a href="<?php echo home_url(); ?>">Acme Publishing</a> <h2 class="site-tagline">A clear, concise company description.</h2> </hgroup></header> GOOD!
  • CODE<header class="identity"> <hgroup> <h1 class="site-title"> </h1> <a href="<?php echo home_url(); ?>">Acme Publishing</a> <h2 class="site-tagline">A clear, concise company description.</h2> </hgroup></header> GOOD!
  • Watch out forDEPRECATEDfunction calls.
  • CODE<header class="identity"> <hgroup> <h1 class="site-title"> </h1> <a href="<?php echo home_url(); ?>">Acme Publishing</a> <h2 class="site-tagline">A clear, concise company description.</h2> </hgroup></header> GOOD!
  • CODE<header class="identity"> <hgroup> <h1 class="site-title"> </h1> <a href="<?php get_option("home"); ?>">Acme Publishing</a> <h2 class="site-tagline">A clear, concise company description.</h2> </hgroup></header> BAD!
  • CODE<header class="identity"> <hgroup> <h1 class="site-title"> </h1> <a href="<?php get_option("home"); ?>">Acme Publishing</a> <h2 class="site-tagline">A clear, concise company description.</h2> </hgroup></header> BAD!
  • Theme Unit Test
  • Theme Unit TestBOOKMARKhttp://codex.wordpress.org/Theme_Unit_Test
  • style.cssheader.phpindex.phpfooter.php
  • style.cssheader.phpindex.php single.php page.php archive.phpfooter.php
  • 404.phparchive.phpcomments.php/css/footer.phpfunctions.phpheader.phpindex.php/js/license.txtpage.phpREADME.txtscreenshot.pngsearch.phpsidebar.phpsingle.phpstyle.css
  • STYLE.CSStable { width:100%; margin-bottom:22px; border-bottom:2px solid #ccc; }th { padding:5px; border-right:1px solid #ccc; border-bottom:1px solid #ccc;background-color:#ddd; }td { padding:4px 5px; border-bottom:1px solid #eee; }
  • Further…
  • Further…• “Native” support for popular plugins
  • Further…• “Native” support for popular plugins• Look at plugins for WordPress.com
  • Further…• “Native” support for popular plugins• Look at plugins for WordPress.com• Add theme options
  • ST & CHTEST & CHECK
  • ST & CHTEST & CHECKBOOKMARKhttp://codex.wordpress.org/Theme_Review
  • CODE QUALITY Themes are required not to have any notices, warnings, errors; or use of deprecated functions.
  • CODE QUALITY Themes are required not to have any notices, warnings, errors; or use of deprecated functions. wp-config.php define(WP_DEBUG, true);
  • CODE QUALITY Themes are required to utilize current recognized version(s) of (X)HTML and CSS.
  • CODE QUALITY Themes are required to utilize current recognized version(s) of (X)HTML and CSS. NOT (entirely) TRUE!
  • Twenty Ten Theme header.php <!DOCTYPE html>
  • CODE QUALITY Themes are required to generate no JavaScript errors.
  • CODE QUALITY Themes are required to generate no JavaScript errors. Sounds good.
  • CODE QUALITY Themes are required to have a valid HTML document HEAD: • Valid DOCTYPE declaration • <html> tag includes language_attributes() • Correct XFN profile link in <head> tag: <head profile="http:// gmpg.org/xfn/11"> (Exception: Wholly HTML 5 themes must not have the profile, as HTML 5 does not support it.) • Correct content-type meta declaration • <title> includes bloginfo() for title and description
  • CODE QUALITY Themes are required to have a valid HTML document HEAD: • Valid DOCTYPE declaration
  • CODE QUALITY: Valid Doctype With HTML 5 it’s simple. header.php <!DOCTYPE html>
  • CODE QUALITY Themes are required to have a valid HTML document HEAD: • Valid DOCTYPE declaration • <html> tag includes language_attributes()
  • CODE QUALITY: language_attributes() header.php <html <?php language_attributes(); ?>>
  • CODE QUALITY Themes are required to have a valid HTML document HEAD: • Valid DOCTYPE declaration • <html> tag includes language_attributes() • Correct XFN profile link in <head> tag: <head profile="http://gmpg.org/xfn/11"> (Exception: Wholly HTML 5 themes must not have the profile, as HTML 5 does not support it.) • Correct content-type meta declaration
  • CODE QUALITY: XFN 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 language_attributes() • Correct XFN profile link in <head> tag: <head profile="http://gmpg.org/xfn/11"> (Exception: Wholly HTML 5 themes must not have the profile, as HTML 5 does not support it.) • Correct content-type meta declaration • <title> includes bloginfo() for title and description
  • CODE QUALITY: Content-Type Again, with HTML 5 it’s easy. header.php <head> <meta charset="<?php bloginfo(charset); ?>" />
  • CODE QUALITY Themes are required to have a valid HTML document HEAD: • Valid DOCTYPE declaration • <html> tag includes language_attributes() • Correct XFN profile link in <head> tag: <head profile="http://gmpg.org/xfn/11"> (Exception: Wholly HTML 5 themes must not have the profile, as HTML 5 does not support it.) • Correct content-type meta declaration • <title> includes bloginfo() for title and description
  • CODE QUALITY: <title> tag Copied from the Twenty Ten theme. header.php <title> <?php // Print the <title> tag based on what is being viewed. // Taken from the 2010 theme. global $page, $paged; wp_title(&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>
  • FUNCTIONALITY Theme is required to incorporate the following WordPress core functionality:
  • FUNCTIONALITY Theme is required to incorporate the following WordPress core functionality: • Automatic Feed Links
  • FUNCTIONALITY: Automatic Feed Links Add default posts and comments RSS feed links via wp_head() functions.php // Add default posts and comments RSS feed links to head add_theme_support(automatic-feed-links);
  • FUNCTIONALITY Theme is required to incorporate the following WordPress core functionality: • Automatic Feed Links • Widgets
  • FUNCTIONALITY: Widgets Initiate widget area in the admin and set HTML output. (1 of 2) functions.php function magnolia_widgets_init() { register_sidebar(array( name => Main Sidebar, id => main-sidebar, description => The main sidebar of the site., before_widget => <section id="%1$s" class="secondary-block %2$s"><div>, after_widget => </div></section>, before_title => </div><header class="secondary-block-label"><h1 class="secondary- block-title">, after_title => </h1></header><div class="secondary-block-content">, )); } //Register sidebars by running magnolia_widgets_init() on the widgets_init hook. add_action(widgets_init, magnolia_widgets_init);
  • FUNCTIONALITY: Widgets Define widget area in theme. (2 of 2) sidebar.php <?php if (!dynamic_sidebar(main-sidebar)) : ?> <!-- STUFF --> <?php endif; ?>
  • FUNCTIONALITY Theme is required to incorporate the following WordPress core functionality: • Automatic Feed Links • Widgets • Comments
  • FUNCTIONALITY: Comments Set single comment display and functionality (taken from Twenty Ten theme). (1 of 4) functions.php if (!function_exists(magnolia_comment)) : function magnolia_comment($comment, $args, $depth) { // Comment function data from Twenty Ten theme. } endif;
  • FUNCTIONALITY: Comments PHP template tag to output appropriate JS for threaded comments. (2 of 4) header.php <?php if (is_singular()) { wp_enqueue_script(comment-reply); } ?> <?php wp_head(); ?> </head>
  • FUNCTIONALITY: Comments PHP template tag to output appropriate JS for threaded comments. (2 of 4)
  • FUNCTIONALITY: Comments 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="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>
  • FUNCTIONALITY: Comments Copied from Twenty Ten theme. (4 of 4) comments.php // OTHER STUFF // Copied from Twenty Ten theme. // Have to change a few things though. // Primarily the call to the function we created in functions.php <?php wp_list_comments(array(callback => magnolia_comment)); ?> // OTHER STUFF
  • FUNCTIONALITY Theme is recommended to incorporate the following WordPress core functionality, but is not required to do so.
  • FUNCTIONALITY Theme is recommended to incorporate the following WordPress core functionality, but is not required to do so. • Navigation Menus
  • FUNCTIONALITY: Navigation Menus Register the navigation menu. (1 of 2) functions.php // This theme uses wp_nav_menu() in one location. register_nav_menus(array( primary => Primary Navigation, ));
  • FUNCTIONALITY: Navigation Menus Add it to the theme. (2 of 2) header.php <?php if (has_nav_menu(primary)) { ?> <nav class="main-nav"> <?php wp_nav_menu( array( theme_location => primary, container => , menu_class => main-nav-list, depth => 0, // Sub pages are shown beneath the tabs. ) ); ?> <span class="clear"></span> </nav> <?php } ?>
  • FUNCTIONALITY Theme is recommended to incorporate the following WordPress core functionality, but is not required to do so. • Navigation Menus
  • FUNCTIONALITY: Post Thumbnails Register support. (1 of 2) functions.php // This theme uses post thumbnails add_theme_support(post-thumbnails);
  • FUNCTIONALITY: Post Thumbnails Add it to the theme. (2 of 2) single.php, index.php & archive.php <?php if (has_post_thumbnail()) { ?> <p class="post-thumbnail"><?php the_post_thumbnail(thumbnail); ?></ p> <?php } ?>
  • FUNCTIONALITY Theme is recommended to incorporate the following WordPress core functionality, but is not required to do so. • Navigation Menus • Post Thumbnails • Custom Header
  • FUNCTIONALITY Theme is recommended to incorporate the following WordPress core functionality, but is not required to do so. • Navigation Menus • Post Thumbnails • Custom Header • Custom Background
  • FUNCTIONALITY Theme is recommended to incorporate the following WordPress core functionality, but is not required to do so. • Navigation Menus • Post Thumbnails • Custom Header • Custom Background • Visual Editor CSS
  • TEMPLATE TAGS & HOOKS All template tags and hooks used in a Theme are required to be implemented properly. The following template tags and hooks are required to be included
  • TEMPLATE TAGS & HOOKS All template tags and hooks used in a Theme are required to be implemented properly. The following template tags and hooks are required to be included where appropriate:
  • TEMPLATE TAGS & HOOKS Required to be placed directly before the <body> tag. header.php <?php wp_head(); ?> </head>
  • TEMPLATE TAGS & HOOKS All template tags and hooks used in a Theme are required to be implemented properly. The following template tags and hooks are required to be included where appropriate: • wp_head()
  • TEMPLATE TAGS & HOOKS Goes inside the <body> tag. header.php <body <?php body_class(); ?>>
  • TEMPLATE TAGS & HOOKS All template tags and hooks used in a Theme are required to be implemented properly. The following template tags and hooks are required to be included where appropriate: • wp_head() • body_class() • $content_width
  • TEMPLATE TAGS & HOOKS Used for images and content. functions.php /* Set width for content and images. --- The layout is fluid with max- and min-width constraints. The value below represents the half-way width between */ if (!isset($content_width)) $content_width = 556;
  • TEMPLATE TAGS & HOOKS All template tags and hooks used in a Theme are required to be implemented properly. The following template tags and hooks are required to be included where appropriate: • wp_head() • body_class() • $content_width • post_class()
  • TEMPLATE TAGS & HOOKS Same as the body_class() but for posts. index.php, single.php & archive.php <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
  • TEMPLATE TAGS & HOOKS All template tags and hooks used in a Theme are required to be implemented properly. The following template tags and hooks are required to be included where appropriate: • wp_head() • body_class() • $content_width • post_class() • wp_link_pages()
  • TEMPLATE TAGS & HOOKS If a post or page is paginated. index.php, single.php & archive.php <?php wp_link_pages(array(before => <div class="post-pages"> . <span class="post-pages- label">Pages:</span> , after => </div>)); ?>
  • TEMPLATE TAGS & HOOKS All template tags and hooks used in a Theme are required to be implemented properly. The following template tags and hooks are required to be included where appropriate: • wp_head() • body_class() • $content_width • post_class() • wp_link_pages() • paginate_comments_links() or previous_comments_link()/next_comments_link()
  • TEMPLATE TAGS & HOOKS Comment pagination. (Lifted from the Twenty Ten theme.) comments.php <?php if (get_comment_pages_count() > 1 && get_option(page_comments)) : ?> <div class="navigation"> <div class="nav-previous"><?php previous_comments_link(<span class="meta- nav">&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; ?>
  • TEMPLATE TAGS & HOOKS All template tags and hooks used in a Theme are required to be implemented properly. The following template tags and hooks are required to be included where appropriate: • wp_head() • body_class() • $content_width • post_class() • wp_link_pages() • paginate_comments_links() or previous_comments_link()/next_comments_link() • posts_nav_link(), or previous_posts_link()/ next_posts_link(), or paginate_links() • wp_footer() – (immediately before </body>)
  • TEMPLATE TAGS & HOOKS Navigating posts on a per-page basis. index.php & archive.php <?php if ($wp_query->max_num_pages > 1) : ?> <section id="post-nav-below" class="post-nav"> <span class="post-nav-older"><?php next_posts_link(&#8592; Older posts); ?></span> <span class="post-nav-newer"><?php previous_posts_link(Newer posts &#8594;); ?></ span> <span class="clear"></span> </section> <?php endif; ?>
  • TEMPLATE TAGS & HOOKS Navigating posts on an individual basis. single.php <section id="post-nav-below" class="post-nav post-nav-single post-nav-single-below"> <span class="post-nav-older"><?php previous_post_link(%link, &#8592; Previous Post); ?></ span> <span class="post-nav-newer"><?php next_post_link(%link, Next Post &#8594;); ?></span> <span class="clear"></span> </section>
  • TEMPLATE TAGS & HOOKS All template tags and hooks used in a Theme are required to be implemented properly. The following template tags and hooks are required to be included where appropriate: • wp_head() • body_class() • $content_width • post_class() • wp_link_pages() • paginate_comments_links() or previous_comments_link()/next_comments_link() • posts_nav_link(), or previous_posts_link()/ next_posts_link(), or paginate_links() • wp_footer()
  • TEMPLATE TAGS & HOOKS Directly before the closing </body> tag. footer.php <?php wp_footer(); ?> </body>
  • INCLUDING FILES If incorporated into the Theme, standard template files are required to be called using the correct template tag
  • INCLUDING FILES If incorporated into the Theme, standard template files are required to be called using the correct template tag header.php
  • 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!
  • 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!
  • INCLUDING FILES If incorporated into the Theme, standard template files are required to be called using the correct template tag header-secondary.php
  • 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); ?>
  • INCLUDING FILES If incorporated into the Theme, standard template files are required to be called using the correct template tag html5.js
  • 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]-->
  • SITE INFORMATION If incorporated into the Theme, site information is required to be called using the correct template tag.
  • SITE INFORMATION If incorporated into the Theme, site information is required to be called using the correct template tag. This is what we talked about in the “Build” section
  • WORDPRESS-GENERATED CSS CLASSES Themes are required to support the following WordPress-defined CSS classes, or similar elements Alignment Classes: .aligncenter .alignleft .alignright Caption Related Classes: .wp-caption .wp-caption-text .gallery-caption
  • 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
  • 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; }
  • WORDPRESS-GENERATED CSS CLASSES Alignment classes
  • WORDPRESS-GENERATED CSS CLASSES Alignment classes
  • WORDPRESS-GENERATED CSS CLASSES Alignment classes
  • WORDPRESS-GENERATED CSS CLASSES Alignment classes
  • 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
  • WORDPRESS-GENERATED CSS CLASSES Caption classes style.css .wp-caption { padding:10px; background-color:#eee; -webkit-border-radius:5px; -moz-border-radius: 5px; border-radius:5px; } .wp-caption-text { padding:5px 0 10px 0; font-size:13px; font-style:italic; line-height:16px; color:#777; } .post-content .gallery-item { padding-top:15px; padding-bottom:0; border-top:1px solid #eee; } .post-content .gallery-icon { } .post-content .gallery-caption { padding:0 10px 10px 10px; font-size:13px; font-style:italic; line- height:16px; color:#777; }
  • WORDPRESS-GENERATED CSS CLASSES Caption classes
  • WORDPRESS-GENERATED CSS CLASSES Caption classes
  • WORDPRESS-GENERATED CSS CLASSES Caption classes
  • WORDPRESS-GENERATED CSS CLASSES Themes are recommended to support the following WordPress-generated classes. Post Classes: .sticky Comment Classes: .bypostauthor
  • WORDPRESS-GENERATED CSS CLASSES Themes are recommended to support the following WordPress-generated classes. Post Classes: .sticky Comment Classes: .bypostauthor
  • WORDPRESS-GENERATED CSS CLASSES Post “sticky” classes style.css .sticky { padding:30px 15px; border-top:4px solid #ddddc1; background-color:#ffffe3; } .sticky .post-date { color:#adad93; } .sticky .post-footer { background-image:none; border:1px solid #ddddc1; background-color:#eeeed2; } .sticky .post-meta { color:#adad93; border-bottom-color:#ddddc1; } .sticky .post-meta em, .sticky .post-tags a { color:#adad93; } .sticky .post-tags { border-top-color:#fffff3; } .sticky .post-pages { border:1px dotted #ddddc1; } .sticky .post-pages a { background-color:#ddddc1; } .sticky .post-pages a:hover, .sticky .post-pages a:focus { background-color:#ccccb0; }
  • WORDPRESS-GENERATED CSS CLASSES Post “sticky” classes
  • WORDPRESS-GENERATED CSS CLASSES Themes are recommended to support the following WordPress-generated classes. Post Classes: .sticky Comment Classes: .bypostauthor
  • WORDPRESS-GENERATED CSS CLASSES Comment by post author classes style.css .commentlist .bypostauthor { padding:10px; border-bottom-color:#eeeed2; background-color:#ffffe3; } .bypostauthor .avatar { border-color:#ddddc1; } .bypostauthor .comment-author { color:#adad93; } .bypostauthor .comment-meta a, .bypostauthor .comment-meta a:visited { color:#adad93; }
  • WORDPRESS-GENERATED CSS CLASSES Comment by post author classes
  • THEME TEMPLATE FILES Theme is required to include, at a minimum: • index.php • comments.php • screenshot.png • style.css
  • THEME TEMPLATE FILES Theme is recommended to include: • 404.php • archive.php • footer.php • header.php • page.php • search.php • sidebar.php • single.php
  • THEME TEMPLATE FILES Theme may optionally include: • attachment.php • author.php • category.php • date.php • editor-style.css • image.php • tag.php
  • THEME TEMPLATE FILES Submitted theme are recommended not to include files named like the following. • page-foobar.php • category-foobar.php • tag-foobar.php • taxonomy-foobar.php
  • THEME TEMPLATE FILES Themes are recommended to use core markup for the following forms, using the indicated template tag: • Login Form — wp_login_form() • Search Form — wp_search_form()
  • THEME TEMPLATE FILES Themes are recommended to use core markup for the following forms, using the indicated template tag: • Login Form — wp_login_form() • Search Form — wp_search_form() searchform.php
  • LICENSING Themes are required to be 100% GPL-licensed, or use a GPL-compatible license. This includes all PHP, HTML, CSS, images, fonts, icons, and everything else. All of the theme must be GPL-Compatible.
  • THEME NAME Theme Name Guidelines are required for new Themes, and recommended for existing Themes.
  • THEME NAME Theme Name Guidelines are required for new Themes, and recommended for existing Themes. • Don’t use “WordPress” in the name
  • THEME NAME Theme Name Guidelines are required for new Themes, and recommended for existing Themes. • Don’t use “WordPress” in the name • Don’t use “Theme” in the name
  • THEME NAME Theme Name Guidelines are required for new Themes, and recommended for existing Themes. • Don’t use “WordPress” in the name • Don’t use “Theme” in the name • Don’t use HTML or CSS or any other version-specific, markup-related term
  • THEME NAME Theme Name Guidelines are required for new Themes, and recommended for existing Themes. • Don’t use “WordPress” in the name • Don’t use “Theme” in the name • Don’t use HTML or CSS or any other version-specific, markup-related term • Don’t credit yourself in the name.
  • THEME NAME Theme Name Guidelines are required for new Themes, and recommended for existing Themes. • Don’t use “WordPress” in the name • Don’t use “Theme” in the name • Don’t use HTML or CSS or any other version-specific, markup-related term • Don’t credit yourself in the name. • Feel free to use the WP in the name.
  • CREDIT LINKS
  • CREDIT LINKS Themes may optionally designate Author URI and Theme URI in style.css.
  • CREDIT LINKS Themes may optionally designate Author URI and Theme URI in style.css. Themes may optionally include a public-facing credit link in the Theme footer.
  • CREDIT LINKS Themes may optionally designate Author URI and Theme URI in style.css. Themes may optionally include a public-facing credit link in the Theme footer. Themes may optionally include a Theme Option to display additional credit links or text.
  • CREDIT LINKS Themes may optionally designate Author URI and Theme URI in style.css. Themes may optionally include a public-facing credit link in the Theme footer. Themes may optionally include a Theme Option to display additional credit links or text. BOOKMARK http://themeshaper.com/sample-theme-options/
  • THEME DOCUMENTATION Please be clear about the following in your Theme documentation. 1. Indicate what the theme will do. 2. Adhere to the standard naming conventions. 3. Indicate 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.
  • THEME UNIT TESTS The Theme must meet all the requirements of the Theme Unit Test.
  • THEME UNIT TESTS The Theme must meet all the requirements of the Theme Unit Test. Referenced in the beginning of the “Build” section.
  • THEME OBSOLESCENCE Themes must be kept current once submitted, approved, and accepted into the Theme Repository.
  • ELEASERELEASE
  • ELEASERELEASE
  • ELEASERELEASE
  • ELEASERELEASE
  • ELEASERELEASE
  • ELEASERELEASE
  • ELEASERELEASE PLATFORM
  • ELEASERELEASE
  • UPPORSUPPORT
  • UPPORSUPPORT
  • UPPORSUPPORTRoll your own…
  • UPPORSUPPORT
  • UPPORSUPPORT
  • UPPORSUPPORTPick your poison… ;)
  • FROMTHEWAYSTOSTANDOUTCROWD
  • THEMES THEMES THEMESTHEMES THEMES THEMESTHEMESASPLUGINSTHEMES THEMES THEMESTHEMES THEMES THEMESTHEMES THEMES THEMESTHEMES THEMES THEMES
  • iPad
  • Kindle
  • Photo credit: http://www.fastcodesign.com/1662356/ideo-creates-three-visions-for-books-in-the-digital-age
  • Photo credit: http://www.flickr.com/photos/elwillo/4258135741/
  • Photo credit: http://www.fastcodesign.com/1662197/how-augmented-reality-windshields-could-transform-driving
  • THEMES THEMES THEMESTHEMES THEMES THEMESTHEMESASAPPLICATIONSTHEMES THEMES THEMESTHEMES THEMES THEMESTHEMES THEMES THEMESTHEMES THEMES THEMES
  • TraditionalAUDIENCE
  • ApplicationACTIVITY
  • DESIGN +Custom content types
  • THEMES THEMES THEMESTHEMES THEMES THEMESTHEMESBEYONDWORDPRESSTHEMES THEMES THEMESTHEMES THEMES THEMESTHEMES THEMES THEMESTHEMES THEMES THEMES
  • THANK YOU —!— twitter: @davidyeiserthe web: designintellection.com