WordPress Style Guide Integration

For WordPress themes, consider creating a style guide page template:

<?php
/**
 * Template Name: Style Guide
 * 
 * A template for displaying the theme's style guide.
 */

get_header();
?>

<div class="container style-guide">
    <h1 class="style-guide__title">Theme Style Guide</h1>
    
    <!-- Color Palette -->
    <section class="style-guide__section">
        <h2 class="style-guide__section-title">Color Palette</h2>
        
        <div class="color-palette">
            <div class="color-swatch" style="background-color: var(--theme-primary);">
                <div class="color-swatch__label">Primary</div>
                <div class="color-swatch__value"><?php echo get_theme_mod('primary_color', '#3a86ff'); ?></div>
            </div>
            
            <div class="color-swatch" style="background-color: var(--theme-secondary);">
                <div class="color-swatch__label">Secondary</div>
                <div class="color-swatch__value"><?php echo get_theme_mod('secondary_color', '#ff006e'); ?></div>
            </div>
            
            <!-- Additional color swatches -->
        </div>
    </section>
    
    <!-- Typography -->
    <section class="style-guide__section">
        <h2 class="style-guide__section-title">Typography</h2>
        
        <div class="typography-sample">
            <h1>Heading 1</h1>
            <h2>Heading 2</h2>
            <h3>Heading 3</h3>
            <h4>Heading 4</h4>
            <h5>Heading 5</h5>
            <h6>Heading 6</h6>
            
            <p class="lead">Lead paragraph text. Used for introductory paragraphs.</p>
            
            <p>Regular paragraph text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
               Vestibulum consequat fringilla rutrum. Nunc semper lorem in erat sagittis, quis vulputate
               lorem convallis.</p>
            
            <p><strong>Bold text</strong> and <em>italic text</em> examples.</p>
            
            <blockquote>
                <p>This is a blockquote. It can be used for quotes and highlighted content.</p>
                <cite>— Citation Source</cite>
            </blockquote>
        </div>
    </section>
    
    <!-- Components -->
    <section class="style-guide__section">
        <h2 class="style-guide__section-title">Components</h2>
        
        <!-- Buttons -->
        <div class="component-sample">
            <h3>Buttons</h3>
            
            <button class="button button-primary">Primary Button</button>
            <button class="button button-secondary">Secondary Button</button>
            <button class="button button-outline">Outline Button</button>
            <button class="button button-small">Small Button</button>
            <button class="button button-large">Large Button</button>
            <button class="button button-primary" disabled>Disabled Button</button>
        </div>
        
        <!-- Forms -->
        <div class="component-sample">
            <h3>Form Elements</h3>
            
            <form class="sample-form">
                <div class="form-group">
                    <label for="text-input">Text Input</label>
                    <input type="text" id="text-input" placeholder="Text input example">
                </div>
                
                <div class="form-group">
                    <label for="select-input">Select Input</label>
                    <select id="select-input">
                        <option>Option One</option>
                        <option>Option Two</option>
                        <option>Option Three</option>
                    </select>
                </div>
                
                <div class="form-group">
                    <label for="textarea-input">Textarea</label>
                    <textarea id="textarea-input" rows="3" placeholder="Textarea example"></textarea>
                </div>
                
                <div class="form-group checkbox">
                    <input type="checkbox" id="checkbox-input">
                    <label for="checkbox-input">Checkbox input example</label>
                </div>
                
                <div class="form-group radio">
                    <input type="radio" id="radio-input-1" name="radio-group">
                    <label for="radio-input-1">Radio input one</label>
                    
                    <input type="radio" id="radio-input-2" name="radio-group">
                    <label for="radio-input-2">Radio input two</label>
                </div>
            </form>
        </div>
        
        <!-- Add more components as needed -->
    </section>
    
    <!-- CSS Documentation -->
    <section class="style-guide__section">
        <h2 class="style-guide__section-title">CSS Naming Conventions</h2>
        
        <div class="code-example">
            <h3>BEM Naming Example</h3>
            <pre><code>.block {}
.block__element {}
.block--modifier {}</code></pre>
            
            <p>Usage example:</p>
            <pre><code>.card {}
.card__title {}
.card__content {}
.card--featured {}</code></pre>
        </div>
    </section>
</div>

<?php get_footer(); ?>

WordPress Block Pattern Library

For WordPress themes, you can register block patterns to create a reusable pattern library:

/**
 * Register custom block patterns with consistent styling
 */
