Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
WordCamp Phoenix 2013: WordPress 301: JavaScript
Search
Natalie MacLees
January 18, 2013
Technology
2
520
WordCamp Phoenix 2013: WordPress 301: JavaScript
A talk introducing JavaScript in general and how to correctly use JavaScript in WordPress.
Natalie MacLees
January 18, 2013
Tweet
Share
More Decks by Natalie MacLees
See All by Natalie MacLees
Creating content for everyone
nataliemac
0
34
Making your website work for everyone: accessibility testing
nataliemac
1
50
The Tangled Web We're Weaving: The Future of WordPress Accessibility
nataliemac
0
44
Making the world a better place through web design
nataliemac
0
140
One Percent Better: How little changes add up
nataliemac
1
87
One percent better
nataliemac
2
55
How to make time for a side hustle
nataliemac
0
3.8k
Before You React
nataliemac
2
340
Bulletproof JavaScript for plugins and themes
nataliemac
2
240
Other Decks in Technology
See All in Technology
データ分析を支える技術 生成AI再入門
ishikawa_satoru
0
380
地理情報とAPIのトレンド
nagix
0
160
クラウド利用者の「責任」をどう果たす?AWSセキュリティ対策のススメ #AWSSummit
hiashisan
0
280
大規模ドラレコデータ収集・機械学習基盤を支える AWS CDK 〜導入・運用事例紹介〜
pemugi
0
110
DevIO2024_レガシー運用からの脱却 -クラウド活用の実践事例とベストプラクティス-
jun2882
0
210
AutomatedLabを使って内部ペンテストを勉強しよう! -やられ社内ネットワークの自動構築-
n_etupirka
1
610
エンジニアの生存戦略 〜クラウド潮流の経験から紐解く技術トレンドのメカニズムと乗りこなし方〜
shimy
9
1.9k
[I/O Extended Android 2024] What`s new in Android 2024
kyeongwan
0
220
AWSでRAGを作る法方
sonoda_mj
1
140
開発と事業を繋ぐ!SREのオブザーバビリティ戦略 ~ Developers Summit 2024 Summer ~
leveragestech
0
630
初中級者用如何使用backlog -VALE TUDOEDITION-
in0u
0
140
Matterport を使ってクラスメソッド各拠点のバーチャルオフィスツアーを作成してみた
wakatsuki
0
160
Featured
See All Featured
A designer walks into a library…
pauljervisheath
201
24k
The Language of Interfaces
destraynor
151
23k
Git: the NoSQL Database
bkeepers
PRO
423
64k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
155
14k
Put a Button on it: Removing Barriers to Going Fast.
kastner
58
3.3k
Principles of Awesome APIs and How to Build Them.
keavy
124
16k
The Art of Programming - Codeland 2020
erikaheidi
48
13k
Rebuilding a faster, lazier Slack
samanthasiow
78
8.5k
StorybookのUI Testing Handbookを読んだ
zakiyama
15
4.9k
What's new in Ruby 2.0
geeforr
338
31k
Reflections from 52 weeks, 52 projects
jeffersonlam
346
19k
Stop Working from a Prison Cell
hatefulcrawdad
266
20k
Transcript
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.flickr.com/photos/bijoubaby/4539701617/
Extend HTML & CSS http://www.flickr.com/photos/liquene/3329868155/
Learning JavaScript How do we get started?
The Ideal http://www.flickr.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.flickr.com/photos/scalino/6629580443/ haphazard, learn as you go
Copy http://www.flickr.com/photos/5tein/2347819459/ and learn
Best Practices Things to keep in mind
Progressive Enhancement http://www.flickr.com/photos/kassel1/3104649691/ & graceful degradation
Layers Start with one and add on
Backend http://www.flickr.com/photos/14550765@N02/2505010784/
Content http://www.flickr.com/photos/andrea_r/3973740643 html
Presentation http://www.flickr.com/photos/lynstar/3880196378/ css
Behavior http://www.flickr.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="/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>
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/
Suckerfish Dropdowns alistapart.com http://www.alistapart.com/articles/dropdowns/
Superfish Dropdowns adding jQuery magic http://users.tpg.com.au/j_birch/plugins/superfish/
Quick Start Guide easy as 1-2-3 http://users.tpg.com.au/j_birch/plugins/superfish/
superfish functions.php scripts custom.js hoverIntent.js superfish.js style.css Set up a
Child Theme I’m naming my child theme ‘superfish’
superfish functions.php scripts custom.js hoverIntent.js superfish.js style.css Set up a
Child Theme most important file!
superfish functions.php scripts custom.js hoverIntent.js superfish.js style.css Set up a
Child Theme blank functions.php to start
superfish functions.php scripts custom.js hoverIntent.js superfish.js style.css Set up a
Child Theme collect all of our javascript files together
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
superfish functions.php scripts custom.js hoverIntent.js superfish.js style.css Set up a
Child Theme from the superfish download
superfish functions.php scripts custom.js hoverIntent.js superfish.js style.css Set up a
Child Theme from the superfish 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");
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(); });
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