create-wp-custom-theme 1.0.0

package/bin/create-wp-theme.js

@@ -0,0 +1,66 @@
+#!/usr/bin/env node
+
+import { Command } from 'commander';
+import inquirer from 'inquirer';
+import chalk from 'chalk';
+import path from 'path';
+import fs from 'fs-extra';
+import { run } from '../src/index.js';
+import { fileURLToPath } from 'url';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+// Read package.json for version
+const pkgPath = path.resolve(__dirname, '../package.json');
+const pkg = JSON.parse(await fs.readFile(pkgPath, 'utf8'));
+
+const program = new Command();
+
+program
+  .name('create-wp-theme')
+  .description('Scaffold a production-ready custom WordPress theme')
+  .version(pkg.version)
+  .argument('<theme-name>', 'Name of the WordPress theme (directory name)')
+  .option('--woocommerce', 'Include WooCommerce setup hooks')
+  .option('--tailwind', 'Include Tailwind CSS + Vite configuration')
+  .action(async (themeName, options) => {
+    console.log(chalk.bold.cyan('\n🚀 Welcome to create-wp-theme!\n'));
+
+    const prompts = [
+      {
+        type: 'input',
+        name: 'author',
+        message: 'Author Name:',
+        default: 'Your Name'
+      },
+      {
+        type: 'input',
+        name: 'description',
+        message: 'Theme Description:',
+        default: 'A custom WordPress theme.'
+      },
+      {
+        type: 'confirm',
+        name: 'git',
+        message: 'Initialize a Git repository?',
+        default: true
+      }
+    ];
+
+    const answers = await inquirer.prompt(prompts);
+
+    const config = {
+      themeName,
+      textDomain: themeName.toLowerCase().replace(/[^a-z0-9]/g, '-'),
+      author: answers.author,
+      description: answers.description,
+      git: answers.git,
+      woocommerce: options.woocommerce || false,
+      tailwind: options.tailwind || false,
+    };
+
+    await run(config);
+  });
+
+program.parse(process.argv);

package/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "create-wp-custom-theme",
+  "version": "1.0.0",
+  "description": "A CLI tool to scaffold production-ready custom WordPress themes",
+  "main": "src/index.js",
+  "type": "module",
+  "bin": {
+    "create-wp-theme": "./bin/create-wp-theme.js"
+  },
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [
+    "wordpress",
+    "theme",
+    "scaffold",
+    "generator",
+    "cli"
+  ],
+  "author": "",
+  "license": "MIT",
+  "dependencies": {
+    "chalk": "^5.6.2",
+    "commander": "^14.0.3",
+    "fs-extra": "^11.3.4",
+    "inquirer": "^13.3.2"
+  }
+}

package/src/git.js

@@ -0,0 +1,22 @@
+import { execSync } from 'child_process';
+import fs from 'fs-extra';
+import path from 'path';
+import { logger } from './logger.js';
+
+export async function initGit(targetPath) {
+  try {
+    execSync('git init', { cwd: targetPath, stdio: 'ignore' });
+    
+    // Create a basic .gitignore
+    const gitignoreContent = `
+node_modules/
+.DS_Store
+dist/
+.env
+`;
+    await fs.writeFile(path.join(targetPath, '.gitignore'), gitignoreContent.trim());
+    logger.success('Initialized a git repository.');
+  } catch (error) {
+    logger.warn('Failed to initialize git repository.');
+  }
+}

package/src/index.js

@@ -0,0 +1,52 @@
+import path from 'path';
+import { createThemeDir, copyTemplate, replacePlaceholders } from './scaffold.js';
+import { setupWooCommerce } from './woocommerce.js';
+import { setupTailwind } from './tailwind.js';
+import { initGit } from './git.js';
+import { logger } from './logger.js';
+import chalk from 'chalk';
+
+export async function run(config) {
+  const targetPath = path.join(process.cwd(), config.themeName);
+
+  try {
+    // 1. Create directory
+    await createThemeDir(targetPath);
+
+    // 2. Copy base templates
+    await copyTemplate(targetPath);
+
+    // 3. Replace Placeholders
+    await replacePlaceholders(targetPath, config);
+
+    // 4. Optional features
+    if (config.woocommerce) {
+      await setupWooCommerce(targetPath, config.textDomain);
+    }
+
+    if (config.tailwind) {
+      await setupTailwind(targetPath, config.themeName);
+    }
+
+    if (config.git) {
+      await initGit(targetPath);
+    }
+
+    // 5. Summary
+    console.log('');
+    logger.success(chalk.bold('Theme scaffolding completed successfully!'));
+    console.log(`\nNext steps:\n`);
+    console.log(chalk.cyan(`  cd ${config.themeName}`));
+
+    if (config.tailwind) {
+      console.log(chalk.cyan(`  npm install`));
+      console.log(chalk.cyan(`  npm run dev`));
+    }
+    
+    console.log(`\nHappy coding! 🚀\n`);
+    
+  } catch (error) {
+    logger.error(error.message);
+    process.exit(1);
+  }
+}

