Introduction
WordPress theming hasn’t changed very much over the past few years. It’s certainly become more refined, and projects such as Underscores (_s) have helped promote best practices and robust standards. That said, we can still go as far back as Kubrick and find plenty of common ground with the most recent WordPress themes.
This isn’t a bad thing, and it’s probably one of the reasons WordPress is so popular and so many people have been able to get involved in theming. But the web has changed substantially since WordPress welcomed its first default theme in 2006. More than half the web’s users now access it from mobile devices. We have HTML5, and with it a whole host of browser APIs that didn’t exist in 2006. These advances have helped a whole new ecosystem of JavaScript-based web apps blossom.
Some aspects of this ecosystem have found their way into WordPress themes. Most of us have probably seen our fair share of jQuery-enabled carousels. We have JavaScript-enhanced tiled galleries and lightboxes available through plugins like Jetpack. Yet very few of us would consider building a theme entirely in JavaScript. The thought may even send shivers down many of our spines.
Building a WordPress theme with JavaScript might be considered lunacy by some, who may wonder why you’d want to attempt such a thing. Others may have questions about SEO, performance, accessibility, plugin compatibility, among a myriad of issues. There are definitely challenges to building a theme with JavaScript, and before reading any further you should know that this is still an experimental area of WordPress theme development.
But, and this is a big “but,” a JavaScript-based approach to theme-building opens up a wonderful world of new possibilities to the curious developer, including:
- Storing and pre-fetching content using the browser’s Web Storage API to allow server-less, seamless transitions — using the browser’s History API — between posts and pages.
- Animations within themes, for more natural and intuitive interactions.
- The ability to create entirely offline experiences using all new Service Workers.
Along with these exciting improvements, the WordPress REST API is being integrated into Core. The REST API makes it much easier for us to build themes with JavaScript. There is no better time to start getting familiar with how the WordPress ecosystem is changing.
The Series
In this five-part tutorial, we’ll expose you to the brave new world that WordPress theme development might inhabit in the coming years. While the best practices for building a theme in this way are still to be established, we’ll do our very best to guide you into the secret garden of the future.
Stay tuned for:
- JavaScript, jQuery and the web landscape today
- Introducing REST APIs
- Challenges in JavaScript-Based Theming
- Bringing React into our theme
- Et voila, a JavaScript WordPress theme that uses the WordPress REST API
ThemeShaper 
Oh my goodness, you are in my head! I have been wanting to experiment with a React based WP theme for a while and have been obsessing over the obvious obsticles including child theme ready, widget areas, what you mention, etc…
I am so excited about this series!!! Thank you 😉
It’s awesome. Thanks Admin, for planning such great tutorials.
We are excited about them.
🙂
This is fantastic, thank you so much for sharing this knowledge!
This is going to be amazing. I’m looking forward to seeing how to integrate react with wordpress.
Looking forward to this as well! Super excited!
i want to learn this, recently i encountered with this and its attracted me a lot. thanks i waiting for series
Reblogged this on Joan Artés.
So maybe you plan on touching on this, but I’d like your take on why this approach is better than standard themes using PHP. Obviously if one knows JS/CSS/HTML but not PHP you can use your current skills and not have to ramp up on PHP, but are there other advantages?
Hi Rick, yes. In this introductory article above I talk about the benefits that become available such as pre-fetching content, smooth animations and transitions between content and new technologies like Service Workers which allow you to create offline experiences.
I show some specific examples in the first part of the tutorial too: https://themeshaper.com/2015/10/29/javascript-jquery/
A very interesting approach, I´ll be surely reading the whole tutorial. Thanks to the whole team for publishing so much good information about WP theme development.
I hope this series picks back up again soon! I’m looking forward to the last two sections.