Anadama, A React Recipe Theme


The other week I started playing with a React-based theme using the REST API. The idea is a very simple recipe blog – no comments, no widgets, just a list of post titles on the home page and a pop-up card with the recipe content. Designed by Mel Choyce (of course), the inspiration was vintage recipe cards/books. It seemed like a great candidate for a single-page-app style theme.

The theme is called Anadama, and it’s definitely still a work-in-progress. Here’s how it looks so far:

It’s definitely still in flux, but I thought it would be fun to talk about, especially with WCUS this weekend. I’m using gulp and webpack to build the JSX into javascript, and I’m trying out some ES2015 features with babel. For the CSS, I’m using Sass, with some component-specific stylesheets living with the components (all still built into the main CSS file — I’m not using Radium or the like). It’s a very simple theme, so hopefully if you’re new to the idea of React + WordPress, this should be easier to understand.

Want to check it out? The Anadama-React github repo has instructions to set it up yourself, you’ll just need a few plugins: The REST API for the content API, WP-API Menus for the menus endpoint, and (optionally) Jetpack, if you want to see the recipe shortcode in action. The theme will work with any content, but only recipes will populate the sidebar.

Look for me at WCUS if you want to chat about React/API-driven themes, using Jetpack for themes, or themes in general! 🙂

Edited 12/9: If you’re interested in a more traditional blog example, I’ve also added Foxhound to github. I’m working on both, and will write an update in a week or so about the progress on both.

Posted in:

,
Previous:
Next:

Comments

  1. Robby Avatar

    Hey Kelly! Very very cool (love the design, too).

    We just had a discussion come up in our Slack about SPAs, themes, and SEO. What happens when Google hits this theme!? Is it crawl-able?

    1. kelly Avatar
      kelly

      To be honest, I don’t know. I’ve heard that google is smart enough to render the JS on pages, but I also know that people are still worried about having content rendered server-side (which you can do with react & node — I just haven’t, here).

      1. Robby Avatar

        Haha! Yeah, that’s pretty much where our conversation led to, too. Thanks for the answer. 🙂

  2. […] Source: Anadama, A React Recipe Theme […]

  3. […] Anadama, A React Recipe Theme […]

  4. […] mal de choses intéressantes sont sorties dernièrement. Le thème WordPress Anadama créé par la développeuse Kelly Dwan et la designer Mel Choyce me vient à […]

  5. […] WordPress themeing (since that’s a hobby of mine). Last year I posted about a simple theme, Anadama, which used the REST API plugin. With the REST API slated to be released with WordPress 4.7, […]