WordCamp San Diego: Using jQuery Magic in Your WordPress Themes

http://www.ﬂickr.com/photos/alsis35/7975149076/ jQuery Magic Adding to your WORDPRESS THEMES with Natalie
MacLees @nataliemac

http://www.ﬂickr.com/photos/alsis35/6050912696/ Who I Am Purple Pen Productions founder + principal
jQuery for Designers author SoCal WordPress co-organizer jQuery LA founder + organizer

WordPress? Can I use that with http://www.ﬂickr.com/photos/alsis35/8446133887

WordPress? How do I use that with http://www.ﬂickr.com/photos/vblibrary/4480093266/

WordPress How to use JavaScript in http://www.ﬂickr.com/photos/alsis35/8273339344 “Nothin’ to it...
easy as icin’ a cake”

header.php <head> <meta charset="<?php bloginfo( 'charset' ); ?>" /> <title><?php
wp_title( '|', true, 'right' ); ?></ title> <script src="/wp-content/themes/twentytwelve/scripts/ my-script.js"></script> <?php wp_head(); ?> </head> Including JavaScript http://www.ﬂickr.com/photos/alsis35/7170635375

header.php <head> <meta charset="<?php bloginfo( 'charset' ); ?>" /> <title><?php
wp_title( '|', true, 'right' ); ?></ title> <script src="<?php bloginfo('template_directory'); ?>/ scripts/my-script.js"></script> <?php wp_head(); ?> </head> Including JavaScript http://www.ﬂickr.com/photos/alsis35/7170635375

Use WordPress Helper Functions Do it right! http://www.ﬂickr.com/photos/alsis35/7504336336

wp_register_script( $handle, $src, $deps, $ver, $in_footer ); wp_register_script Register! http://www.ﬂickr.com/photos/alsis35/5949800600

wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer ); wp_enqueue_script Enqueue! http://www.ﬂickr.com/photos/alsis35/5949800690

