Laying the proper foundation for plugin and theme development
-
Upload
tammy-hart -
Category
Documents
-
view
115 -
download
2
description
Transcript of Laying the proper foundation for plugin and theme development
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