Laying the Proper Foundation for Plugin & Theme DevelopmentWORDCAMP LOUISVILLE 2012

Tammy HartDesigner, front-end developer, and programmer... I make all the things

Unabashed WordPress addict

Design Engineer at 10up, a premium WordPress Engineering provider

Setting a StandardBUILDING BLOCKS

StructureTheme and plugins can quickly grow unwieldy. Be prepared with an easy to understand and simple to use directory structure.

/theme-name--/css--/fonts--/images--/includes--/jsindex.phpfunctions.phpstyle.css

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

) );

...

}

NomenclatureAvoid naming conflicts by using unique namespaces.

Follow WordPress core standards for class naming.

// used by corefunction add_meta_box() { ... }// too commonfunction add_a_meta_box() { ... }// just right!function themename_add_post_meta_box() { ... }

// class names use Title Caseclass WP_Query { ... }class WP_Rewrite { ... }class Theme_Name_Do_Stuff { ... }

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' );

Javascript & StylesheetsENQUEUEUEUEUEUE ... UE

Why Enqueue?Can't you just call them in the header.php of a theme or add them there with actions in a plugin?

NO!

Using enqueue functions makes it easier to manage scripts, stylesheets, their dependants, and where they show up.

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 );

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 );

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

Put Them in Their Place

ADMIN

add_action( 'admin_enqueue_scripts' , 'themename_admin_enqueue' );

function themename_admin_enqueue() {

wp_register_script( ... );

wp_register_style( ... );

wp_enqueue_script( ... );

wp_enqueue_style( ... );

if ( get_post_type() == 'page' )

wp_enqueue_script( ... );

}

More Info: http://bit.ly/enqueue

FRONT END

add_action( 'wp_enqueue_scripts' , 'themename_wp_enqueue' );

function themename_wp_enqueue() {

wp_register_script( ... );

wp_register_style( ... );

wp_enqueue_script( ... );

wp_enqueue_style( ... );

if ( get_post_type() == 'page' )

wp_enqueue_script( ... );

}

Plugin Example// Styles and Scripts

add_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' );

}

Using Separate Code FilesKEEP IT CLEAN

Why Include?Can't you just dump all your code into functions.php of a theme or the main plugin file?

Yes, but...

Large amounts of code are easier to read and edit if they are separated into their own files.

Include// files for themesinclude( get_template_directory_uri() . '/includes/some_function.php' );

// in a plugininclude( CONSTANT_BASE . '/includes/some_function.php' );

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()

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' );

Miscellaneous MemosREMEMBER ALL THE THINGS!

Theme/Plugin HeaderTheme: style.css

/*Theme Name: 10up.comAuthor: 10upAuthor URI: http://10up.com*/

Plugin: plugin_file.php

/*Plugin Name: ReciPressPlugin URI: http://recipress.comVersion: 1.8*/

Readme.txtUsed automatically in the WordPress.org repository for things like:

● Stable Tag

● Description

● Installation

● FAQ

● Screenshots

● Changelog

● Update Notice

● Arbitrary Sections

Check your readme: http://wordpress.org/extend/plugins/about/validator

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/' );}

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

}

}

Questions?THANK YOU!

@tammyhart

10up.com@10up