Tweet
Tweet

Slide 1

Slide 1 text

jQuery for theme designers JOEL G GOODMAN PRINCIPAL / BRAVERY TRANSMEDIA

Slide 2

Slide 2 text

who is joel goodman?

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

” 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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

jQuery for theme designers @joelgoodman #wcatx #wpjquery

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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.

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

jQuery for theme designers @joelgoodman #wcatx #wpjquery

Slide 19

Slide 19 text

jQuery for theme designers @joelgoodman #wcatx #wpjquery

Slide 20

Slide 20 text

jQuery for theme designers @joelgoodman #wcatx #wpjquery

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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.

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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.

Slide 32

Slide 32 text

jQuery for theme designers @joelgoodman #wcatx #wpjquery

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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?

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

JOEL G GOODMAN Principal, Bravery Transmedia [email protected] @joelgoodman • @braverymedia braverytransmedia.com