I have spent the past 4 weeks trying to create a boilerplate for my current and future wordpress projects. A lot has happened during this period: from almost learning PHP to having to start again after accidentally deleting a great chunk of my code. Anyway, why not save every other React developer from suffering a similar ordeal?
First things first, if you’re a React developer, you should be able to code along, and might have a fully functional project within hours. Spoiler alert, I have not worked on the CSS. The site looks uglier than a 90-year-old vitiligo patient. No offence to my brothers and sisters suffering from this horrible disease #VitiligoAwareness.
I chose XAMPP to launch WordPress on my Windows laptop. XAMPP is a widely used open-source software package that provides a local development environment for web applications. It includes a combination of software components commonly used in web development, making it easy to set up a local server environment for testing and development purposes.
After downloading the installer from the provided link, click on it and follow the prompts to launch the application. Click ‘Start’ to start the Apache and MySQL services.
Now head over to the WordPress site to download the appropriate zip file. Extract the file's content to C:\Xampp\htdocs or wherever the htdocs is in your local environment. When you navigate to localhost/wordpress on your browser, Bitnami will ask you to follow a series of steps to get the WordPress up and running locally.
Open your command line (I’m using git on VS Code). Navigate to C:\Xampp\htdocs\wordpress\wp-content\themes. Fork and git clone the repository found here: https://github.com/BDFL669/wp-theme-barebones.git.
First cd into /wp-theme-barebones, navigate to react-src, and npm install the packages. Thereafter, navigate to localhost/wordpress/wp-admin and scroll to the Appearances > Theme pane. You should see the React theme we just git cloned appear in the list. Click to activate and navigate to localhost/wordpress again to see the magic in action.
Btw, for the contact form on the About page to work, please register your recipient email with PostMail, an open source email server that sends all client requests directly to your email. Remember to safely save your token as an environment variable and plug it into the About component.
Suffice it to say, we have now setup WordPress as our CMS platform and React as the frontend. WordPress handles all the data management and content delivery tasks, all you need to do is make the right calls. I’ll publish another article soon to break down the code in case some of us find it challenging. Otherwise, I got most of the code from the Internet, especially Michael Sirano’s three-part series on the same subject – and I am merely his vessel.
JavaScript Devs are some of the toughest people to wear shoes
Top comments (0)