Using JavaScript Libraries like D3.js with WordPress

Using JavaScript Libraries like D3.js with WordPress

• 1.
  Using JavaScript Libraries likeD3.js withWordPress Presented By: John Cook @johntylercook WPtraining.tv
• 2.
  • Created byBrendan 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() toadd 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() toadd 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 aplugin 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 andSVG Charting •Install the plugin and use the shortcode to add charts to post and page content. IPU-Chart
• 10.
  Questions? Presented By: JohnCook @johntylercook WPtraining.tv