WordPress NYC Feb 2016 Meetup Presentation

1. Using JavaScript Libraries
like D3.js withWordPress
Presented By: John Cook
@johntylercook
WPtraining.tv

2. • Created by Brendan Eich in May 1995
• DynamicallyTyped
• Types are associated with values, not with variables
• Object Based
• Supports Dot Notation: object.y = 5
• Supports Bracket Notation: object['y'] = 5
• RunTime Evaluation
• Properties and values can be added, changed, or deleted at run-time.
JavaScript

3. Plugins Themes Content
Pros
• Can add to both site and
admin
• Works with most themes
• Can include in content with
shortcodes
• Extreme control
over where within
the theme the
library should be
used.
• Placed where you want
within post and page
content
• Easy to add/edit
• Works with most themes
Cons
• Requires programming
experience
• Requires
programming
experience
• More difficult to
include within page
content
• JavaScript libraries might
be included twice or not in
the proper way.
JavaScript and WordPress

4. •Use wp_enqueue_script() to add Scripts
•Use the Shortcode API to add shortcodes that can then
be used within post and page content.
JavaScript and WordPress Plugins
<?php
//To load a script that isn't already registered with WordPress
wp_enqueue_script( $handle, $source, $deps, $ver, $in_footer );
// Loading an example script
wp_enqueue_script('myscript', plugins_url( '/js/myscript.js', dirname(__FILE__) ) );
// Loading a pre-registered script
wp_enqueue_script('jquery');
?>

5. •Use wp_enqueue_script() to add script libraries
•Can create and add JavaScript code to a page
template.
•Can add JavaScript code to header.php or footer.php
and use:
• is_page_template()
• is_page()
JavaScript and WordPressThemes

6. 1. Install a plugin for showing JavaScript/charts
and use the built in shortcodes.
2. Install a plugin for including scripts in the header
of the page and then go intoText mode to add
the chart code
JavaScript and Post Content

7. JavaScripting.com
•D3.js
•jQuery
•Three.js
JavaScript Libraries

8. JSPerf.com

9. https://wordpress.org/plugins/ipu-chart/
•Supports D3.js and SVG Charting
•Install the plugin and use the shortcode to add
charts to post and page content.
IPU-Chart

10. Questions?
Presented By: John Cook
@johntylercook
WPtraining.tv