create-wordpress-theme-ts 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Codefront Technologies LLC
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,249 @@
+# Create WP Theme TS
+
+A CLI tool to scaffold a custom WordPress theme powered by React, TypeScript, and Vite.
+
+Build your WordPress theme as a modern React single-page application, then deploy it as a standard WordPress theme zip file.
+
+## Quick Start
+
+```bash
+npx create-wp-theme-ts my-site
+cd my-site
+npm run dev
+```
+
+## Features
+
+- ⚡ **Vite** - Lightning-fast HMR and optimized builds
+- ⚛️ **React 18** - Latest React with concurrent features
+- 📘 **TypeScript** - Full type safety out of the box
+- 💅 **styled-components** - CSS-in-JS styling
+- 🎨 **Font Awesome** - Icon library included
+- 🔧 **ESLint + Prettier** - Code quality tools pre-configured
+- 📦 **WordPress Theme Zip** - Production build outputs a ready-to-deploy theme
+
+## Usage
+
+### Interactive Mode
+
+Simply run without arguments to enter interactive mode:
+
+```bash
+npx create-wp-theme-ts
+```
+
+You'll be prompted for:
+
+- Project name
+- WordPress theme name
+- Author name
+- Project description
+
+### Command Line Arguments
+
+```bash
+npx create-wp-theme-ts <project-name> [options]
+```
+
+**Options:**
+
+- `--skip-install` - Skip automatic npm install
+- `--skip-git` - Skip git repository initialization
+
+**Examples:**
+
+```bash
+# Create with custom name
+npx create-wp-theme-ts my-awesome-theme
+
+# Skip npm install (useful if you want to use yarn/pnpm)
+npx create-wp-theme-ts my-site --skip-install
+
+# Skip both install and git init
+npx create-wp-theme-ts my-site --skip-install --skip-git
+```
+
+## Project Structure
+
+After scaffolding, your project will have this structure:
+
+```
+my-site/
+├── php/                    # WordPress PHP files
+│   ├── functions.php       # Theme functions
+│   └── index.php           # Main WordPress template
+├── public/                 # Static assets
+│   ├── images/             # Image files
+│   └── style.css           # WordPress theme stylesheet
+├── src/                    # React source code
+│   ├── components/         # React components
+│   │   └── Layout.tsx      # Main layout component
+│   ├── pages/              # Page components
+│   │   ├── Home.tsx        # Home page
+│   │   ├── About.tsx       # About page
+│   │   └── NotFound.tsx    # 404 page
+│   ├── styles/             # CSS files
+│   │   └── global.css      # Global styles
+│   ├── App.tsx             # Main App component
+│   ├── index.tsx           # Entry point
+│   └── vite-env.d.ts       # Vite type definitions
+├── .eslintrc.json          # ESLint configuration
+├── .gitignore              # Git ignore rules
+├── .prettierrc             # Prettier configuration
+├── index.html              # HTML template
+├── package.json            # Project dependencies
+├── tsconfig.json           # TypeScript configuration
+└── vite.config.ts          # Vite configuration
+```
+
+## Available Scripts
+
+In your generated project, you can run:
+
+### `npm run dev`
+
+Starts the development server at [http://localhost:8080](http://localhost:8080).
+
+Features hot module replacement for instant feedback while developing.
+
+### `npm run build`
+
+Creates an unminified build in the `dist/` folder.
+
+### `npm run build:dev`
+
+Creates a development build with source maps.
+
+### `npm run build:prod`
+
+Creates an optimized production build and generates `wordpress-custom-theme.zip` in the `dist/` folder.
+
+### `npm run preview`
+
+Preview the production build locally before deploying.
+
+## Deploying to WordPress
+
+1. Run the production build:
+
+   ```bash
+   npm run build:prod
+   ```
+
+2. Locate the generated zip file:
+
+   ```
+   dist/wordpress-custom-theme.zip
+   ```
+
+3. In your WordPress admin panel:
+   - Go to **Appearance → Themes → Add New → Upload Theme**
+   - Upload `wordpress-custom-theme.zip`
+   - Click **Install Now**
+   - Click **Activate**
+
+## Customization
+
+### Adding New Pages
+
+1. Create a new component in `src/pages/`:
+
+   ```tsx
+   // src/pages/Contact.tsx
+   function Contact() {
+     return <div>Contact Page</div>;
+   }
+   export default Contact;
+   ```
+
+2. Add the route in `src/App.tsx`:
+
+   ```tsx
+   import Contact from './pages/Contact';
+
+   // Inside Routes:
+   <Route path="contact" element={<Contact />} />;
+   ```
+
+3. Add navigation link in `src/components/Layout.tsx`:
+   ```tsx
+   <NavLink to="/contact">Contact</NavLink>
+   ```
+
+### Styling
+
+This template uses [styled-components](https://styled-components.com/) for styling:
+
+```tsx
+import styled from 'styled-components';
+
+const Button = styled.button`
+  background: #4a9eff;
+  color: white;
+  padding: 0.5rem 1rem;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+
+  &:hover {
+    background: #3a8eef;
+  }
+`;
+```
+
+### Environment Variables
+
+Create a `.env` file in your project root:
+
+```env
+VITE_API_URL=https://api.example.com
+VITE_APP_TITLE=My Site
+```
+
+Access them in your code:
+
+```tsx
+const apiUrl = import.meta.env.VITE_API_URL;
+```
+
+**Note:** Only variables prefixed with `VITE_` are exposed to your code.
+
+## WordPress Theme Customization
+
+### Theme Header
+
+Edit `public/style.css` to update the WordPress theme metadata:
+
+```css
+/*
+Theme Name: Your Theme Name
+Author: Your Name
+Author URI: https://yoursite.com
+Description: Your theme description
+Version: 1.0.0
+License: MIT
+*/
+```
+
+### Adding WordPress Features
+
+Edit `php/functions.php` to add WordPress functionality:
+
+```php
+// Register a navigation menu
+register_nav_menus(array(
+    'primary' => __('Primary Menu'),
+));
+
+// Add custom post type support
+// Add widget areas
+// etc.
+```
+
+## Contributing
+
+Contributions are welcome! Please feel free to submit a Pull Request.
+
+## License
+
+MIT

package/bin/index.js

@@ -0,0 +1,179 @@
+#!/usr/bin/env node
+
+import { program } from 'commander';
+import inquirer from 'inquirer';
+import chalk from 'chalk';
+import ora from 'ora';
+import fs from 'fs-extra';
+import path from 'path';
+import { fileURLToPath } from 'url';
+import { execSync } from 'child_process';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+const TEMPLATE_DIR = path.join(__dirname, '..', 'template');
+
+program
+  .name('create-wp-theme-ts')
+  .description('Create a new WordPress theme powered by React, TypeScript, and Vite')
+  .version('1.0.0')
+  .argument('[project-name]', 'Name of the project')
+  .option('--skip-install', 'Skip npm install')
+  .option('--skip-git', 'Skip git initialization')
+  .action(async (projectName, options) => {
+    console.log(chalk.blue.bold('\n🚀 Create WP React Site\n'));
+
+    // If no project name provided, prompt for it
+    if (!projectName) {
+      const answers = await inquirer.prompt([
+        {
+          type: 'input',
+          name: 'projectName',
+          message: 'What is your project name?',
+          default: 'my-wp-site',
+          validate: (input) => {
+            if (/^[a-zA-Z0-9-_]+$/.test(input)) return true;
+            return 'Project name may only include letters, numbers, dashes, and underscores.';
+          },
+        },
+      ]);
+      projectName = answers.projectName;
+    }
+
+    // Gather additional project info
+    const projectInfo = await inquirer.prompt([
+      {
+        type: 'input',
+        name: 'themeName',
+        message: 'What is your WordPress theme name?',
+        default: projectName
+          .split('-')
+          .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+          .join(' '),
+      },
+      {
+        type: 'input',
+        name: 'author',
+        message: 'Author name:',
+        default: '',
+      },
+      {
+        type: 'input',
+        name: 'description',
+        message: 'Project description:',
+        default: 'A custom WordPress theme built with React and Vite',
+      },
+    ]);
+
+    const targetDir = path.resolve(process.cwd(), projectName);
+
+    // Check if directory already exists
+    if (fs.existsSync(targetDir)) {
+      const { overwrite } = await inquirer.prompt([
+        {
+          type: 'confirm',
+          name: 'overwrite',
+          message: `Directory ${projectName} already exists. Overwrite?`,
+          default: false,
+        },
+      ]);
+
+      if (!overwrite) {
+        console.log(chalk.yellow('\n⚠️  Operation cancelled.\n'));
+        process.exit(0);
+      }
+
+      await fs.remove(targetDir);
+    }
+
+    // Copy template files
+    const copySpinner = ora('Creating project structure...').start();
+    try {
+      await fs.copy(TEMPLATE_DIR, targetDir);
+      copySpinner.succeed('Project structure created');
+    } catch (error) {
+      copySpinner.fail('Failed to create project structure');
+      console.error(chalk.red(error.message));
+      process.exit(1);
+    }
+
+    // Update package.json with project info
+    const updateSpinner = ora('Customizing project files...').start();
+    try {
+      const packageJsonPath = path.join(targetDir, 'package.json');
+      const packageJson = await fs.readJson(packageJsonPath);
+      packageJson.name = projectName;
+      packageJson.description = projectInfo.description;
+      packageJson.author = projectInfo.author;
+      await fs.writeJson(packageJsonPath, packageJson, { spaces: 2 });
+
+      // Update style.css with theme info
+      const styleCssPath = path.join(targetDir, 'public', 'style.css');
+      if (await fs.pathExists(styleCssPath)) {
+        let styleContent = await fs.readFile(styleCssPath, 'utf-8');
+        styleContent = styleContent
+          .replace(/Theme Name:.*/, `Theme Name: ${projectInfo.themeName}`)
+          .replace(/Author:.*/, `Author: ${projectInfo.author}`)
+          .replace(/Description:.*/, `Description: ${projectInfo.description}`);
+        await fs.writeFile(styleCssPath, styleContent);
+      }
+
+      // Update index.html title
+      const indexHtmlPath = path.join(targetDir, 'index.html');
+      if (await fs.pathExists(indexHtmlPath)) {
+        let htmlContent = await fs.readFile(indexHtmlPath, 'utf-8');
+        htmlContent = htmlContent.replace(
+          /<title>.*<\/title>/,
+          `<title>${projectInfo.themeName}</title>`
+        );
+        htmlContent = htmlContent.replace(
+          /<meta property="og:title" content=".*" \/>/,
+          `<meta property="og:title" content="${projectInfo.themeName}" />`
+        );
+        await fs.writeFile(indexHtmlPath, htmlContent);
+      }
+
+      updateSpinner.succeed('Project files customized');
+    } catch (error) {
+      updateSpinner.fail('Failed to customize project files');
+      console.error(chalk.red(error.message));
+    }
+
+    // Initialize git repository
+    if (!options.skipGit) {
+      const gitSpinner = ora('Initializing git repository...').start();
+      try {
+        execSync('git init', { cwd: targetDir, stdio: 'ignore' });
+        gitSpinner.succeed('Git repository initialized');
+      } catch (error) {
+        gitSpinner.fail('Failed to initialize git repository');
+      }
+    }
+
+    // Install dependencies
+    if (!options.skipInstall) {
+      const installSpinner = ora('Installing dependencies (this may take a few minutes)...').start();
+      try {
+        execSync('npm install', { cwd: targetDir, stdio: 'ignore' });
+        installSpinner.succeed('Dependencies installed');
+      } catch (error) {
+        installSpinner.fail('Failed to install dependencies');
+        console.log(chalk.yellow('\nYou can install dependencies manually by running: npm install\n'));
+      }
+    }
+
+    // Success message
+    console.log(chalk.green.bold('\n✅ Project created successfully!\n'));
+    console.log(chalk.white('Next steps:\n'));
+    console.log(chalk.cyan(`  cd ${projectName}`));
+    if (options.skipInstall) {
+      console.log(chalk.cyan('  npm install'));
+    }
+    console.log(chalk.cyan('  npm run dev         # Start development server'));
+    console.log(chalk.cyan('  npm run build:prod  # Build for production\n'));
+    console.log(chalk.gray('The production build creates a WordPress theme zip file in the dist/ folder.'));
+    console.log(chalk.gray('Upload it via WordPress Admin > Appearance > Themes > Add New > Upload Theme\n'));
+  });
+
+program.parse();

package/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "create-wordpress-theme-ts",
+  "version": "1.0.0",
+  "description": "CLI tool to scaffold a WordPress theme powered by React, TypeScript, and Vite",
+  "type": "module",
+  "main": "index.js",
+  "bin": {
+    "create-wordpress-theme-ts": "./bin/index.js"
+  },
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [
+    "wordpress",
+    "react",
+    "vite",
+    "typescript",
+    "theme",
+    "scaffold",
+    "generator",
+    "cli"
+  ],
+  "author": "Codefront Technologies LLC",
+  "license": "MIT",
+  "files": [
+    "bin",
+    "template"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/codefront-technologies/create-wp-theme-ts"
+  },
+  "engines": {
+    "node": ">=16.0.0"
+  },
+  "dependencies": {
+    "chalk": "^5.3.0",
+    "commander": "^12.0.0",
+    "fs-extra": "^11.2.0",
+    "inquirer": "^9.2.12",
+    "ora": "^8.0.1"
+  }
+}

package/template/.eslintignore

@@ -0,0 +1,2 @@
+node_modules/
+dist/

package/template/.eslintrc.json

@@ -0,0 +1,34 @@
+{
+  "env": {
+    "browser": true,
+    "es2021": true,
+    "node": true
+  },
+  "extends": [
+    "eslint:recommended",
+    "plugin:react/recommended",
+    "plugin:react-hooks/recommended",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:prettier/recommended"
+  ],
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "ecmaFeatures": {
+      "jsx": true
+    },
+    "ecmaVersion": "latest",
+    "sourceType": "module"
+  },
+  "plugins": ["react", "@typescript-eslint", "prettier"],
+  "rules": {
+    "react/react-in-jsx-scope": "off",
+    "react/no-unescaped-entities": "off",
+    "prettier/prettier": "error",
+    "@typescript-eslint/no-unused-vars": ["warn", { "argsIgnorePattern": "^_" }]
+  },
+  "settings": {
+    "react": {
+      "version": "detect"
+    }
+  }
+}

package/template/.prettierrc

@@ -0,0 +1,7 @@
+{
+  "semi": true,
+  "singleQuote": true,
+  "tabWidth": 2,
+  "trailingComma": "es5",
+  "printWidth": 100
+}

package/template/index.html

@@ -0,0 +1,21 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>My WordPress Site</title>
+    <meta name="description" content="A custom WordPress theme built with React and Vite" />
+    <meta name="author" content="" />
+    <meta property="og:title" content="My WordPress Site" />
+    <meta property="og:description" content="A custom WordPress theme built with React and Vite" />
+    <meta property="og:type" content="website" />
+    <link rel="icon" href="/images/favicon.ico" />
+  </head>
+
+  <body>
+    <main>
+      <div id="root"></div>
+    </main>
+    <script type="module" src="/src/index.tsx"></script>
+  </body>
+</html>