Successfully reported this slideshow.
Activate your 14 day free trial to unlock unlimited reading.
Who Am I?
• My name is Taylor Lovett
• Director of Web Engineering at 10up
• Open source community member
• WordPress core contributor
• One of the creators of ElasticPress
• Creator of NodeifyWP
10up is hiring!
What is the ideal way to build,
serve, and manage a website?
The “Perfect” Stack (opinion)
• WordPress for managing content.
• Isomorphism for the “app-like” experience and
code base simplicity and extensibility
Isomorphic Web Applications
• Applications where the same code is used for
both server side and client side rendering
• Create single page applications without having to
wait a long time for initial loading
• “App-like” experiences are arguably the future of
PHP in WordPress
• WordPress is built in PHP.
• Can’t run PHP client side.
Current Options for the “App-like”
• Headless WordPress. Create a front-end in a
Node.js framework that interacts with the WP
• Handle initial render with PHP and bootstrap JS
templates into theme.
How do we get ourselves to
the “perfect” web stack?
• Framework for creating isomorphic web
applications in PHP and WordPress.
• Beneﬁt from the editorial experience of WordPress
with the latest greatest Node.js frameworks and
technologies such as React.js.
• No separate Node.js/Express server necessary
Getting Set Up
• Make sure you have at least WP version 4.7 or
the JSON REST API is installed.
• Include NodeifyWP in your theme. With
composer require 10up/nodeifywp
• NodeifyWP bypasses all standard WordPress
template ﬁles: index.php, single.php, page.php,
• To initialize NodeifyWP in your theme add the
following to the top of functions.php:
require_once __DIR__ . '/vendor/autoload.php';
__DIR__ . '/js/server.js',
get_stylesheet_directory_uri() . '/js/client.js'
What Did That Do?
• First, we required our composer autoloader so
NodeifyWP is included automatically.
• NodeifyWPApp::setup() takes two
parameters: path to server side JS and path to
client side JS.
• When we’ve initialized our NodeifyWP application,
the following will be available in your server-side
• For full documentation see README.md
• NodeifyWP contains a template tag API for
localizing hooks, options, etc. for use in our
• NodeifyWP comes with some default template
• Nodeify WP registers an API endpoint at:
• The endpoint takes a “location” GET parameter
and returns the new state of the application (new
route, template tags, posts, post tags, etc.)
• This endpoint can be extended for custom
Again, Start with Twenty Sixteen React
• Twenty Sixteen React provides a great starter
application using React.js and Redux.
We need to send a PUT request to this endpoint with
our post data. Of course we must authenticate before