function mytheme_register_block_patterns() {
    // Register a custom block pattern category
    register_block_pattern_category(
        'mytheme-patterns',
        array( 'label' => __( 'MyTheme Patterns', 'mytheme' ) )
    );
    
    // Register a hero section pattern
    register_block_pattern(
        'mytheme/hero-section',
        array(
            'title'       => __( 'Hero Section', 'mytheme' ),
            'description' => __( 'A hero section with heading, text and buttons', 'mytheme' ),
            'categories'  => array( 'mytheme-patterns' ),
            'content'     => '
                            

                                
                                
Main Headline Goes Here
                                
                                
                                
                                
Supporting text that explains your value proposition and encourages action.
                                
                                
                                
                                

                                    
                                    
Primary Action
                                    
                                    
                                    
                                    
Secondary Action
                                    
                                
                                
                            
                            ',
        )
    );
    
    // Register a testimonial pattern
    register_block_pattern(
        'mytheme/testimonial',
        array(
            'title'       => __( 'Testimonial Block', 'mytheme' ),
            'description' => __( 'A customer testimonial with image and quote', 'mytheme' ),
            'categories'  => array( 'mytheme-patterns' ),
            'content'     => '
                            

                                
                                

                                    
We have been using this product for over a year now and it has transformed our business processes completely.
                                    — Jane Smith, CEO at Company Name
                                
                                
                                
                                
                                

                                    
                                
                                
                            
                            ',
        )
    );
    
    // Add more patterns as needed
}
add_action( 'init', 'mytheme_register_block_patterns' );

WordPress Theme Build Process Integration

const gulp = require('gulp');
const sass = require('gulp-sass')(require('sass'));
const postcss = require('gulp-postcss');
const autoprefixer = require('autoprefixer');
const cssnano = require('cssnano');
const sourcemaps = require('gulp-sourcemaps');
const rename = require('gulp-rename');
const replace = require('gulp-replace');
const packageJson = require('./package.json');

// Theme version from package.json for cache busting
const themeVersion = packageJson.version;

// Compile main theme SASS
function compileThemeSass() {
    return gulp.src('./sass/main.scss')
        .pipe(sourcemaps.init())
        .pipe(sass().on('error', sass.logError))
        .pipe(postcss([
            autoprefixer(),
            cssnano()
        ]))
        .pipe(rename({ basename: 'theme', suffix: '.min' }))
        .pipe(sourcemaps.write('./'))
        .pipe(gulp.dest('./assets/css'));
}

// Compile admin SASS
function compileAdminSass() {
    return gulp.src('./sass/admin/admin.scss')
        .pipe(sourcemaps.init())
        .pipe(sass().on('error', sass.logError))
        .pipe(postcss([
            autoprefixer(),
            cssnano()
        ]))
        .pipe(rename({ suffix: '.min' }))
        .pipe(sourcemaps.write('./'))
        .pipe(gulp.dest('./assets/css/admin'));
}

// Compile editor SASS
function compileEditorSass() {
    return gulp.src('./sass/admin/editor-style.scss')
        .pipe(sourcemaps.init())
        .pipe(sass().on('error', sass.logError))
        .pipe(postcss([
            autoprefixer(),
            cssnano()
        ]))
        .pipe(rename({ suffix: '.min' }))
        .pipe(sourcemaps.write('./'))
        .pipe(gulp.dest('./assets/css/admin'));
}

// Update version in style.css
function updateThemeVersion() {
    return gulp.src('./style.css')
        .pipe(replace(/Version: \d+\.\d+\.\d+/g, `Version: ${themeVersion}`))
        .pipe(gulp.dest('./'));
}

// Update style.css version references in functions.php
function updateVersionReferences() {
    return gulp.src('./functions.php')
        .pipe(replace(/define\(\s*'THEME_VERSION',\s*'.*?'\s*\);/g, `define('THEME_VERSION', '${themeVersion}');`))
        .pipe(gulp.dest('./'));
}

// Combined CSS compilation task
const compileCss = gulp.parallel(compileThemeSass, compileAdminSass, compileEditorSass);

// Version updating task
const updateVersion = gulp.series(updateThemeVersion, updateVersionReferences);

// Watch task
function watch() {
    gulp.watch('./sass/**/*.scss', compileCss);
}

// Build task
const build = gulp.series(compileCss, updateVersion);

// Export tasks
exports.css = compileCss;
exports.version = updateVersion;
exports.watch = watch;
exports.build = build;
exports.default = build;

Integrating Linting in WordPress Theme Development

// Add to package.json
{
  "scripts": {
    "lint:css": "stylelint \"sass/**/*.scss\" --syntax scss",
    "lint:css:fix": "stylelint \"sass/**/*.scss\" --syntax scss --fix"
  },
  "devDependencies": {
    "stylelint": "^14.0.0",
    "stylelint-config-standard-scss": "^3.0.0",
    "stylelint-scss": "^4.0.0"
  }
}

Add linting to your development workflow:

// Add to gulpfile.js
const stylelint = require('gulp-stylelint');

// Lint SCSS files
function lintSass() {
    return gulp.src('./sass/**/*.scss')
        .pipe(stylelint({
            reporters: [
                {formatter: 'string', console: true}
            ],
            failAfterError: false
        }));
}

// Add linting to watch task
function watch() {
    gulp.watch('./sass/**/*.scss', gulp.series(lintSass, compileSass));
}

// Add linting to build task
const build = gulp.series(lintSass, compileCss, updateVersion);

// Export lint task
exports.lint = lintSass;