WordPress starter theme with WP API components and templates, Tailwind CSS, and a modern development workflow. This WordPress theme is interesting for local testing, studies and code improvements. Please do not use this theme in production, use these themes for student purposes.
WP API Starter Theme is an open source project and completely free to use.
However, the amount of effort needed to maintain and develop new features and products within the ecosystem is not sustainable without proper financial backing. If you have the capability, please consider sponsoring Flaubert Dev.
- Harness the power of WP API.
- Frontend development workflow with Gulp, BrowserSync and Terser.
- Support for use for Tailwind CSS.
Make sure all dependencies have been installed before moving on:
- Git Bash (Windows Users)
- WordPress >= v6.0.0
- PHP >= v8.2.0
- Composer >= v2.7.1
- Tailwind CSS >= v3.3.3
- Node.js >= v20.11.1
- Yarn >= v1.22.22
- Gulp CLI >= v3.0.0
- BrowserSync >= v3.0.2
- Readable Stream >= v4.5.2
- Terser >= v5.30.3
- Advanced Custom Fields (ACF) >= v6.2.9
Fork or download this WordPress theme in your themes folder. If you download by git clone, don't forget to remove the .git folder:
git clone git@github.com:flaubert-dev/wp-api-starter-theme.gitIf you don't know if Gulp CLI and Yarn are already installed globally, run the command below:
npm list -g --depth=0If Gulp CLI and Yarn are not installed globally, run the command:
npm install gulp-cli -g && npm install yarn -gWith Gulp CLI and Yarn already installed, run the command below:
yarn cache clean && yarn install && npx update-browserslist-db@latestLinux and MacOs Users
-
If you are using Linux, remove tailwindcss.exe and download the Linux version (Tailwind CLI).
-
Don't forget to rename it from tailwindcss-linux-x64 to tailwindcss, if in doubt, check out more information.
-
If you are using MacOS, remove tailwindcss.exe and download the MacOs version (Tailwind CLI).
-
Don't forget to rename it from tailwindcss-macos-x64 to tailwindcss, if in doubt, check out more information.
In the gulpfile.js file, modify the path of your development environment:
browserSync.init({
proxy: 'http://localhost/success', // Change to your local development URL
open: true // true will automatically open the browser on port 3000
});Log in as an Administrator on your WordPress. Use this command to watch at your php, css and js files:
yarn devTo build the project use the command below. If you are not logged into WordPress, you will see that the css and js files have been minified:
yarn buildthemes/wp-api-starter-theme/
├── app/
│ ├── AcfJson/ # -> https://www.advancedcustomfields.com/resources/local-json/
│ └── Templates/
├── config/
├── resources/
│ ├── fonts/
│ ├── images/
│ ├── scripts/
│ └── styles/
├── templates/
├── vendor/
├── .gitattributes
├── .gitignore
├── 404.php # -> Wait... News will come in this file
├── archive.php
├── category.php
├── composer.json
├── footer.php
├── functions.php
├── gulpfile.js
├── header.php
├── index.php
├── LICENSE
├── package.json
├── page.php # -> Wait... News will come in this file
├── README.md
├── readme.txt
├── screenshot.png
├── search.php # -> Wait... News will come in this file
├── single.php # -> Wait... News will come in this file
├── style.css
├── style.min.css
├── tailwind.config.js
├── tailwindcss.exe # -> https://github.com/tailwindlabs/tailwindcss/releases/tag/v3.3.3
├── template-wp-api-example-using-JS.php
└── template-wp-query-example-using-PHP.phpKeep track of development and community news.
- Follow me on Linkedin
- Also participate by collaborating with this project
- Sponsors: None, for now...