package/src/logger.js

@@ -0,0 +1,9 @@
+import chalk from 'chalk';
+
+export const logger = {
+  info: (msg) => console.log(chalk.cyan(msg)),
+  success: (msg) => console.log(chalk.green('✔ ' + msg)),
+  error: (msg) => console.log(chalk.red('✖ ' + msg)),
+  warn: (msg) => console.log(chalk.yellow('⚠ ' + msg)),
+  plain: (msg) => console.log(msg),
+};

package/src/scaffold.js

@@ -0,0 +1,64 @@
+import fs from 'fs-extra';
+import path from 'path';
+import { fileURLToPath } from 'url';
+import { logger } from './logger.js';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+const templateDir = path.resolve(__dirname, '../template');
+
+export async function createThemeDir(targetPath) {
+  if (await fs.pathExists(targetPath)) {
+    throw new Error(`Folder ${targetPath} already exists. Please choose a different name or delete the folder.`);
+  }
+  await fs.ensureDir(targetPath);
+  logger.success(`Created directory ${targetPath}`);
+}
+
+export async function copyTemplate(targetPath) {
+  logger.info('Copying theme template files...');
+  await fs.copy(templateDir, targetPath);
+  logger.success('Template files copied.');
+}
+
+async function walkDir(dir) {
+  let results = [];
+  const list = await fs.readdir(dir);
+  for (let file of list) {
+    file = path.join(dir, file);
+    const stat = await fs.stat(file);
+    if (stat && stat.isDirectory()) {
+      results = results.concat(await walkDir(file));
+    } else {
+      results.push(file);
+    }
+  }
+  return results;
+}
+
+export async function replacePlaceholders(targetPath, vars) {
+  logger.info('Replacing placeholders in template files...');
+  const files = await walkDir(targetPath);
+  
+  for (const file of files) {
+    // Only process text-based files
+    const ext = path.extname(file);
+    if (['.png', '.jpg', '.jpeg', '.gif', '.ico'].includes(ext)) {
+      continue;
+    }
+
+    try {
+      let content = await fs.readFile(file, 'utf8');
+      
+      content = content.replace(/__THEME_NAME__/g, vars.themeName);
+      content = content.replace(/__AUTHOR__/g, vars.author);
+      content = content.replace(/__DESCRIPTION__/g, vars.description);
+      content = content.replace(/__TEXT_DOMAIN__/g, vars.textDomain);
+      
+      await fs.writeFile(file, content, 'utf8');
+    } catch (e) {
+      // ignore read errors for binaries that might have slipped through
+    }
+  }
+  logger.success('Placeholders replaced dynamically.');
+}

package/src/tailwind.js

@@ -0,0 +1,83 @@
+import fs from 'fs-extra';
+import path from 'path';
+import { logger } from './logger.js';
+
+export async function setupTailwind(targetPath, themeName) {
+  logger.info('Setting up Tailwind CSS and Vite...');
+
+  // 1. Create package.json
+  const pkgContent = {
+    "name": themeName.toLowerCase().replace(/[^a-z0-9]/g, '-'),
+    "version": "1.0.0",
+    "scripts": {
+      "dev": "vite",
+      "build": "vite build"
+    },
+    "devDependencies": {
+      "autoprefixer": "^10.4.16",
+      "postcss": "^8.4.31",
+      "tailwindcss": "^3.3.5",
+      "vite": "^5.0.0"
+    }
+  };
+  await fs.writeFile(path.join(targetPath, 'package.json'), JSON.stringify(pkgContent, null, 2));
+
+  // 2. Create tailwind.config.js
+  const twContent = `/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    './*.php',
+    './templates/**/*.php',
+    './inc/**/*.php',
+    './template-parts/**/*.php',
+    './assets/js/**/*.js'
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}
+`;
+  await fs.writeFile(path.join(targetPath, 'tailwind.config.js'), twContent);
+
+  // 3. Create postcss.config.js
+  const postcssContent = `module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  }
+}
+`;
+  await fs.writeFile(path.join(targetPath, 'postcss.config.js'), postcssContent);
+
+  // 4. Create vite.config.js
+  const viteContent = `import { defineConfig } from 'vite';
+
+export default defineConfig({
+  build: {
+    rollupOptions: {
+      input: {
+        main: './assets/css/main.css',
+        script: './assets/js/main.js'
+      },
+      output: {
+        dir: 'dist',
+        entryFileNames: '[name].js',
+        assetFileNames: '[name].[ext]'
+      }
+    }
+  }
+});
+`;
+  await fs.writeFile(path.join(targetPath, 'vite.config.js'), viteContent);
+
+  // 5. Update main.css with Tailwind directives
+  const cssPath = path.join(targetPath, 'assets', 'css', 'main.css');
+  if (await fs.pathExists(cssPath)) {
+    const twCSS = `@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n`;
+    const existingCss = await fs.readFile(cssPath, 'utf8');
+    await fs.writeFile(cssPath, twCSS + existingCss, 'utf8');
+  }
+
+  logger.success('Tailwind CSS and Vite configuration added.');
+}

