Lexi

Overview

Lexi is an experimental WordPress theme built with React, utilizing new technologies such as ES6, Webpack, React Router, and Redux. It is designed as a learning tool and showcases how to develop a WordPress theme using cutting-edge methods. While the project may be outdated due to lack of maintenance, it serves as a good training exercise for developers.

Features

• Built with React instead of PHP
• Utilizes React Router for routing and Redux for state management
• Uses WP REST API to retrieve data from the WordPress backend
• Implements Webpack for building and packaging
• Design based on Bootstrap’s blog design

Installation

1. Set up a WordPress installation with WP REST API v2 and change the permalink structure to “Day and name”.
2. Clone the Lexi repo into the wp-content/themes directory and run npm install inside it.
3. Create sample posts, including more than 10 to see pagination in action. Also create an “About” page with the slug “about” to add it to the navigation menu.
4. Create a new file src/wp-url.js and paste the code provided in the article, adjusting it to match your WordPress URL address.
5. Run npm start in the theme’s main directory to start the Webpack dev server on localhost:3000 and bundle the app into the dist/ folder. If port 3000 is already in use, modify it in the server.js file.

Summary

Lexi is an experimental WordPress theme that utilizes React, React Router, Redux, and WP REST API. It serves as a learning tool for developers interested in building a WordPress theme using modern technologies. The theme’s features include React-based development, routing with React Router, state management with Redux, and data retrieval from the WordPress backend using WP REST API. While the project may be outdated, it can still be used as a training exercise and developers are welcome to contribute to it as an open-source project.