In an ideal world
I’m using the latest and fanciest technology available…
… running on great infrastructure or on customised self-
In a few words…
… Y’all know what?
I’m a full-stack developer, you a**holes!
In the real world
(Does coﬀee heating?… And don’t forget cats’ gifs!)
(LAMP stack, wtf!)
Impossible deadlines and limited budget
(Duh, was I supposed to pay you for the website?
Visibility wasn’t enough?)
Let’s be honest here…
… this stuﬀ won’t go away anytime soon!
WP Rest API made it to the core in the 4.7 update of WP…
no need to install a plug-in…
to fully beneﬁt of its endpoints, you have to build your
own, custom theme!
… Ok, not 100% true, but I had to use some cool marketing jargon
“Build a pure, beautiful and feature-rich JS
theme and never look back again to the legacy
PHP spaghetti-code Wordpress throws in”
Example of a complex WP theme
Posts and single pages (usual stuﬀ)
Multi-language (requires a plug-in, e.g. WPML)
Events (+ management) via custom post types
List users and custom author pages with details
Contact form(s) with validation and ﬁle upload
Beautiful, responsive and fast theme
Usual stuﬀ to run WP locally,
i.e. MAMP (PRO) or via Terminal with LAMP stack
… And, no, Webpack Dev Server won’t do the task!
(usually in /wp-content/themes/your-theme)
— bin/ (for additional PHP conﬁg ﬁles)
— less/ (or sass, it’s up to you)
— src/ (our main react folder)
Yep! React stuff mixed up with PHP!!!
However, on deploy these go away
Let’s ﬁrst conﬁgure WP to talk to React
Redux will hold the application state in its store,
including data fetched from the WP Rest API endpoints
PS.: nothing fancy here…
“Ducks” are redux modules containing single-purpose
constants, actions and reducers.
React Router 4.0 alpha
Component based, but unstable (e.g., Match vs. Route)
Not working with “react-router-redux”, had to build my
Huge mess with “intl", “react-intl” and “react-redux-intl”…
PS.: version > 4.0 beta? Need contributions!
WP multi language with React?
Needs WPML (or a similar plug-in)
To fully recognise new locale a browser reload is needed
Translation strings are hardcoded, thus wasn’t easier an
other solution (e.g. inject directly from PHP)?
Some cool stuff…
WP 4.7 + React: excellent combination to build an almost
pure JS theme
Blazing fast (once your bundles are in cache)
Using endpoints opens up endless possibilities with a few
specialised components, e.g. search and contact
Some less cool stuff… (1)
You HAVE to know both JS and PHP in order to beneﬁt of
You have to conﬁgure WP to use the WP Rest APIs,
otherwise it doesn’t work as expected (e.g. menus!!!)
Overcomplicated, over bloated
Simple out-of-the-box features do not work without
tweaks (ex. active state on navigation)
Some less cool stuff… (2)
Multi language is just a nightmare, as well as routing
(you need to manipulate the DOM — not the virtual, but
the real — to detect clicks or onEnters…)
You are stuck with a LAMP stack, unless you fetch data
In production, simplest changes (e.g., string translations
or add/modify a className) require “npm run build”,
while in PHP just edit the .php ﬁle
Some less cool stuff… (3)
Bundle size ~1MB!!!
(ok, can cache it and gzip it, but what’s the point?)
Site in production: