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

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