WordCamp Phoenix 2013: WordPress 301: JavaScript

A talk introducing JavaScript in general and how to correctly use JavaScript in WordPress.

Transcript

1. WordPress 301: JavaScript Natalie MacLees
2. About Me • Purple Pen Productions founder + principal • jQuery for Designers author • SoCal WP Users’ Group organizer • jQuery LA Users’ Group founder + organizer @nataliemac | nataliemac.com
3. What is JavaScript? http://www.flickr.com/photos/bijoubaby/4539701617/
4. Extend HTML & CSS http://www.flickr.com/photos/liquene/3329868155/
5. Learning JavaScript How do we get started?
6. The Ideal http://www.flickr.com/photos/simonov/476780331/ learn it all perfectly, and then use it
7. erinaceous lamprophony depone finnimbrun floccinaucinihilipilification inaniloquent limerance mesonoxian mungo nihilarian
8. The Reality http://www.flickr.com/photos/scalino/6629580443/ haphazard, learn as you go
9. Copy http://www.flickr.com/photos/5tein/2347819459/ and learn
10. Best Practices Things to keep in mind
11. Progressive Enhancement http://www.flickr.com/photos/kassel1/3104649691/ & graceful degradation
12. Layers Start with one and add on
13. Backend http://www.flickr.com/photos/14550765@N02/2505010784/
14. Content http://www.flickr.com/photos/andrea_r/3973740643 html
15. Presentation http://www.flickr.com/photos/lynstar/3880196378/ css
16. Behavior http://www.flickr.com/photos/auxesis/2964133796/ javascript
17. JavaScript in WordPress
18. Including JavaScript header.php <head> <meta charset="<?php bloginfo( 'charset' ); ?>" /> <title><?php wp_title( '|', true, 'right' ); ?></ title> <script src="/wp-content/themes/twentytwelve/scripts/ my-script.js"></script> <?php wp_head(); ?> </head>
19. Including JavaScript header.php <head> <meta charset="<?php bloginfo( 'charset' ); ?>" /> <title><?php wp_title( '|', true, 'right' ); ?></ title> <script src="/wp-content/themes/twentytwelve/scripts/ my-script.js"></script> <?php wp_head(); ?> </head>
20. Including JavaScript header.php <head> <meta charset="<?php bloginfo( 'charset' ); ?>" /> <title><?php wp_title( '|', true, 'right' ); ?></ title> <script src="<?php bloginfo('template_directory'); ?>/ scripts/my-script.js"></script> <?php wp_head(); ?> </head>
21. Including JavaScript header.php <head> <meta charset="<?php bloginfo( 'charset' ); ?>" /> <title><?php wp_title( '|', true, 'right' ); ?></ title> <script src="<?php bloginfo('template_directory'); ?>/ scripts/my-script.js"></script> <?php wp_head(); ?> </head>
22. WP Helper Functions wp_register_script( $handle, $src, $deps, $ver, $in_footer ); wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer );
23. Including JavaScript functions.php function 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' );
24. Using Included Libraries functions.php function 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' );
25. Superfish Dropdowns Let’s get our hands dirty, shall we?
26. Dropdown Menus css-only
27. Suckerfish Dropdowns alistapart.com http://www.alistapart.com/articles/dropdowns/
28. Suckerfish Dropdowns alistapart.com http://www.alistapart.com/articles/dropdowns/
29. Superfish Dropdowns adding jQuery magic http://users.tpg.com.au/j_birch/plugins/superfish/
30. Quick Start Guide easy as 1-2-3 http://users.tpg.com.au/j_birch/plugins/superfish/
31. superfish functions.php scripts custom.js hoverIntent.js superfish.js style.css Set up a Child Theme I’m naming my child theme ‘superfish’
32. superfish functions.php scripts custom.js hoverIntent.js superfish.js style.css Set up a Child Theme most important file!
33. superfish functions.php scripts custom.js hoverIntent.js superfish.js style.css Set up a Child Theme blank functions.php to start
34. superfish functions.php scripts custom.js hoverIntent.js superfish.js style.css Set up a Child Theme collect all of our javascript files together
35. superfish functions.php scripts custom.js hoverIntent.js superfish.js style.css Set up a Child Theme blank javascript file where we’ll write our script
36. superfish functions.php scripts custom.js hoverIntent.js superfish.js style.css Set up a Child Theme from the superfish download
37. superfish functions.php scripts custom.js hoverIntent.js superfish.js style.css Set up a Child Theme from the superfish download
38. style.css /* Theme Name: Superfish Theme URI: http://purplepen.com Description: Child theme for the Twenty Twelve theme adding Superfish menus Author: Natalie MacLees Author URI: http://nataliemac.com Template: twentytwelve Version: 0.1.0 */ @import url("../twentytwelve/style.css");
39. style.css /* Theme Name: Superfish Theme URI: http://purplepen.com Description: Child theme for the Twenty Twelve theme adding Superfish menus Author: Natalie MacLees Author URI: http://nataliemac.com Template: twentytwelve Version: 0.1.0 */ @import url("../twentytwelve/style.css");
40. functions.php function superfish_load_scripts() { wp_register_script( 'hoverintent', get_stylesheet_directory_uri() . '/scripts/ hoverIntent.js', array( 'jquery' ), '1.0', true ); }
41. functions.php function 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 ); }
42. functions.php function superfish_load_scripts() { ... wp_enqueue_script( 'custom-script' ); } add_action( 'wp_enqueue_scripts', 'superfish_load_scripts' );
43. custom.js jQuery(document).ready(function() { jQuery('.main-navigation ul.nav-menu,.main-navigation div.nav-menu > ul').superfish(); });
44. custom.js jQuery(document).ready(function() { jQuery('.main-navigation ul.nav-menu,.main-navigation div.nav-menu > ul').superfish(); });
45. style.css ... @media screen and (min-width: 600px) { .sf-js-enabled li ul { display: block; } }
46. custom.js jQuery(document).ready(function() { jQuery('.main-navigation ul.nav-menu,.main-navigation div.nav-menu > ul').superfish({ animation: { height: 'show' } }); });
47. Resources Keep on learning
48. jQuery for Designers by some author http://www.amazon.com/jQuery-Designers-Beginners-Natalie-MacLees/dp/1849516707
49. JavaScript & WordPress by avk from WordCamp Nepal https://speakerdeck.com/avk/javascript-and-wordpress
50. Codrops lots of awesome tutorials http://tympanus.net/codrops/category/tutorials/
51. Codeacademy free JavaScript lessons http://www.codecademy.com
52. Eloquent JavaScript free interactive JavaScript book http://eloquentjavascript.net/
53. CodePen experiment and learn http://codepen.io/
54. Questions? Ask!
55. Thank YOU Have fun playing with JavaScript! @nataliemac | nataliemac.com