Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

Joel G Goodman

May 18, 2013
Tweet

More Decks by Joel G Goodman

Other Decks in Design

Transcript

  1. Joel G Goodman Austin • Chicago • St Louis •

    SO Cal @joelGoodman #wcATX #WPJquery
  2. ” 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
  3. ” jQuery for theme designers @joelgoodman #wcatx #wpjquery WHAT IS

    JQUERY? “ A kind of shorthand for writing Javascript. Me
  4. 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
  5. jQuery for theme designers @joelgoodman #wcatx #wpjquery WHY IS JQUERY

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

    GOOD FOR THEME DESIGNERS? Plugins for just about everything In WordPress Core
  7. 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();
  8. 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.
  9. jQuery for theme designers @joelgoodman #wcatx #wpjquery HOW ABOUT A

    DEMO? •defines a click/tap action •Adds/removes .hide-menu •CSS handles the animation
  10. jQuery for theme designers @joelgoodman #wcatx #wpjquery SAY YOU WANT

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

    TO USE A JQUERY PLUGIN Then we register our plugins
  12. 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.
  13. jQuery for theme designers @joelgoodman #wcatx #wpjquery SAY YOU WANT

    TO USE A JQUERY PLUGIN /js/brvry-effects.js
  14. 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.
  15. 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?