Using JavaScript Libraries like D3.js with WordPress

Presented By: John Cook @johntylercook

WPtraining.tv

• Created by Brendan Eich in May 1995

• Dynamically Typed• Types are associated with values, not with variables

• Object Based• Supports Dot Notation: object.y = 5• Supports Bracket Notation: object['y'] = 5

• Run Time Evaluation• Properties and values can be added, changed, or

deleted at run-time.

JavaScript

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

•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 WordPresswp_enqueue_script( $handle, $source, $deps, $ver, $in_footer ); // Loading an example scriptwp_enqueue_script('myscript', plugins_url( '/js/myscript.js', dirname(__FILE__) ) );  // Loading a pre-registered scriptwp_enqueue_script('jquery');

?>

•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 WordPress Themes

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 into Text mode to add the chart code

JavaScript and Post Content

JavaScripting.com

•D3.js

• jQuery

•Three.js

JavaScript Libraries

JSPerf.com

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

Questions?Presented By: John Cook

@johntylercook

WPtraining.tv