package/src/woocommerce.js

@@ -0,0 +1,50 @@
+import fs from 'fs-extra';
+import path from 'path';
+import { logger } from './logger.js';
+
+export async function setupWooCommerce(targetPath, textDomain) {
+  logger.info('Setting up WooCommerce hooks...');
+
+  // 1. Create inc/woocommerce.php
+  const wooCommercePath = path.join(targetPath, 'inc', 'woocommerce.php');
+  const wooContent = `<?php
+/**
+ * WooCommerce setup and hooks
+ *
+ * @package \${textDomain}
+ */
+
+function \${textDomain}_woocommerce_setup() {
+	add_theme_support(
+		'woocommerce',
+		array(
+			'thumbnail_image_width' => 150,
+			'single_image_width'    => 300,
+			'product_grid'          => array(
+				'default_rows'    => 3,
+				'min_rows'        => 1,
+				'default_columns' => 4,
+				'min_columns'     => 1,
+				'max_columns'     => 6,
+			),
+		)
+	);
+	add_theme_support( 'wc-product-gallery-zoom' );
+	add_theme_support( 'wc-product-gallery-lightbox' );
+	add_theme_support( 'wc-product-gallery-slider' );
+}
+add_action( 'after_setup_theme', '\${textDomain}_woocommerce_setup' );
+`.replace(/\$\{textDomain\}/g, textDomain);
+
+  await fs.writeFile(wooCommercePath, wooContent, 'utf8');
+
+  // 2. Add require line to functions.php
+  const functionsPath = path.join(targetPath, 'functions.php');
+  if (await fs.pathExists(functionsPath)) {
+    let functionsContent = await fs.readFile(functionsPath, 'utf8');
+    functionsContent += `\n// Load WooCommerce compatibility file.\nrequire_once get_template_directory() . '/inc/woocommerce.php';\n`;
+    await fs.writeFile(functionsPath, functionsContent, 'utf8');
+  }
+
+  logger.success('WooCommerce hooks added.');
+}

package/template/404.php

@@ -0,0 +1,25 @@
+<?php
+/**
+ * The template for displaying 404 pages (not found)
+ *
+ * @package __THEME_NAME__
+ */
+
+get_header();
+?>
+
+<main id="primary" class="site-main">
+	<section class="error-404 not-found">
+		<header class="page-header">
+			<h1 class="page-title"><?php esc_html_e( 'Oops! That page can&rsquo;t be found.', '__TEXT_DOMAIN__' ); ?></h1>
+		</header><!-- .page-header -->
+
+		<div class="page-content">
+			<p><?php esc_html_e( 'It looks like nothing was found at this location. Maybe try a search?', '__TEXT_DOMAIN__' ); ?></p>
+			<?php get_search_form(); ?>
+		</div><!-- .page-content -->
+	</section><!-- .error-404 -->
+</main><!-- #primary -->
+
+<?php
+get_footer();

package/template/assets/css/main.css

@@ -0,0 +1,28 @@
+/*
+ * Base CSS File
+ */
+
+:root {
+	--primary-color: #0073aa;
+}
+
+body {
+	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+	margin: 0;
+	padding: 0;
+	color: #333;
+}
+
+a {
+	color: var(--primary-color);
+	text-decoration: none;
+}
+
+a:hover {
+	text-decoration: underline;
+}
+
+img {
+	max-width: 100%;
+	height: auto;
+}

package/template/assets/js/main.js

@@ -0,0 +1,7 @@
+/**
+ * Main Theme JavaScript
+ */
+
+document.addEventListener('DOMContentLoaded', () => {
+	console.log('__THEME_NAME__ theme JS loaded!');
+});

