Skip to content

Instantly share code, notes, and snippets.

@zgordon
Created February 15, 2018 10:58
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save zgordon/cc3ce894b5bfca6f6e42d514c60e02b8 to your computer and use it in GitHub Desktop.
Save zgordon/cc3ce894b5bfca6f6e42d514c60e02b8 to your computer and use it in GitHub Desktop.
An example of enqueuing custom JavaScript (and JavaScript libraries) to add frontend functionality to blocks. The code would go into your functions.php file.
<?php
/**
* Enqueue custom block JavaScript on the frontend only
*/
function mytheme_frontend_block_scripts() {
// Enqueue fitvids JS library from CDN for responsive video embeds
wp_enqueue_script( 'fitvids', 'https://cdnjs.cloudflare.com/ajax/libs/fitvids/1.2.0/jquery.fitvids.min.js', array('jquery') );
// Enqueue swipebox JS library from CDN for lightbox galleries
wp_enqueue_script( 'swipebox', 'https://cdnjs.cloudflare.com/ajax/libs/jquery.swipebox/1.4.4/js/jquery.swipebox.min.js', array('jquery') );
// Enqueue necessary swipebox CSS styles from CDN
wp_enqueue_style( 'swipebox', 'https://cdnjs.cloudflare.com/ajax/libs/jquery.swipebox/1.4.4/css/swipebox.min.css' );
// Enqueue our theme custom block JS file and add necessary dependencies
wp_enqueue_script( 'mytheme-blocks-frontend', get_template_directory_uri() . '/js/frontend.blocks.js', array('jquery','swipebox', 'fitvids'), time() );
}
add_action( 'wp_enqueue_scripts', 'mytheme_frontend_block_scripts' );
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment