Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Laying the ProperFoundation for Plugin &Theme DevelopmentWORDCAMP LOUISVILLE 2012
Tammy HartDesigner, front-end developer, andprogrammer... I make all the thingsUnabashed WordPress addictDesign Engineer a...
BUILDING BLOCKSSetting a Standard
StructureTheme and plugins can quickly grow   /theme-nameunwieldy. Be prepared with an easy   --/cssto understand and simp...
Commenting/**  * Returns an unordered list of recent posts  * @param int $numposts Default is 3, can be any integer.  * @p...
NomenclatureAvoid naming conflicts by   // used by coreusing unique namespaces.    function add_meta_box() { ... }        ...
ConstantsSave important, static strings in a constant by defining them.// Set the path constantsdefine( BB_PATH, trailings...
ENQUEUEUEUEUEUE ... UEJavascript & Stylesheets
Why Enqueue?Cant you just call them in the header.php of a theme or add them there withactions in a plugin?NO!Using enqueu...
Enqueue Scriptswp_enqueue_script(    $handle, // name of the script    $src, //where to find it    $deps, // what it depen...
Enqueue Styleswp_enqueue_style(    $handle, // name    $src, //where to find it    $deps, // what it depends on to work   ...
Registeringwp_deregister_script( $handle );wp_register_script(    $handle, // name of the script    $src, //where to find ...
Put Them in Their PlaceADMIN                                   FRONT ENDadd_action( admin_enqueue_scripts ,   add_action( ...
Plugin Example// Styles and Scriptsadd_action( admin_enqueue_scripts , recipress_admin_enqueue );function recipress_admin_...
KEEP IT CLEANUsing Separate Code Files
Why Include?Cant you just dump all your code into functions.php of a theme or the mainplugin file?Yes, but...Large amounts...
Include// files for themesinclude( get_template_directory_uri() . /includes/some_function.php);// in a plugininclude( CONS...
Include, Require, _once// Puts the contents of the file directly where it is calledinclude()// Only lets the script call t...
Plugin Example// Load plugin filesinclude_once( RECIPRESS_DIR   .   php/functions.php );include_once( RECIPRESS_DIR   .   ...
REMEMBER ALL THE THINGS!Miscellaneous Memos
Theme/Plugin HeaderTheme: style.css              Plugin: plugin_file.php/*                            /*Theme Name: 10up.c...
Readme.txtUsed automatically in the WordPress.org repository for things like:    ●   Stable Tag    ●   Description    ●   ...
Localization// text strings__( String of Text , text-domain );// Echoing text_e( String of Text , text-domain );// Explain...
Controlsclass WP_Hotfix_Controller {     function init() {          add_action( init, wp_hotfix_init );          register_...
THANK YOU!Questions?@tammyhart10up.com@10up
Upcoming SlideShare
Loading in …5
×

Laying the proper foundation for plugin and theme development

1,383 views

Published on

  • Be the first to comment

Laying the proper foundation for plugin and theme development

  1. 1. Laying the ProperFoundation for Plugin &Theme DevelopmentWORDCAMP LOUISVILLE 2012
  2. 2. Tammy HartDesigner, front-end developer, andprogrammer... I make all the thingsUnabashed WordPress addictDesign Engineer at 10up, a premiumWordPress Engineering provider
  3. 3. BUILDING BLOCKSSetting a Standard
  4. 4. StructureTheme and plugins can quickly grow /theme-nameunwieldy. Be prepared with an easy --/cssto understand and simple to use --/fontsdirectory structure. --/images --/includes --/js index.php functions.php style.css
  5. 5. Commenting/** * Returns an unordered list of recent posts * @param int $numposts Default is 3, can be any integer. * @param null $author restrict the return to an author * @param null $tag restrict the return to a tag. * @param string|array $post_type Default is post, define the posts type(s) to return * * @return string HTML unordered list */function tcnmy_recent_posts( $numposts = 3, $author = null, $tag = null, $post_type = post ) { $posts = new WP_Query( array( post_type => $post_type, no_found_posts => true, posts_per_page => intval( $numposts ), author => $author, tag => $tag ) );...}
  6. 6. NomenclatureAvoid naming conflicts by // used by coreusing unique namespaces. function add_meta_box() { ... } // too common function add_a_meta_box() { ... } // just right! function themename_add_post_meta_box() { ... } // class names use Title CaseFollow WordPress core class WP_Query { ... }standards for class class WP_Rewrite { ... }naming. class Theme_Name_Do_Stuff { ... }
  7. 7. ConstantsSave important, static strings in a constant by defining them.// Set the path constantsdefine( BB_PATH, trailingslashit( dirname( $this->bbconfig ) ) );define( BACKPRESS_PATH , BB_PATH . bb-includes/backpress/ );define( BB_INC, bb-includes/ );// use themrequire_once ( BB_PATH . BB_INC . class.bb-query.php );
  8. 8. ENQUEUEUEUEUEUE ... UEJavascript & Stylesheets
  9. 9. Why Enqueue?Cant you just call them in the header.php of a theme or add them there withactions in a plugin?NO!Using enqueue functions makes it easier tomanage scripts, stylesheets, their dependants,and where they show up.
  10. 10. Enqueue Scriptswp_enqueue_script( $handle, // name of the script $src, //where to find it $deps, // what it depends on to work $ver, // version number of the script $in_footer // whether to load it in the footer or not);// remove an enqueued scriptwp_dequeue_script( $handle );
  11. 11. Enqueue Styleswp_enqueue_style( $handle, // name $src, //where to find it $deps, // what it depends on to work $ver, // version number of the script $in_footer // whether to load it in the footer or not);// remove an enqueued stylewp_dequeue_style( $handle );
  12. 12. Registeringwp_deregister_script( $handle );wp_register_script( $handle, // name of the script $src, //where to find it $deps, // what it depends on to work $ver, // version number of the script $in_footer // whether to load it in the footer or not);// now you can just...wp_enqueue_script( $handle );// or use it in $deps
  13. 13. Put Them in Their PlaceADMIN FRONT ENDadd_action( admin_enqueue_scripts , add_action( wp_enqueue_scripts ,themename_admin_enqueue ); themename_wp_enqueue );function themename_admin_enqueue() { function themename_wp_enqueue() { wp_register_script( ... ); wp_register_script( ... ); wp_register_style( ... ); wp_register_style( ... ); wp_enqueue_script( ... ); wp_enqueue_script( ... ); wp_enqueue_style( ... ); wp_enqueue_style( ... ); if ( get_post_type() == page ) if ( get_post_type() == page ) wp_enqueue_script( ... ); wp_enqueue_script( ... );} }More Info: http://bit.ly/enqueue
  14. 14. Plugin Example// Styles and Scriptsadd_action( admin_enqueue_scripts , recipress_admin_enqueue );function recipress_admin_enqueue() { wp_enqueue_script( recipress_back , RECIPRESS_URL . js/back.js , array( jquery,jquery-ui-sortable ) ); wp_enqueue_style( recipress_back , RECIPRESS_URL . css/back.css );}add_action( wp_enqueue_scripts , recipress_wp_enqueue );function recipress_wp_enqueue() { wp_enqueue_style( recipress_front , RECIPRESS_URL . css/front.css );}
  15. 15. KEEP IT CLEANUsing Separate Code Files
  16. 16. Why Include?Cant you just dump all your code into functions.php of a theme or the mainplugin file?Yes, but...Large amounts of code are easier to read andedit if they are separated into their own files.
  17. 17. Include// files for themesinclude( get_template_directory_uri() . /includes/some_function.php);// in a plugininclude( CONSTANT_BASE . /includes/some_function.php );
  18. 18. Include, Require, _once// Puts the contents of the file directly where it is calledinclude()// Only lets the script call the file onceinclude_once()// Same as include() but will stop the script if error occursrequire()// Same as include_once() with the rules of require()require_once()
  19. 19. Plugin Example// Load plugin filesinclude_once( RECIPRESS_DIR . php/functions.php );include_once( RECIPRESS_DIR . php/options.php );include_once( RECIPRESS_DIR . php/meta_box.php );include_once( RECIPRESS_DIR . php/taxonomies.php );include_once( RECIPRESS_DIR . php/output.php );include_once( RECIPRESS_DIR . php/widgets.php );
  20. 20. REMEMBER ALL THE THINGS!Miscellaneous Memos
  21. 21. Theme/Plugin HeaderTheme: style.css Plugin: plugin_file.php/* /*Theme Name: 10up.com Plugin Name: ReciPressAuthor: 10up Plugin URI: http://recipress.comAuthor URI: http://10up.com Version: 1.8*/ */
  22. 22. Readme.txtUsed automatically in the WordPress.org repository for things like: ● Stable Tag ● Description ● Installation ● FAQ ● Screenshots ● Changelog ● Update Notice ● Arbitrary SectionsCheck your readme: http://wordpress.org/extend/plugins/about/validator
  23. 23. Localization// text strings__( String of Text , text-domain );// Echoing text_e( String of Text , text-domain );// Explaining text_x( String of Text , A string of text , text-domain );// Load the text domainadd_action( init, plugin_text_domain );function plugin_text_domain() { load_plugin_textdomain( text-domain , false, DEFINED_BASE ./lang/ );}
  24. 24. Controlsclass WP_Hotfix_Controller { function init() { add_action( init, wp_hotfix_init ); register_activation_hook( __FILE__, array( __CLASS__, activate ) ); register_deactivation_hook( __FILE__, array( __CLASS__, deactivate ) ); } function activate() { add_option( hotfix_version , 1 ); register_uninstall_hook( __FILE__, array( __CLASS__, uninstall ) ); } function deactivate() { delete_option( hotfix_version ); } function uninstall() { self::deactivate(); // The same, for now }}
  25. 25. THANK YOU!Questions?@tammyhart10up.com@10up

×