Save 37% off PRO during our Black Friday Sale! »

jQuery for WordPress Theme Designers

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

73f37978c35c14c7a59245e7687207cd?s=128

Joel G Goodman

May 18, 2013
Tweet

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