Rapid WordPress theme
     development
            Jonny Allbut
     Head of Digital - Tanc Design
   @Jonnyauk | www.tancdesign.com
Howdy!

โ€ข Creative designer and developer

โ€ข Working with WordPress since early 2005

โ€ข Part of WPUK committee since 2008

โ€ข Creator & lead developer of Wonder๏ฌ‚ux
Use the right tools
            (for you)
โ€ข Local development server

โ€ข Your favourite code editor(s)

โ€ข VIrtual machines

โ€ข de๏ฌne('WP_DEBUG', true);

โ€ข http://wordpress.org/extend/plugins/wordpress-beta-tester

โ€ข http://codex.wordpress.org/Theme_Unit_Test

โ€ข http://wordpress.org/extend/plugins/developer
Theme development
       principles

โ€ข Stand-alone theme

โ€ข Starter theme

โ€ข Parent theme

โ€ข Theme framework
Child themes - the basics
 /*

 Theme Name: Whooty Child Theme

 Theme URI: http://tancdesign.com

 Description: My cool child theme

 Version: 0.1

 Template: Wonderflux

 Author: Jonny Allbut

 Author URI: http://tancdesign.com

 */
Why theme frameworks
        rock!

โ€ข Toolkit always with you

โ€ข Stop repeating R&D

โ€ข Rapid, consistent development

โ€ข Great for teams
Why I bothered to build
     Wonder๏ฌ‚ux?
โ€ข Built for ๏ฌ‚exibility

โ€ข CSS grids

โ€ข Powerful display functions

โ€ข Full BuddyPress support

โ€ข Easy updates

โ€ข Free (whoot!)
Lessons learned
โ€ข The WordPress way (for better or worse!)

โ€ข Use the core - ๏ฌlters, hooks and functions

โ€ข Keep up with trunk development/Trac

  http://core.trac.wordpress.org/

โ€ข Documentation (boo!)

โ€ข Listen to your users!

โ€ข Don't be scared to ask (but do your R&D!)
Useful CSS for theme
       developers
โ€ข Use/add to the body class

<body <?php body_class('extra');?>>

โ€ข Target menu classes

current-menu-item / current-post-ancestor

โ€ข Target widget classes

<div class="textwidget">
Useful hooks for theme
     developers

โ€ข after_setup_theme

โ€ข pre_get_posts

โ€ข template_redirect
Some R&D links
โ€ข http://codex.wordpress.org/Theme_Review

โ€ข http://codex.wordpress.org/Plugin_API/
  Action_Reference

โ€ข http://ottopress.com/2012/how-to-leverage-the-
  theme-customizer-in-your-own-themes/

โ€ข http://ottopress.com/2012/making-a-custom-control-
  for-the-theme-customizer/

โ€ข http://wp.tutsplus.com/tutorials/creative-coding/
  understanding-the-walker-class/
All criticism, ideas and
  patches welcome!

www.wonder๏ฌ‚ux.com
   @wonder๏ฌ‚ux
             Jonny Allbut
      Head of Digital - Tanc Design
    @Jonnyauk | www.tancdesign.com
Don't hack the core




Every time you do, God kills
  a kitten - DON'T DO IT!

Rapid WordPress theme development

  • 1.
    Rapid WordPress theme development Jonny Allbut Head of Digital - Tanc Design @Jonnyauk | www.tancdesign.com
  • 2.
    Howdy! โ€ข Creative designerand developer โ€ข Working with WordPress since early 2005 โ€ข Part of WPUK committee since 2008 โ€ข Creator & lead developer of Wonder๏ฌ‚ux
  • 3.
    Use the righttools (for you) โ€ข Local development server โ€ข Your favourite code editor(s) โ€ข VIrtual machines โ€ข de๏ฌne('WP_DEBUG', true); โ€ข http://wordpress.org/extend/plugins/wordpress-beta-tester โ€ข http://codex.wordpress.org/Theme_Unit_Test โ€ข http://wordpress.org/extend/plugins/developer
  • 4.
    Theme development principles โ€ข Stand-alone theme โ€ข Starter theme โ€ข Parent theme โ€ข Theme framework
  • 5.
    Child themes -the basics /* Theme Name: Whooty Child Theme Theme URI: http://tancdesign.com Description: My cool child theme Version: 0.1 Template: Wonderflux Author: Jonny Allbut Author URI: http://tancdesign.com */
  • 6.
    Why theme frameworks rock! โ€ข Toolkit always with you โ€ข Stop repeating R&D โ€ข Rapid, consistent development โ€ข Great for teams
  • 7.
    Why I botheredto build Wonder๏ฌ‚ux? โ€ข Built for ๏ฌ‚exibility โ€ข CSS grids โ€ข Powerful display functions โ€ข Full BuddyPress support โ€ข Easy updates โ€ข Free (whoot!)
  • 8.
    Lessons learned โ€ข TheWordPress way (for better or worse!) โ€ข Use the core - ๏ฌlters, hooks and functions โ€ข Keep up with trunk development/Trac http://core.trac.wordpress.org/ โ€ข Documentation (boo!) โ€ข Listen to your users! โ€ข Don't be scared to ask (but do your R&D!)
  • 9.
    Useful CSS fortheme developers โ€ข Use/add to the body class <body <?php body_class('extra');?>> โ€ข Target menu classes current-menu-item / current-post-ancestor โ€ข Target widget classes <div class="textwidget">
  • 10.
    Useful hooks fortheme developers โ€ข after_setup_theme โ€ข pre_get_posts โ€ข template_redirect
  • 11.
    Some R&D links โ€ขhttp://codex.wordpress.org/Theme_Review โ€ข http://codex.wordpress.org/Plugin_API/ Action_Reference โ€ข http://ottopress.com/2012/how-to-leverage-the- theme-customizer-in-your-own-themes/ โ€ข http://ottopress.com/2012/making-a-custom-control- for-the-theme-customizer/ โ€ข http://wp.tutsplus.com/tutorials/creative-coding/ understanding-the-walker-class/
  • 12.
    All criticism, ideasand patches welcome! www.wonder๏ฌ‚ux.com @wonder๏ฌ‚ux Jonny Allbut Head of Digital - Tanc Design @Jonnyauk | www.tancdesign.com
  • 13.
    Don't hack thecore Every time you do, God kills a kitten - DON'T DO IT!