[wcatx] jQuery for WordPress Theme Designers

461 views
348 views

Published on

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

Published in: Design, Technology, Business
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
461
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

[wcatx] jQuery for WordPress Theme Designers

  1. 1. jQuery for theme designersJOEL G GOODMANPRINCIPAL / BRAVERY TRANSMEDIA
  2. 2. who is joel goodman?
  3. 3. Joel G GoodmanAustin • Chicago • St Louis • SO Cal@joelGoodman#wcATX #WPJquery
  4. 4. ”jQuery for theme designers @joelgoodman #wcatx #wpjqueryWHAT IS JQUERY?“jQuery is a fast, small, and feature-rich JavaScript library.It makes things like HTML document traversal andmanipulation, event handling, animation, and Ajax muchsimpler with an easy-to-use API that works across amultitude of browsers. With a combination of versatilityand extensibility, jQuery has changed the way thatmillions of people write JavaScript.jquery.com
  5. 5. ”jQuery for theme designers @joelgoodman #wcatx #wpjqueryWHAT IS JQUERY?“A kind of shorthand for writing Javascript.Me
  6. 6. jQuery for theme designers @joelgoodman #wcatx #wpjqueryWHY IS JQUERY GOOD?• It’s a shortcut• That means you don’thave to learn actualjavascript
  7. 7. jQuery for theme designers @joelgoodman #wcatx #wpjqueryWHY IS JQUERY GOOD FOR THEME DESIGNERS?Huge DevelopmentCommunity lots of documentation
  8. 8. jQuery for theme designers @joelgoodman #wcatx #wpjqueryWHY IS JQUERY GOOD FOR THEME DESIGNERS?Plugins for just abouteverything In WordPress Core
  9. 9. jQuery for theme designers @joelgoodman #wcatx #wpjqueryLET’S GET DOWN TO IT2METHODS TOCORRECTLYINCLUDE JQUERYIN YOUR THEMEwp_register_script();wp_enqueue_script();
  10. 10. jQuery for theme designers @joelgoodman #wcatx #wpjqueryTell WOrdPress about your script.
  11. 11. jQuery for theme designers @joelgoodman #wcatx #wpjquery
  12. 12. jQuery for theme designers @joelgoodman #wcatx #wpjqueryTell WOrdPress t0 run your script.
  13. 13. jQuery for theme designers @joelgoodman #wcatx #wpjqueryTell WOrdPress t0 run your script.
  14. 14. jQuery for theme designers @joelgoodman #wcatx #wpjqueryPULL YOUR SCRIPT OUT OF THE QUEUENOW IN REVERSE.
  15. 15. jQuery for theme designers @joelgoodman #wcatx #wpjqueryOR GET FANCY.NOW IN REVERSE.
  16. 16. jQuery for theme designers @joelgoodman #wcatx #wpjquery• de-registers stock jquery• re-registers the script but with the googlehosted version of the sourceNOW IN REVERSE.
  17. 17. jQuery for theme designers @joelgoodman #wcatx #wpjqueryHow about a demo?
  18. 18. jQuery for theme designers @joelgoodman #wcatx #wpjquery
  19. 19. jQuery for theme designers @joelgoodman #wcatx #wpjquery
  20. 20. jQuery for theme designers @joelgoodman #wcatx #wpjquery
  21. 21. jQuery for theme designers @joelgoodman #wcatx #wpjqueryHOW ABOUT A DEMO?•defines a click/tap action•Adds/removes .hide-menu•CSS handles the animation
  22. 22. jQuery for theme designers @joelgoodman #wcatx #wpjqueryHOW ABOUT A DEMO?
  23. 23. jQuery for theme designers @joelgoodman #wcatx #wpjqueryHow about anotherdemo?
  24. 24. jQuery for theme designers @joelgoodman #wcatx #wpjquerySAY YOU WANT TO USE A JQUERY PLUGIN
  25. 25. jQuery for theme designers @joelgoodman #wcatx #wpjquerySAY YOU WANT TO USE A JQUERY PLUGIN
  26. 26. jQuery for theme designers @joelgoodman #wcatx #wpjquerySAY YOU WANT TO USE A JQUERY PLUGIN
  27. 27. jQuery for theme designers @joelgoodman #wcatx #wpjquerySAY YOU WANT TO USE A JQUERY PLUGINFirst we enqueue jQuery
  28. 28. jQuery for theme designers @joelgoodman #wcatx #wpjquerySAY YOU WANT TO USE A JQUERY PLUGINThen we register our plugins
  29. 29. jQuery for theme designers @joelgoodman #wcatx #wpjquerySAY YOU WANT TO USE A JQUERY PLUGINFinally, we register our script fileand enqueue it all.
  30. 30. jQuery for theme designers @joelgoodman #wcatx #wpjquerySAY YOU WANT TO USE A JQUERY PLUGIN/js/brvry-effects.js
  31. 31. jQuery for theme designers @joelgoodman #wcatx #wpjquerySAY YOU WANT TO USE A JQUERY PLUGIN•select the .nav-bar menu•the local scroll pluginhandles the rest.
  32. 32. jQuery for theme designers @joelgoodman #wcatx #wpjquery
  33. 33. jQuery for theme designers @joelgoodman #wcatx #wpjqueryWHAT’S WITH ALL THE HASSLE?DON’T BREAK STUFF
  34. 34. jQuery for theme designers @joelgoodman #wcatx #wpjquery• safely de-registers stock jquery• re-registers the script but with the googlehosted version of the sourceREMEMBER THIS?
  35. 35. jQuery for theme designersJOEL G GOODMANPRINCIPAL / BRAVERY TRANSMEDIAQuestions!
  36. 36. JOEL G GOODMANPrincipal, Bravery Transmediajoel@brvry.me@joelgoodman • @braverymediabraverytransmedia.com

×