WP API Starter Theme (BETA VERSION 1.0.0)

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.

Sponsors

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.

Features

• Harness the power of WP API.
• Frontend development workflow with Gulp, BrowserSync and Terser.
• Support for use for Tailwind CSS.

Requirements

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

Theme installation

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 [email protected]:flaubert-dev/wp-api-starter-theme.git

If you don't know if Gulp CLI and Yarn are already installed globally, run the command below:

npm list -g --depth=0

If Gulp CLI and Yarn are not installed globally, run the command:

npm install gulp-cli -g && npm install yarn -g

With Gulp CLI and Yarn already installed, run the command below:

yarn cache clean && yarn install && npx update-browserslist-db@latest

Linux 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.

Theme development

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
});

Dev command

Log in as an Administrator on your WordPress. Use this command to watch at your php, css and js files:

yarn dev

Build command

To 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 build

Theme structure

themes/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.php

Community

Keep track of development and community news.

• Follow me on Linkedin
• Also participate by collaborating with this project
• Sponsors: None, for now...