WordPress
& The Chamber of
Single Page Apps
Building a sample patronus viewer within a custom wordpress theme
goatronus
David Khourshid
- @davidkpiano
- github.com/davidkpiano
Daniel Walker
- @laser_goat
- github.com/lasergoat
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
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
CUSTOM post type
functions.php
Text
(CPT)
(ACF)
Advanced custom fields
Attach ACF to post
Older versions of JSON-API don't include ACF meta data when you request a custom post
functions.php
Test api
GET: /api/get_posts/?post_type=patronus
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
use Laravel instead of CPTs
SHORT CODE
functions.php
<div id="app"></div><script src="path/to/bundle.js">
</script>
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?
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