Anadama: An Example WordPress Recipe Theme Based on React

react

Since Matt Mullenweg gave the WordPress community a homework assignment to “Learn JavaScript, deeply,” links to tutorials and training courses have been flying around. Once you have grasped some of the basics, one of the best ways to learn is to start building a small project.

If you’re looking to explore adding JavaScript to WordPress theming, check out Anadama, an experimental React-based theme that uses the WP REST API to deliver content.

Anadama was designed to display recipe content in a vintage recipe book style. This niche theme is well-suited to presentation as a single-page app, since it has no comments or widgets. The homepage features a menu and post titles that pop up as recipe cards.

single-recipe

Anadama is a project still in progress, created through the collaborative efforts of developer Kelly Dwan and designer Mel Choyce, authors of popular themes Flounder and Aventurine.

The theme is small project where you can see an example of how React might fit into a WordPress theme. It requires the REST API plugin and WP API Menus. If you want to take it for a spin and experiment for yourself, clone the theme’s GitHub repo to your test install and then run npm and gulp to install and build the JavaScript and CSS files. If you prefer a more traditional blog example, Dwan recommends checking out her Foxhound theme on GitHub.

Would you like to write for WP Tavern? We are always accepting guest posts from the community and are looking for new contributors. Get in touch with us and let's discuss your ideas.

9 Comments


  1. Whoa that theme is pretty cool. It’s amazing how trimmed down it is. I’m going to have to take a shot at doing something react based now.

    Report


  2. Cool to get this example theme! I’m also looking forward to seeing some examples of more intense react-live-page-updates that include something more complex like a text area that turns into a slider area. I’m sure that there are tutorials out there for things like that already – I am excited to see how that will operate.

    Report


  3. This is just perfect timing. I am jut learning React at this moment so this theme will certainly I aspire to do.

    Report


  4. Just saw the video from Rachel Baker yesterday about making JS-based theme with REST-API and now we have a real example! That’s so cool. A new theme trend is coming!

    Report


  5. Iam also learning React in combination with the new Rest API at the moment so thanks a lot for all the input in the last weeks. Checking daily for news regarding that topics. Great to see that there is something new in WordPress land. :)

    Report


  6. Pretty nice theme, especially for using the WP API Menus plugin.

    If you want to study something else, check out my React, React Router and Redux based WP theme called Lexi. It uses the Bootstrap’s blog design.

    Report


      1. I took at look at Lexi yesterday. Very cool.

        Report


  7. I’m curious. Could someone write a post about why you would want to make a theme this way and when?
    What is the benefit of making a SPA using React and WordPress? Why not just go meteor or node+x directly?
    What are potential drawbacks with localization, internationalization, google search engine etc?
    How does this work with plugins that alter page content, login handling, admin bar etc?

    Report

Comments are closed.