package/template/footer.php

@@ -0,0 +1,28 @@
+<?php
+/**
+ * The template for displaying the footer
+ *
+ * @package __THEME_NAME__
+ */
+
+?>
+	<footer id="colophon" class="site-footer">
+		<div class="site-info">
+			<a href="<?php echo esc_url( __( 'https://wordpress.org/', '__TEXT_DOMAIN__' ) ); ?>">
+				<?php
+				/* translators: %s: CMS name, i.e. WordPress. */
+				printf( esc_html__( 'Proudly powered by %s', '__TEXT_DOMAIN__' ), 'WordPress' );
+				?>
+			</a>
+			<span class="sep"> | </span>
+			<?php
+			/* translators: 1: Theme name, 2: Theme author. */
+			printf( esc_html__( 'Theme: %1$s by %2$s.', '__TEXT_DOMAIN__' ), '__THEME_NAME__', '<a href="__AUTHOR_URI__">__AUTHOR__</a>' );
+			?>
+		</div><!-- .site-info -->
+	</footer><!-- #colophon -->
+</div><!-- #page -->
+
+<?php wp_footer(); ?>
+</body>
+</html>

package/template/functions.php

@@ -0,0 +1,14 @@
+<?php
+/**
+ * Theme functions and definitions
+ *
+ * @package __THEME_NAME__
+ */
+
+if ( ! defined( 'ABSPATH' ) ) {
+	exit; // Exit if accessed directly.
+}
+
+// Include required setup files
+require_once get_template_directory() . '/inc/setup.php';
+require_once get_template_directory() . '/inc/enqueue.php';

package/template/header.php

@@ -0,0 +1,47 @@
+<?php
+/**
+ * The header for our theme
+ *
+ * @package __THEME_NAME__
+ */
+?>
+<!doctype html>
+<html <?php language_attributes(); ?>>
+<head>
+	<meta charset="<?php bloginfo( 'charset' ); ?>">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<link rel="profile" href="https://gmpg.org/xfn/11">
+
+	<?php wp_head(); ?>
+</head>
+
+<body <?php body_class(); ?>>
+<?php wp_body_open(); ?>
+<div id="page" class="site">
+	<header id="masthead" class="site-header">
+		<div class="site-branding">
+			<?php
+			if ( has_custom_logo() ) :
+				the_custom_logo();
+			else :
+				?>
+				<h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
+				<?php
+				$theme_description = get_bloginfo( 'description', 'display' );
+				if ( $theme_description || is_customize_preview() ) :
+					?>
+					<p class="site-description"><?php echo $theme_description; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?></p>
+				<?php endif;
+			endif;
+			?>
+		</div><!-- .site-branding -->
+
+		<nav id="site-navigation" class="main-navigation">
+			<?php
+			wp_nav_menu( array(
+				'theme_location' => 'menu-1',
+				'menu_id'        => 'primary-menu',
+			) );
+			?>
+		</nav><!-- #site-navigation -->
+	</header><!-- #masthead -->

package/template/inc/enqueue.php

@@ -0,0 +1,22 @@
+<?php
+/**
+ * Enqueue scripts and styles
+ *
+ * @package __THEME_NAME__
+ */
+
+function __TEXT_DOMAIN___scripts() {
+	// Enqueue main stylesheet.
+	wp_enqueue_style( '__TEXT_DOMAIN___style', get_stylesheet_uri(), array(), '1.0.0' );
+
+	// Enqueue base CSS.
+	wp_enqueue_style( '__TEXT_DOMAIN___main-style', get_template_directory_uri() . '/assets/css/main.css', array(), '1.0.0' );
+
+	// Enqueue main JavaScript.
+	wp_enqueue_script( '__TEXT_DOMAIN___main-script', get_template_directory_uri() . '/assets/js/main.js', array(), '1.0.0', true );
+
+	if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
+		wp_enqueue_script( 'comment-reply' );
+	}
+}
+add_action( 'wp_enqueue_scripts', '__TEXT_DOMAIN___scripts' );

package/template/inc/setup.php