functions.php function prefix_load_scripts() { ! wp_register_script( 'my-script', get_template_directory_uri() . '/scripts/my-
script.js' ); ! wp_enqueue_script( 'my-script' ); } add_action( 'wp_enqueue_scripts', 'prefix_load_scripts' ); http://www.ﬂickr.com/photos/alsis35/7170635375 Including JavaScript

functions.php function prefix_load_scripts() { ! wp_register_script( 'my-script', get_template_directory_uri() . '/
scripts/my-script.js' ); ! if (is_home()) { wp_enqueue_script( 'my-script' ); } } add_action( 'wp_enqueue_scripts', 'prefix_load_scripts' ); Conditionally Include JS http://www.ﬂickr.com/photos/alsis35/5841746130

function prefix_register_scripts() { ! wp_register_script('my-script' ... ); ! wp_register_script('second-script' ...);
} add_action( 'init', 'prefix_register_scripts' ); function prefix_load_scripts() { wp_enqueue_script( 'my-script' ); } add_action( 'wp_enqueue_scripts', 'prefix_load_scripts' ); http://www.ﬂickr.com/photos/alsis35/7170635375 Including JavaScript

Basic jQuery Slider http://www.ﬂickr.com/photos/alsis35/5847674332

<div id="my-slideshow"> <ul class="bjqs"> <li></li>
<li></li> </ul> </div> Basic jQuery Slider - The Markup http://basic-slider.com/

<div id="my-slideshow"> <ul class="bjqs"> <li></li>
<li></li> </ul> </div> <?php if ( have_posts() ) : ?> <div id="slideshow"> <ul class="bjqs"> <?php while ( have_posts() ) : the_post(); ?> <li> <?php the_post_thumbnail(); ?> </li> <?php endwhile; ?> </ul> </div> <?php endif; ?> Basic jQuery Slider - The Markup http://basic-slider.com/

<link type="text/css" rel="stylesheet" href="bjqs.css"
/> Basic jQuery Slider - The Style http://basic-slider.com/

<link type="text/css" rel="stylesheet" href="bjqs.css"
/> function basic_load_scripts_and_styles() { // Styles wp_enqueue_style( 'bjqs', get_template_directory_uri() . '/css/bjqs.css' ); } add_action('wp_enqueue_scripts', 'basic_load_scripts_and_styles'); Basic jQuery Slider - The Style http://basic-slider.com/

<script
src="http://code.jquery.com/jquery- latest.min.js"></script>  <script src="bjqs.min.js"></script> Basic jQuery Slider - The Script http://basic-slider.com/

<script
src="http://code.jquery.com/jquery- latest.min.js"></script>  <script src="bjqs.min.js"></script> function basic_load_scripts_and_styles() { ... wp_register_script( 'basicSlider', get_template_directory_uri() . '/js/bjqs-1.3.min.js', array('jquery') ); } add_action('wp_enqueue_scripts', 'basic_load_scripts_and_styles'); Basic jQuery Slider - The Script http://basic-slider.com/

jQuery(document).ready(function($) { $('#slideshow').bjqs({ 'height' : 320, 'width' : 620, 'responsive'
: true }); }); Basic jQuery Slider - Activate! http://basic-slider.com/

jQuery(document).ready(function($) { $('#slideshow').bjqs({ 'height' : 320, 'width' : 620, 'responsive'
: true }); }); function basic_load_scripts_and_styles() { ... wp_register_script( 'basicSlider', get_template_directory_uri() . '/js/bjqs-1.3.min.js', array('jquery') ); wp_enqueue_script('custom', get_template_directory_uri() . '/js/custom.js', array('basicSlider') ); } add_action('wp_enqueue_scripts', 'basic_load_scripts_and_styles'); Basic jQuery Slider - Activate! http://basic-slider.com/

Basic jQuery WordPress Post Slider http://www.ﬂickr.com/photos/alsis35/5847674332

Elastislide Carousel http://www.ﬂickr.com/photos/alsis35/5841197915

<ul id="carousel" class="elastislide-list"> <li><a href="#"><img src="images/1.jpg" alt="image01" / ></a></li> <li><a
href="#"><img src="images/2.jpg" alt="image01" / ></a></li>  </ul> Elastislide Carousel - The Markup http://tympanus.net/Development/Elastislide/

href="#"><img src="images/2.jpg" alt="image01" / ></a></li>  </ul> Elastislide Carousel - The Markup our theme index.php style.css nggallery gallery.php http://tympanus.net/Development/Elastislide/

href="#"><img src="images/2.jpg" alt="image01" / ></a></li>  </ul> Elastislide Carousel - The Markup our theme index.php style.css nggallery gallery.php http://tympanus.net/Development/Elastislide/ <?php if (!empty ($gallery)) : ?> <ul class="elastislide-list" id="carousel"> <?php foreach ( $images as $image ) : ?> <li><a href="<?php echo $image->imageURL ?>" <?php echo $image->thumbcode ?> ><img alt="<?php echo $image- >alttext ?>" src="<?php echo $image->thumbnailURL ?>" <? php echo $image->size ?> /></a></li> <?php endforeach; ?> </ul> <?php endif; ?>

<link type="text/css" rel="stylesheet" href="elastislide.css"
/> Elastislide Carousel - The Style http://tympanus.net/Development/Elastislide/

<link type="text/css" rel="stylesheet" href="elastislide.css"
/> function basic_load_scripts_and_styles() { // Styles wp_enqueue_style( 'elastislide', get_template_directory_uri() . '/css/elastislide.css' ); } add_action('wp_enqueue_scripts', 'basic_load_scripts_and_styles'); Elastislide Carousel - The Style http://tympanus.net/Development/Elastislide/

<script src="modernizer.js"></script>  <script src="jquery.min.js"></script>  <script src="elastislide.js"></script> Elastislide Carousel - The Script http://tympanus.net/Development/Elastislide/

<script src="modernizer.js"></script>  <script src="jquery.min.js"></script>  <script src="elastislide.js"></script> Elastislide Carousel - The Script http://tympanus.net/Development/Elastislide/ function basic_load_scripts_and_styles() { wp_register_script( 'elastislide', get_template_directory_uri() . '/js/ jquery.elastislide.js', array('jquery', 'modernizer') ); wp_register_script( 'modernizer', get_template_directory_uri() . '/js/modernizr.custom. 17475.js' ); wp_enqueue_script('custom', get_template_directory_uri() . '/js/custom.js', array('elastislide') ); } add_action(...

jQuery().ready(function($) { $('#carousel').elastislide(); }); Elastislide Carousel - Activate! http://tympanus.net/Development/Elastislide/

NextGen Gallery Elastislide Carousel http://www.ﬂickr.com/photos/alsis35/5841197915

Superfish Dropdowns http://www.ﬂickr.com/photos/alsis35/5798117219

@import url("../twentytwelve/style.css"); @media screen and (min-width: 600px) { .sf-js-enabled li
ul { display: block; } } Superfish Dropdowns - The Style http://tympanus.net/Development/Elastislide/

<script src="jquery.min.js"></script>  <script src="hoverIntent.js"></script> <script src="superfish.js"></script> http://users.tpg.com.au/j_birch/plugins/superﬁsh/ Superfish Dropdowns - The Script

<script src="jquery.min.js"></script>  <script src="hoverIntent.js"></script> <script src="superfish.js"></script> http://users.tpg.com.au/j_birch/plugins/superﬁsh/ function fish_load_scripts() { wp_register_script( 'hoverintent', get_stylesheet_directory_uri() . '/scripts/ hoverIntent.js', array('jquery' ) ); wp_register_script( 'superfish', get_stylesheet_directory_uri() . '/scripts/superfish.js', array( 'jquery', 'hoverintent' ) ); wp_enqueue_script( 'custom', get_stylesheet_directory_uri() . '/scripts/custom.js', array( 'superfish' ) ); } add_action( 'wp_enqueue_scripts', 'fish_load_scripts' ); Superfish Dropdowns - The Script

$(document).ready(function() { $('ul.sf-menu').superfish(); }); Superfish Dropdowns - Activate! http://users.tpg.com.au/j_birch/plugins/superﬁsh/

$(document).ready(function() { $('ul.sf-menu').superfish(); }); jQuery(document).ready(function($) { $('.main-navigation ul.nav-menu,.main-navigation div.nav-menu >
ul').superfish({ animation: { height: 'show' } }); }); Superfish Dropdowns - Activate! http://users.tpg.com.au/j_birch/plugins/superﬁsh/

WordPress Superfish Dropdowns http://www.ﬂickr.com/photos/alsis35/5798117219

Fullscreen Split Slider http://www.ﬂickr.com/photos/7477245@N05/8275831721/

<div id="slider" class="sl-slider-wrapper"> <div class="sl-slider"> <div class="sl-slide bg-1"> <div class="sl-slide-inner">
 </div> </div> </div> </div> <div id="slider" class="sl-slider-wrapper"> <div class="sl-slider"> <div class="sl-slide bg-1"> <div class="sl-slide-inner">  </div> </div> </div> </div> http://tympanus.net/Tutorials/FullscreenSlitSlider/ Fullscreen Split Slider - The Markup

<div id="slider" class="sl-slider-wrapper"> <div class="sl-slider"> <div class="sl-slide bg-1"> <div class="sl-slide-inner">
 </div> </div> </div> </div> <div id="slider" class="sl-slider-wrapper"> <div class="sl-slider"> <div class="sl-slide bg-1"> <div class="sl-slide-inner">  </div> </div> </div> </div> http://tympanus.net/Tutorials/FullscreenSlitSlider/ Fullscreen Split Slider - The Markup <?php if ( have_posts() ) : $counter = 1; ?> <div id="slider" class="sl-slider-wrapper"> <div class="sl-slider"> <?php while ( have_posts() ) : the_post(); ?> <div class="sl-slide bg-<?php echo $counter; ?>"> <div class="sl-slide-inner">Content</div> </div> <?php $counter++; endwhile; ?> </div> </div> <?php endif; ?>

.sl-slider { position: absolute; top: 0; left: 0; } .sl-slide,
.sl-slides-wrapper, .sl-slide-inner { position: absolute; width: 100%; height: 100%; top: 0; left: 0; } http://tympanus.net/Tutorials/FullscreenSlitSlider/ Fullscreen Split Slider - The Style

function fss_load_assets() { wp_register_script( 'bacond', get_template_directory_uri() . '/js/jquery.bacond.min.js', array('jquery'));
wp_register_script( 'slitslider', get_template_directory_uri() . '/js/ jquery.slitslider.js', array('jquery', 'bacond')); wp_enqueue_script( 'fsscustom', get_template_directory_uri() . '/js/custom.js', array('slitslider')); } add_action('wp_enqueue_scripts', 'fss_load_assets'); http://tympanus.net/Tutorials/FullscreenSlitSlider/ Fullscreen Split Slider - The Script

Fullscreen WordPress Post Slider http://www.ﬂickr.com/photos/7477245@N05/8275831721/

Single-Page BBQ http://www.ﬂickr.com/photos/alsis35/5604971486

function singlepage_scripts() { wp_register_script( 'bbq', get_stylesheet_directory_uri() . '/js/jquery.ba- bbq.min.js', array('jquery')
); wp_enqueue_script( 'singlepage', get_stylesheet_directory_uri() . '/js/custom.js', array('jquery', 'bbq') ); } add_action('wp_enqueue_scripts', 'singlepage_scripts'); Single Page - The Script

singlePage.navLinks.each(function() { var link = jQuery(this); var href = link.attr('href');
href = href.replace(singlePage.siteURL, ''); link.attr('href', '#' + href); }); Single Page - Activate!

Single Page - Update href http://mysite.com/about-us #/about-us

jQuery(window).bind('hashchange', function(e) { var url = singlePage.siteURL + e.fragment; if
(e.fragment) { primary.fadeTo(300, 0, function() { primary.load(url + ' #content', function(){ primary.fadeTo(300, 1); }); }); } }); Single Page - Activate!

Single-Page BBQ Theme http://www.ﬂickr.com/photos/alsis35/5604971486

Can we add jQuery magic to WordPress?

Questions?

WordCamp San Diego: Using jQuery Magic in Your ...

WordCamp San Diego: Using jQuery Magic in Your WordPress Themes

More Decks by Natalie MacLees

Other Decks in Technology

Featured

Transcript