WordCamp Phoenix 2013: WordPress 301: JavaScript

WordPress 301: JavaScript Natalie MacLees

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

What is JavaScript? http://www.ﬂickr.com/photos/bijoubaby/4539701617/

Extend HTML & CSS http://www.ﬂickr.com/photos/liquene/3329868155/

Learning JavaScript How do we get started?

The Ideal http://www.ﬂickr.com/photos/simonov/476780331/ learn it all perfectly, and then use
it

erinaceous lamprophony depone finnimbrun floccinaucinihilipilification inaniloquent limerance mesonoxian mungo nihilarian

The Reality http://www.ﬂickr.com/photos/scalino/6629580443/ haphazard, learn as you go

Copy http://www.ﬂickr.com/photos/5tein/2347819459/ and learn

Best Practices Things to keep in mind

Progressive Enhancement http://www.ﬂickr.com/photos/kassel1/3104649691/ & graceful degradation

Layers Start with one and add on

Backend http://www.ﬂickr.com/photos/14550765@N02/2505010784/

Content http://www.ﬂickr.com/photos/andrea_r/3973740643 html

Presentation http://www.ﬂickr.com/photos/lynstar/3880196378/ css

Behavior http://www.ﬂickr.com/photos/auxesis/2964133796/ javascript

JavaScript in WordPress

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>

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>

WP Helper Functions wp_register_script( $handle, $src, $deps, $ver, $in_footer );
wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer );

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

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

Superfish Dropdowns Let’s get our hands dirty, shall we?

Dropdown Menus css-only

Suckerfish Dropdowns alistapart.com http://www.alistapart.com/articles/dropdowns/

Superfish Dropdowns adding jQuery magic http://users.tpg.com.au/j_birch/plugins/superﬁsh/

Quick Start Guide easy as 1-2-3 http://users.tpg.com.au/j_birch/plugins/superﬁsh/

superfish functions.php scripts custom.js hoverIntent.js superfish.js style.css Set up a
Child Theme I’m naming my child theme ‘superﬁsh’

Child Theme most important ﬁle!

Child Theme blank functions.php to start

Child Theme collect all of our javascript ﬁles together

Child Theme blank javascript ﬁle where we’ll write our script

Child Theme from the superﬁsh download

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

functions.php function superfish_load_scripts() { wp_register_script( 'hoverintent', get_stylesheet_directory_uri() . '/scripts/ hoverIntent.js',
array( 'jquery' ), '1.0', true ); }

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

functions.php function superfish_load_scripts() { ... wp_enqueue_script( 'custom-script' ); } add_action(
'wp_enqueue_scripts', 'superfish_load_scripts' );

custom.js jQuery(document).ready(function() { jQuery('.main-navigation ul.nav-menu,.main-navigation div.nav-menu > ul').superfish(); });

style.css ... @media screen and (min-width: 600px) { .sf-js-enabled li
ul { display: block; } }

custom.js jQuery(document).ready(function() { jQuery('.main-navigation ul.nav-menu,.main-navigation div.nav-menu > ul').superfish({ animation: {
height: 'show' } }); });

Resources Keep on learning

jQuery for Designers by some author http://www.amazon.com/jQuery-Designers-Beginners-Natalie-MacLees/dp/1849516707

JavaScript & WordPress by avk from WordCamp Nepal https://speakerdeck.com/avk/javascript-and-wordpress

Codrops lots of awesome tutorials http://tympanus.net/codrops/category/tutorials/

Codeacademy free JavaScript lessons http://www.codecademy.com

Eloquent JavaScript free interactive JavaScript book http://eloquentjavascript.net/

CodePen experiment and learn http://codepen.io/

Questions? Ask!

Thank YOU Have fun playing with JavaScript! @nataliemac | nataliemac.com

WordCamp Phoenix 2013: WordPress 301: JavaScript

WordCamp Phoenix 2013: WordPress 301: JavaScript

More Decks by Natalie MacLees

Other Decks in Technology

Featured

Transcript