@@ -0,0 +1,44 @@
+<?php
+/**
+ * Theme setup functions
+ *
+ * @package __THEME_NAME__
+ */
+
+if ( ! function_exists( '__TEXT_DOMAIN___setup' ) ) :
+	function __TEXT_DOMAIN___setup() {
+		// Add default posts and comments RSS feed links to head.
+		add_theme_support( 'automatic-feed-links' );
+
+		// Let WordPress manage the document title.
+		add_theme_support( 'title-tag' );
+
+		// Enable support for Post Thumbnails on posts and pages.
+		add_theme_support( 'post-thumbnails' );
+
+		// This theme uses wp_nav_menu() in one location.
+		register_nav_menus(
+			array(
+				'menu-1' => esc_html__( 'Primary Menu', '__TEXT_DOMAIN__' ),
+			)
+		);
+
+		// Switch default core markup for search form, comment form, and comments to output valid HTML5.
+		add_theme_support(
+			'html5',
+			array(
+				'search-form',
+				'comment-form',
+				'comment-list',
+				'gallery',
+				'caption',
+				'style',
+				'script',
+			)
+		);
+
+		// Add theme support for selective refresh for widgets.
+		add_theme_support( 'customize-selective-refresh-widgets' );
+	}
+endif;
+add_action( 'after_setup_theme', '__TEXT_DOMAIN___setup' );

package/template/index.php

@@ -0,0 +1,31 @@
+<?php
+/**
+ * The main template file
+ *
+ * @package __THEME_NAME__
+ */
+
+get_header();
+?>
+
+<main id="primary" class="site-main">
+	<?php
+	if ( have_posts() ) :
+		while ( have_posts() ) :
+			the_post();
+			// Include the Post-Format-specific template for the content.
+			// You can create a template part for this like template-parts/content.php
+			the_title( '<h1 class="entry-title">', '</h1>' );
+			the_content();
+		endwhile;
+
+		the_posts_navigation();
+
+	else :
+		echo '<p>' . esc_html__( 'No content found', '__TEXT_DOMAIN__' ) . '</p>';
+	endif;
+	?>
+</main><!-- #primary -->
+
+<?php
+get_footer();

package/template/page.php

@@ -0,0 +1,41 @@
+<?php
+/**
+ * The template for displaying all single pages
+ *
+ * @package __THEME_NAME__
+ */
+
+get_header();
+?>
+
+<main id="primary" class="site-main">
+	<?php
+	while ( have_posts() ) :
+		the_post();
+		?>
+		<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
+			<header class="entry-header">
+				<?php the_title( '<h1 class="entry-title">', '</h1>' ); ?>
+			</header><!-- .entry-header -->
+
+			<div class="entry-content">
+				<?php
+				the_content();
+				wp_link_pages( array(
+					'before' => '<div class="page-links">' . esc_html__( 'Pages:', '__TEXT_DOMAIN__' ),
+					'after'  => '</div>',
+				) );
+				?>
+			</div><!-- .entry-content -->
+		</article><!-- #post-<?php the_ID(); ?> -->
+		<?php
+		// If comments are open or we have at least one comment, load up the comment template.
+		if ( comments_open() || get_comments_number() ) :
+			comments_template();
+		endif;
+	endwhile; // End of the loop.
+	?>
+</main><!-- #primary -->
+
+<?php
+get_footer();

package/template/style.css

@@ -0,0 +1,13 @@
+/*
+Theme Name: __THEME_NAME__
+Theme URI: 
+Author: __AUTHOR__
+Author URI: 
+Description: __DESCRIPTION__
+Version: 1.0.0
+Tested up to: 6.4
+Requires PHP: 7.4
+Text Domain: __TEXT_DOMAIN__
+License: MIT
+License URI: https://opensource.org/licenses/MIT
+*/

package/template/templates/parts/content.php

@@ -0,0 +1,38 @@
+<?php
+/**
+ * Template part for displaying posts
+ *
+ * @package __THEME_NAME__
+ */
+
+?>
+<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
+	<header class="entry-header">
+		<?php
+		if ( is_singular() ) :
+			the_title( '<h1 class="entry-title">', '</h1>' );
+		else :
+			the_title( '<h2 class="entry-title"><a href="' . esc_url( get_permalink() ) . '" rel="bookmark">', '</a></h2>' );
+		endif;
+		?>
+	</header><!-- .entry-header -->
+
+	<div class="entry-content">
+		<?php
+		the_content(
+			sprintf(
+				wp_kses(
+					/* translators: %s: Name of current post. Only visible to screen readers */
+					__( 'Continue reading<span class="screen-reader-text"> "%s"</span>', '__TEXT_DOMAIN__' ),
+					array(
+						'span' => array(
+							'class' => array(),
+						),
+					)
+				),
+				wp_kses_post( get_the_title() )
+			)
+		);
+		?>
+	</div><!-- .entry-content -->
+</article><!-- #post-<?php the_ID(); ?> -->