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
   

   View Slide

2. who is joel goodman?
   

   View Slide

3. Joel G Goodman
   Austin • Chicago • St Louis • SO Cal
   @joelGoodman
   #wcATX #WPJquery
   

   View Slide

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
   

   View Slide

5. ”
   jQuery for theme designers @joelgoodman #wcatx #wpjquery
   WHAT IS JQUERY?
   “
   A kind of shorthand for writing Javascript.
   Me
   

   View Slide

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
   

   View Slide

7. jQuery for theme designers @joelgoodman #wcatx #wpjquery
   WHY IS JQUERY GOOD FOR THEME DESIGNERS?
   Huge Development
   Community lots of documentation
   

   View Slide

8. jQuery for theme designers @joelgoodman #wcatx #wpjquery
   WHY IS JQUERY GOOD FOR THEME DESIGNERS?
   Plugins for just about
   everything In WordPress Core
   

   View Slide

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();
   

   View Slide

10. jQuery for theme designers @joelgoodman #wcatx #wpjquery
    Tell WOrdPress about your script.
    

    View Slide

11. jQuery for theme designers @joelgoodman #wcatx #wpjquery
    

    View Slide

12. jQuery for theme designers @joelgoodman #wcatx #wpjquery
    Tell WOrdPress t0 run your script.
    

    View Slide

13. jQuery for theme designers @joelgoodman #wcatx #wpjquery
    Tell WOrdPress t0 run your script.
    

    View Slide

14. jQuery for theme designers @joelgoodman #wcatx #wpjquery
    PULL YOUR SCRIPT OUT OF THE QUEUE
    NOW IN REVERSE.
    

    View Slide

15. jQuery for theme designers @joelgoodman #wcatx #wpjquery
    OR GET FANCY.
    NOW IN REVERSE.
    

    View Slide

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.
    

    View Slide

17. jQuery for theme designers @joelgoodman #wcatx #wpjquery
    How about a demo?
    

    View Slide

18. jQuery for theme designers @joelgoodman #wcatx #wpjquery
    

    View Slide

19. jQuery for theme designers @joelgoodman #wcatx #wpjquery
    

    View Slide

20. jQuery for theme designers @joelgoodman #wcatx #wpjquery
    

    View Slide

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
    

    View Slide

22. jQuery for theme designers @joelgoodman #wcatx #wpjquery
    HOW ABOUT A DEMO?
    

    View Slide

23. jQuery for theme designers @joelgoodman #wcatx #wpjquery
    How about another
    demo?
    

    View Slide

24. jQuery for theme designers @joelgoodman #wcatx #wpjquery
    SAY YOU WANT TO USE A JQUERY PLUGIN
    

    View Slide

25. jQuery for theme designers @joelgoodman #wcatx #wpjquery
    SAY YOU WANT TO USE A JQUERY PLUGIN
    

    View Slide

26. jQuery for theme designers @joelgoodman #wcatx #wpjquery
    SAY YOU WANT TO USE A JQUERY PLUGIN
    

    View Slide

27. jQuery for theme designers @joelgoodman #wcatx #wpjquery
    SAY YOU WANT TO USE A JQUERY PLUGIN
    First we enqueue jQuery
    

    View Slide

28. jQuery for theme designers @joelgoodman #wcatx #wpjquery
    SAY YOU WANT TO USE A JQUERY PLUGIN
    Then we register our plugins
    

    View Slide

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.
    

    View Slide

30. jQuery for theme designers @joelgoodman #wcatx #wpjquery
    SAY YOU WANT TO USE A JQUERY PLUGIN
    /js/brvry-effects.js
    

    View Slide

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.
    

    View Slide

32. jQuery for theme designers @joelgoodman #wcatx #wpjquery
    

    View Slide

33. jQuery for theme designers @joelgoodman #wcatx #wpjquery
    WHAT’S WITH ALL THE HASSLE?
    DON’T BREAK STUFF
    

    View Slide

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?
    

    View Slide

35. jQuery for theme designers
    JOEL G GOODMAN
    PRINCIPAL / BRAVERY TRANSMEDIA
    Questions!
    

    View Slide

36. JOEL G GOODMAN
    Principal, Bravery Transmedia
    joel@brvry.me
    @joelgoodman • @braverymedia
    braverytransmedia.com
    

    View Slide