by Peter Cook / @prcweb / prcweb.co.uk
-
Please excuse any WordPress rustiness :)
What's a plugin?
A simple plugin
Shortcodes
JavaScript
Bar chart plugin
A reusable component that extends the functionality of WordPress
Directory structure
/simple
simple.php
directory name = main php filename
simple.php
<?php
/*
Plugin Name: Simple
Plugin URI: http://prcweb.co.uk
Description: Provides a simple shortcode
Author: Peter Cook
Version: 0.1
Author URI: http://prcweb.co.uk
*/
function test_shortcode() {
return '<h1>Hey there!</h1>';
}
add_shortcode('test-shortcode', 'test_shortcode');
?>
/simple
simple.php
uninstall.php
/includes
/images
/js
/css
Pretty much anything... e.g.
'hooks' are fired throughout the page lifecycle
e.g. wp_head is fired when the <head> section is built
-
we can attach our own functions to these hooks
function prcweb_meta_description() {
echo '<meta name="description" content="How to make a plugin">';
}
add_action('wp_head', 'prcweb_meta_description');
function prcweb_modify_post_title($title) {
$title = strtoupper($title);
return $title;
}
add_filter('the_title', 'prcweb_modify_post_title');
function demo_admin_settings_page() {
echo 'My menu!';
}
function prcweb_demo_menu() {
add_options_page(
'DEMO settings',
'DEMO settings',
'manage_options',
'demo_admin_settings',
'demo_admin_settings_page');
}
add_action('admin_menu', 'prcweb_demo_menu');
Including JavaScript files (e.g. Highcharts.js)
Shortcode
Passing data into JavaScript scope
Register
wp_register_script($handle, $src, $deps, $ver, $in_footer);
Enqueue (include)
wp_enqueue_script($handle);
wp_register_script('highcharts', 'http://code.highcharts.com/highcharts.js', array('jquery'));
wp_register_script('highbar', plugin_dir_url(__FILE__).'js/highbar.js', array('highcharts'));
wp_enqueue_script('highbar');
Parameters
[barchart data="40, 10, 40" categories="A,B,C"]
add_shortcode('barchart', 'prcweb_barchart_shortcode');
function prcweb_barchart_shortcode($attr) {
$attr['data']; // "40, 10, 40"
$attr['categories']; // "A,B,C"
}
wp_localize_script(
'highbar',
'animdata_chart_data',
array(
'data' => array(10, 20, 30),
'categories' => array('A', 'B', 'C')
)
);
highbar.js
console.log(animdata_chart_data);
> Object {data: Array[3], categories: Array[3]}
For each chart div container:
___
Peter Cook / peter@prcweb.co.uk / @prcweb