How to Build a WordPress Plugin

by Peter Cook / @prcweb / prcweb.co.uk

About me

  • freelance web developer
  • former life building CAD software (C++)
  • web development, including WordPress
  • mostly front-end now (e.g. data visualisation)

-

Please excuse any WordPress rustiness :)

Aims

What's a plugin?

A simple plugin

Shortcodes

JavaScript

Bar chart plugin

What's a plugin?

A reusable component that extends the functionality of WordPress

A simple plugin

Directory structure


/simple
  simple.php

directory name = main php filename

A simple plugin

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');
?>

Enable in dashboard

A slightly more fleshed out plugin


					/simple
					  simple.php
					  uninstall.php
					  /includes
					  /images
					  /js
					  /css

					

What can you do in a plugin?

Pretty much anything... e.g.

  • actions/filters
  • shortcodes
  • add custom post types
  • modify the admin panel
  • add widgets
  • rewrites
  • database create/read/update/delete

Actions and filters

'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

Action


function prcweb_meta_description() {
  echo '<meta name="description" content="How to make a plugin">';
}

add_action('wp_head', 'prcweb_meta_description');
					

Filter


function prcweb_modify_post_title($title) {
  $title = strtoupper($title);
  return $title;
}

add_filter('the_title', 'prcweb_modify_post_title');
					

Add a submenu to admin


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');
					

Bar chart plugin

barchart shortcode

Concepts

Including JavaScript files (e.g. Highcharts.js)

Shortcode

Passing data into JavaScript scope

Including JavaScript

Register


wp_register_script($handle, $src, $deps, $ver, $in_footer);
					

Enqueue (include)


wp_enqueue_script($handle);
					

For example...


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');
					

Shortcode

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"
}
					

Passing data into JavaScript scope


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]}
					

Bar chart plugin (PHP)

  • unpacks shortcode attributes and stores in self::$data
  • outputs chart div containers
  • includes highcharts.js and highbar.js
  • exports self::$data into animdata_chart_data JS variable

Bar chart plugin (JavaScript)

For each chart div container:

  • extract the data from animdata_chart_data
  • create Highcharts chart

Thank you

___

Peter Cook / peter@prcweb.co.uk / @prcweb