A talk introducing JavaScript in general and how to correctly use JavaScript in WordPress.
WordPress 301:JavaScriptNatalie MacLees
View Slide
About Me• Purple Pen Productionsfounder + principal• jQuery for Designersauthor• SoCal WP Users’ Grouporganizer• jQuery LA Users’ Groupfounder + organizer@nataliemac | nataliemac.com
What is JavaScript?http://www.flickr.com/photos/bijoubaby/4539701617/
Extend HTML & CSShttp://www.flickr.com/photos/liquene/3329868155/
Learning JavaScriptHow do we get started?
The Idealhttp://www.flickr.com/photos/simonov/476780331/learn it all perfectly, and then use it
erinaceouslamprophonydeponefinnimbrunfloccinaucinihilipilificationinaniloquentlimerancemesonoxianmungonihilarian
The Realityhttp://www.flickr.com/photos/scalino/6629580443/haphazard, learn as you go
Copyhttp://www.flickr.com/photos/5tein/2347819459/and learn
Best PracticesThings to keep in mind
Progressive Enhancementhttp://www.flickr.com/photos/kassel1/3104649691/& graceful degradation
LayersStart with one and add on
Backendhttp://www.flickr.com/photos/[email protected]/2505010784/
Contenthttp://www.flickr.com/photos/andrea_r/3973740643html
Presentationhttp://www.flickr.com/photos/lynstar/3880196378/css
Behaviorhttp://www.flickr.com/photos/auxesis/2964133796/javascript
JavaScriptin WordPress
Including JavaScriptheader.phptitle>
WP Helper Functionswp_register_script( $handle, $src, $deps, $ver,$in_footer );wp_enqueue_script( $handle, $src, $deps, $ver,$in_footer );
Including JavaScriptfunctions.phpfunction prefix_load_scripts() {! wp_register_script( 'my-script',get_template_directory_uri() . '/scripts/my-script.js' );! wp_enqueue_script( 'my-script' );}add_action( 'wp_enqueue_scripts','prefix_load_scripts' );
Using IncludedLibrariesfunctions.phpfunction prefix_load_scripts() {! wp_register_script( 'my-script',get_template_directory_uri() . '/scripts/my-script.js',array( 'jquery' ), '1.0', true );! wp_enqueue_script( 'my-script' );}add_action( 'wp_enqueue_scripts','prefix_load_scripts' );
Superfish DropdownsLet’s get our hands dirty, shall we?
Dropdown Menuscss-only
Suckerfish Dropdownsalistapart.comhttp://www.alistapart.com/articles/dropdowns/
Superfish Dropdownsadding jQuery magichttp://users.tpg.com.au/j_birch/plugins/superfish/
Quick Start Guideeasy as 1-2-3http://users.tpg.com.au/j_birch/plugins/superfish/
superfishfunctions.phpscriptscustom.jshoverIntent.jssuperfish.jsstyle.cssSet up a Child ThemeI’m naming my childtheme ‘superfish’
superfishfunctions.phpscriptscustom.jshoverIntent.jssuperfish.jsstyle.cssSet up a Child Thememost important file!
superfishfunctions.phpscriptscustom.jshoverIntent.jssuperfish.jsstyle.cssSet up a Child Themeblankfunctions.php tostart
superfishfunctions.phpscriptscustom.jshoverIntent.jssuperfish.jsstyle.cssSet up a Child Themecollect all of ourjavascript files together
superfishfunctions.phpscriptscustom.jshoverIntent.jssuperfish.jsstyle.cssSet up a Child Themeblank javascriptfile where we’ll write ourscript
superfishfunctions.phpscriptscustom.jshoverIntent.jssuperfish.jsstyle.cssSet up a Child Themefrom the superfishdownload
style.css/*Theme Name: SuperfishTheme URI: http://purplepen.comDescription: Child theme for the Twenty Twelve themeadding Superfish menusAuthor: Natalie MacLeesAuthor URI: http://nataliemac.comTemplate: twentytwelveVersion: 0.1.0*/@import url("../twentytwelve/style.css");
functions.phpfunction superfish_load_scripts() {wp_register_script('hoverintent',get_stylesheet_directory_uri() . '/scripts/hoverIntent.js',array( 'jquery' ),'1.0',true );}
functions.phpfunction superfish_load_scripts() {...wp_register_script( 'superfish',get_stylesheet_directory_uri() . '/scripts/superfish.js', array( 'jquery', 'hoverintent' ), '1.0',true );wp_register_script( 'custom-script',get_stylesheet_directory_uri() . '/scripts/custom.js',array( 'jquery', 'hoverintent', 'superfish' ), '1.3',true );}
functions.phpfunction superfish_load_scripts() {...wp_enqueue_script( 'custom-script' );}add_action( 'wp_enqueue_scripts','superfish_load_scripts' );
custom.jsjQuery(document).ready(function() {jQuery('.main-navigation ul.nav-menu,.main-navigationdiv.nav-menu > ul').superfish();});
style.css...@media screen and (min-width: 600px) {.sf-js-enabled li ul {display: block;}}
custom.jsjQuery(document).ready(function() {jQuery('.main-navigation ul.nav-menu,.main-navigationdiv.nav-menu > ul').superfish({animation: { height: 'show' }});});
ResourcesKeep on learning
jQuery for Designersby some authorhttp://www.amazon.com/jQuery-Designers-Beginners-Natalie-MacLees/dp/1849516707
JavaScript & WordPressby avk from WordCamp Nepalhttps://speakerdeck.com/avk/javascript-and-wordpress
Codropslots of awesome tutorialshttp://tympanus.net/codrops/category/tutorials/
Codeacademyfree JavaScript lessonshttp://www.codecademy.com
Eloquent JavaScriptfree interactive JavaScript bookhttp://eloquentjavascript.net/
CodePenexperiment and learnhttp://codepen.io/
Questions?Ask!
Thank YOUHave fun playing with JavaScript!@nataliemac | nataliemac.com
nataliemac
trycycle
spinscale
isaoshimizu
ojun9
oracle4engineer
takmin
iselegant
ryohatanmonolog
yayoi_dd
kumamatsu
hcrane
sat
trishagee
jacobian
iamctodd
62gerente
speakerdeck
kastner
sferik
swwweet
skipperchong
destraynor
philhawksworth
jasonvnalue