WordPress
& The Chamber of
Single Page Apps
![](http://vignette2.wikia.nocookie.net/harrypotter/images/0/08/Goat_Patronus.jpg/revision/latest?cb=20111106200300)
Building a sample patronus viewer within a custom wordpress theme
goatronus
David Khourshid
- @davidkpiano
- github.com/davidkpiano
Daniel Walker
- @laser_goat
- github.com/lasergoat
![](https://s3.amazonaws.com/media-p.slid.es/uploads/174419/images/1946872/Screen_Shot_2015-11-13_at_2.18.38_PM.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/174419/images/1946873/Screen_Shot_2015-11-13_at_2.18.44_PM.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/406446/images/1947090/deal-with-it.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/406446/images/1947090/deal-with-it.png)
The Problem
A client needs functionality too complex/custom
for an existing plugin or theme
BUT, you still want all the great
functionality of WordPress
SOLUTION
Within a WordPress theme,
show custom content
within a Single Page App
OUR EXAMPLE CODE
https://github.com/lasergoat/wordcamp-spa
![](https://s3.amazonaws.com/media-p.slid.es/uploads/174419/images/1946881/Screen_Shot_2015-11-13_at_2.12.09_PM.png)
BONUS: homepress
- local development
- alternative to VVV
- vm for each project
- github.com/lasergoat/homepress
BACKEND SETUP
- Activate JSON-API Plugin
- Make Custom Post Type(s)
- Setup ACF
FRONTEND SETUP
- Make Short-Tag for SPA
- Install React or Angular
- Make Fetch Calls to Backend
![](https://s3.amazonaws.com/media-p.slid.es/uploads/406446/images/1946898/goat-diagram-1162357.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/406446/images/1946898/goat-diagram-1162357.jpg)
CUSTOM post type
![](https://s3.amazonaws.com/media-p.slid.es/uploads/406446/images/1946927/Screen_Shot_2015-11-13_at_2.38.51_PM.png)
functions.php
Text
(CPT)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/406446/images/1946935/Screen_Shot_2015-11-13_at_2.40.53_PM.png)
(ACF)
Advanced custom fields
![](https://s3.amazonaws.com/media-p.slid.es/uploads/406446/images/1947064/Screen_Shot_2015-11-13_at_2.40.24_PM.png)
Attach ACF to post
Older versions of JSON-API don't include ACF meta data when you request a custom post
![](https://s3.amazonaws.com/media-p.slid.es/uploads/406446/images/1946971/Screen_Shot_2015-11-13_at_2.50.03_PM.png)
functions.php
Test api
GET: /api/get_posts/?post_type=patronus
![](https://s3.amazonaws.com/media-p.slid.es/uploads/406446/images/1946950/Screen_Shot_2015-11-13_at_2.44.08_PM.png)
This is the resource which your
javascript frontend will Fetch
NOTE ON API
If complex joins, searching, or other advanced functionality is required,
Custom post types are great for flat data with minimal functionality
![](https://s3.amazonaws.com/media-p.slid.es/uploads/406446/images/1947076/1423519219laravel-l-slant.png)
use Laravel instead of CPTs
SHORT CODE
![](https://s3.amazonaws.com/media-p.slid.es/uploads/406446/images/1946994/shortcode.png)
functions.php
<div id="app"></div>
<script src="path/to/bundle.js">
</script>
![](https://i.imgur.com/KH55O45.png)
Our Bundle of Joy
- One bundle.js file
- Webpack
- Browserify
- JSPM
- Rollup
- Whatever
Iframes?
Probably.
Ilazy.
import React from 'react';
import ReactDOM from 'react-dom';
class App extends React.Component {
render() {
// poop out the app
}
}
ReactDOM.render(<App />, document.getElementById('app'));
What are thooooose?
![](http://i1.wp.com/theverybesttop10.files.wordpress.com/2013/08/the-world_s-top-10-best-images-of-animals-in-shoes-3.jpg?resize=584%2C367)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/174419/images/1947754/Screen_Shot_2015-11-14_at_12.53.09_AM.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/406446/images/1946994/shortcode.png)
function mapPatronus(patronus) {
return {
id: patronus.id,
visible: true,
...patronus.acf
};
}
- Each post is a patronus
- Each patronus needs a unique id
- visible = patron matches query
- Get fields from patronus.acf
componentDidMount() {
fetch('/api/get_posts/?post_type=patronus&count=99')
.then((res) => res.json())
.then((res) => {
this.setState({
patronuses: res.posts.map(mapPatronus)
});
});
}
- Get patronuses from API
- Convert them to JSON
- Map each patronus using mapPatronus
- Update app state to have these patronuses
JK. Be glad I'm not live-coding this.
Live-CODING Time!
WordCamp SPA
By Daniel Walker
WordCamp SPA
WordPress and the chamber of single page apps! We demonstrate how to make a simple Patronus Viewer app within a custom WordPress theme.
- 2,860