Your browser doesn't support the features required by impress.js, so you are presented with a simplified version of this presentation.

For the best experience please use the latest Chrome, Safari or Firefox browser.

Mad Mashups with WordPress

Your Host: Dylan Kuhn

WordPress alone is elegant but solitary

Like a great work of art

standing alone and complete

it can inspire a strong desire

to add a little something

lisa mashup

It's Mashup Time!

To make a mashup:

take one good thing (WordPress)
add another (Google maps? Flickr?)
and perhaps another (Stripe? Salesforce?)
but most important...

what makes you unique?




Let's see how others have gone mad before us...
Urban Capture creates this: urbancapture
And we see this: urban capture map

Mashup = WordPress + Google Maps + fotomoto

Or Tom Mills, perhaps even madder tommills front

Mashup = WordPress + Google Maps + Flash 360° Panorama

But it isn't just about photos

if you can create it

you can mash it up

This very presentation is a WordPress mashup!


Mashup = WordPress + impress.js

Hmm, can this end well?


Oh, it never ends...

...there's always a new ingredient to try

So what can go in a mashup?

Anything with an API

(Application Programming Interface)

WordPress has a natural way to make mashups


A (less fun) word for mashing up is


WordPress does it through the plugin API

integration1000+ plugins
payment 450
twitter 1165
google 1150
facebook 850

and we'll make more...

Plugins behind examples so far: Geo Mashup, fotomoto, 3d Presentation

Library: asteroids.js

Plugin: Asteroids Widget

Result: mayhem



Plugin: Bitcoin Miner

Result: let's not find out

Use quality ingredients

Plugins are not the only way, plenty of


mash up WordPress for us.

Apps use the native XML-RPC API.

Plugins can provide alternate APIs.

(like Jetpack's JSON API)

Draft is a mashup for editing

draft back

Draft published to WordPress

draft published

Mashup: Markdown + WordPress + Google Drive + Twitter + ...

IFTTT - mashups without code

ifttt recipe

That's @renowordcamp AND #madmashups

~15 minute lag

But we like code!

How about mashups for developers?

(so we can make more mashups)

wp-cli: WordPress + command line

www$ mkdir cli
www$ cd cli
cli$ wp core download
Downloading latest WordPress (en_US)...
% Total % Received % Xferd Average Speed Time Time Time Current
Dload Upload Total Spent Left Speed
100 4895k 0 4895k 0 0 1827k 0 --:--:-- 0:00:02 --:--:-- 1890k
Success: WordPress downloaded.
cli$ mysql --user=root --password=xxx --execute="CREATE DATABASE wp_cli;"
cli$ cp wp-config-sample.php wp-config.php
cli$ sed -i '' -e 's/database_name_here/wp_cli/' wp-config.php
cli$ sed -i '' -e 's/username_here/root/' wp-config.php
cli$ sed -i '' -e 's/password_here/xxx/' wp-config.php
cli$ wp core install --url=http://localhost/cli --title="CLI demo" \ > --admin_name=dylan --admin_password=reset
Success: WordPress installed successfully.
create a new plugin
cli$ wp scaffold plugin mad-plugin --plugin_name="Mad Mashup Sample" --activate
Success: Created /Users/dylankkuhn/Sites/scratch.local/cli/wp-content/plugins/mad-plugin
Success: Created test files in /Users/dylankkuhn/Sites/scratch.local/cli/wp-content/plugins/mad-plugin
Success: Plugin 'mad-plugin' activated.
It even generates a unit test
cli$ cd wp-content/plugins/mad-plugin
mad-plugin$ WP_TESTS_DIR=~/Projects/wp-unit-tests phpunit -c phpunit.xml
Running as single site... To run multisite, use -c multisite.xml
Not running ajax tests... To execute these, use --group ajax.
PHPUnit 3.7.10 by Sebastian Bergmann.

Configuration read from /Users/dylankkuhn/Sites/scratch.local/cli/wp-content/plugins/mad-plugin/phpunit.xml


Time: 1 second, Memory: 42.25Mb

OK (1 test, 1 assertion)
The web interface reflects our work cli back end

(did you feel the need to check?)

A CLI adds huge potential for mashups

shell scripting

mashups with any CLI program

build, provisioning, testing, etc

SSH access


One example: 10up's Varying Vagrant Vagrants

printf "Downloading WordPress.....\n"
cd /srv/www/
curl -O
tar -xvf latest.tar.gz
mv wordpress wordpress-default
rm latest.tar.gz
cd /srv/www/wordpress-default
printf "Configuring WordPress...\n"
wp core config --dbname=wordpress_default --dbuser=wp --dbpass=wp --quiet
wp core install --quiet --title="Local WordPress Dev" \
--admin_name=admin --admin_email="" --admin_password="password"

Mashup: WordPress + Vagrant

Vagrant: (VirtualBox, VMWare, AWS...) + ( Chef, Puppet, sh...)

Go forth and mash!

More mashup examples: (this site): WP + impress.js
Global Citizen Year: WP + Isotope
Congressional Hunger Center: WP + DataTables
Keshet: WP + Google Maps + + Flickr

More mashup plugins I've used:
woocommerce: WP + payments gateways
TablePress: WP + DataTables
oEmbed Gist: WP +
BruteProtect: WP + new botnet defense service

Use a spacebar or arrow keys to navigate