jQuery for WordPress Theme Designers

A talk on using jQuery with WordPress. Given at WordCamp Austin 2013. Full post and notes at http://brvry.me/Z456Ol

Transcript

1. jQuery for theme designers JOEL G GOODMAN PRINCIPAL / BRAVERY TRANSMEDIA
2. who is joel goodman?
3. Joel G Goodman Austin • Chicago • St Louis • SO Cal @joelGoodman #wcATX #WPJquery
4. ” jQuery for theme designers @joelgoodman #wcatx #wpjquery WHAT IS JQUERY? “ jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript. jquery.com
5. ” jQuery for theme designers @joelgoodman #wcatx #wpjquery WHAT IS JQUERY? “ A kind of shorthand for writing Javascript. Me
6. jQuery for theme designers @joelgoodman #wcatx #wpjquery WHY IS JQUERY GOOD? • It’s a shortcut • That means you don’t have to learn actual javascript
7. jQuery for theme designers @joelgoodman #wcatx #wpjquery WHY IS JQUERY GOOD FOR THEME DESIGNERS? Huge Development Community lots of documentation
8. jQuery for theme designers @joelgoodman #wcatx #wpjquery WHY IS JQUERY GOOD FOR THEME DESIGNERS? Plugins for just about everything In WordPress Core
9. jQuery for theme designers @joelgoodman #wcatx #wpjquery LET’S GET DOWN TO IT 2METHODS TO CORRECTLY INCLUDE JQUERY IN YOUR THEME wp_register_script(); wp_enqueue_script();
10. jQuery for theme designers @joelgoodman #wcatx #wpjquery Tell WOrdPress about your script.
11. jQuery for theme designers @joelgoodman #wcatx #wpjquery
12. jQuery for theme designers @joelgoodman #wcatx #wpjquery Tell WOrdPress t0 run your script.
13. jQuery for theme designers @joelgoodman #wcatx #wpjquery Tell WOrdPress t0 run your script.
14. jQuery for theme designers @joelgoodman #wcatx #wpjquery PULL YOUR SCRIPT OUT OF THE QUEUE NOW IN REVERSE.
15. jQuery for theme designers @joelgoodman #wcatx #wpjquery OR GET FANCY. NOW IN REVERSE.
16. jQuery for theme designers @joelgoodman #wcatx #wpjquery • de-registers stock jquery • re-registers the script but with the google hosted version of the source NOW IN REVERSE.
17. jQuery for theme designers @joelgoodman #wcatx #wpjquery How about a demo?
18. jQuery for theme designers @joelgoodman #wcatx #wpjquery
19. jQuery for theme designers @joelgoodman #wcatx #wpjquery
20. jQuery for theme designers @joelgoodman #wcatx #wpjquery
21. jQuery for theme designers @joelgoodman #wcatx #wpjquery HOW ABOUT A DEMO? •defines a click/tap action •Adds/removes .hide-menu •CSS handles the animation
22. jQuery for theme designers @joelgoodman #wcatx #wpjquery HOW ABOUT A DEMO?
23. jQuery for theme designers @joelgoodman #wcatx #wpjquery How about another demo?
24. jQuery for theme designers @joelgoodman #wcatx #wpjquery SAY YOU WANT TO USE A JQUERY PLUGIN
25. jQuery for theme designers @joelgoodman #wcatx #wpjquery SAY YOU WANT TO USE A JQUERY PLUGIN
26. jQuery for theme designers @joelgoodman #wcatx #wpjquery SAY YOU WANT TO USE A JQUERY PLUGIN
27. jQuery for theme designers @joelgoodman #wcatx #wpjquery SAY YOU WANT TO USE A JQUERY PLUGIN First we enqueue jQuery
28. jQuery for theme designers @joelgoodman #wcatx #wpjquery SAY YOU WANT TO USE A JQUERY PLUGIN Then we register our plugins
29. jQuery for theme designers @joelgoodman #wcatx #wpjquery SAY YOU WANT TO USE A JQUERY PLUGIN Finally, we register our script file and enqueue it all.
30. jQuery for theme designers @joelgoodman #wcatx #wpjquery SAY YOU WANT TO USE A JQUERY PLUGIN /js/brvry-effects.js
31. jQuery for theme designers @joelgoodman #wcatx #wpjquery SAY YOU WANT TO USE A JQUERY PLUGIN •select the .nav-bar menu •the local scroll plugin handles the rest.
32. jQuery for theme designers @joelgoodman #wcatx #wpjquery
33. jQuery for theme designers @joelgoodman #wcatx #wpjquery WHAT’S WITH ALL THE HASSLE? DON’T BREAK STUFF
34. jQuery for theme designers @joelgoodman #wcatx #wpjquery • safely de-registers stock jquery • re-registers the script but with the google hosted version of the source REMEMBER THIS?
35. jQuery for theme designers JOEL G GOODMAN PRINCIPAL / BRAVERY TRANSMEDIA Questions!
36. JOEL G GOODMAN Principal, Bravery Transmedia joel@brvry.me @joelgoodman • @braverymedia braverytransmedia.com