Date post: | 06-Apr-2017 |
Category: |
Technology |
Upload: | john-cook |
View: | 420 times |
Download: | 0 times |
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