🔀 Version Control for Themes

Master Git for WordPress theme development

Learn branching strategies, collaboration, and deployment workflows

Learning Objectives

Set up Git for theme development
Understand branching strategies
Master Git workflow for themes
Collaborate with team members
Handle merge conflicts
Use GitHub/GitLab effectively
Implement CI/CD with Git
Manage releases and tags

Why Version Control for Themes?

Version control is essential for professional theme development, enabling collaboration, tracking changes, and maintaining code history.

Benefits of Version Control

Track Changes: Complete history of every modification
Collaboration: Multiple developers working simultaneously
Backup: Code stored in multiple locations
Branching: Experiment without affecting main code
Rollback: Revert to previous versions easily
Documentation: Commit messages explain changes

Setting Up Git for Theme Development

Initial Git Setup

# Configure Git identity
git config --global user.name "Your Name"
git config --global user.email "email@example.com"

# Initialize repository in theme directory
cd wp-content/themes/my-theme
git init

# Create initial commit
git add .
git commit -m "Initial theme commit"

# Add remote repository
git remote add origin https://github.com/username/my-theme.git
git push -u origin main

.gitignore for WordPress Themes

# Dependencies
node_modules/
vendor/

# Build files
dist/
*.map
*.min.css
*.min.js

# Development files
.sass-cache/
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*

# OS files
.DS_Store
Thumbs.db
desktop.ini

# Editor files
.vscode/
.idea/
*.sublime-project
*.sublime-workspace

# Environment files
.env
.env.local
.env.*.local

# WordPress core files (if in full WP repo)
/wordpress/
/wp-admin/
/wp-includes/
/wp-content/uploads/
/wp-content/plugins/
/wp-content/themes/*
!/wp-content/themes/my-theme/

# Compiled CSS (if using preprocessor)
style.css
!style.css.example

# Cache
.cache/
*.cache

# Backup files
*.bak
*.backup
*~

# Package files
*.zip
*.tar.gz

Git Branching Strategies

Git Flow Strategy

Main

Production-ready code

Develop

Integration branch

Feature

New features

Release

Release preparation

Hotfix

Emergency fixes

Working with Branches

# Create and switch to develop branch
git checkout -b develop

# Create feature branch from develop
git checkout -b feature/navigation-menu develop

# Work on feature
git add .
git commit -m "Add responsive navigation menu"

# Merge feature back to develop
git checkout develop
git merge --no-ff feature/navigation-menu
git branch -d feature/navigation-menu

# Create release branch
git checkout -b release/1.0.0 develop

# Finish release
git checkout main
git merge --no-ff release/1.0.0
git tag -a v1.0.0 -m "Version 1.0.0"
git checkout develop
git merge --no-ff release/1.0.0

# Create hotfix from main
git checkout -b hotfix/security-fix main
# ... make fixes
git checkout main
git merge --no-ff hotfix/security-fix
git tag -a v1.0.1 -m "Security hotfix"
git checkout develop
git merge --no-ff hotfix/security-fix

Essential Git Commands for Theme Development

Daily Workflow Commands

# Check status
git status

# Stage specific files
git add functions.php style.css

# Stage all changes
git add .

# Commit with message
git commit -m "Add custom post type support"

# Push to remote
git push origin develop

# Pull latest changes
git pull origin develop

# View commit history
git log --oneline --graph

# View changes
git diff
git diff --staged

# Stash changes temporarily
git stash
git stash pop

# Amend last commit
git commit --amend -m "Updated commit message"

# Reset to previous commit (careful!)
git reset --hard HEAD~1

# Cherry-pick specific commit
git cherry-pick abc123

# View remote repositories
git remote -v

# Fetch without merging
git fetch origin

# Clean untracked files
git clean -fd

Collaboration Workflow

Pull Request Workflow

# Fork repository on GitHub
# Clone your fork
git clone https://github.com/yourusername/theme.git
cd theme

# Add upstream remote
git remote add upstream https://github.com/originalowner/theme.git

# Create feature branch
git checkout -b feature/widget-areas

# Make changes and commit
git add .
git commit -m "Add footer widget areas"

# Push to your fork
git push origin feature/widget-areas

# Create Pull Request on GitHub

# Keep fork updated
git fetch upstream
git checkout main
git merge upstream/main
git push origin main

Handling Merge Conflicts

# When merge conflict occurs
git merge develop
# Auto-merging functions.php
# CONFLICT (content): Merge conflict in functions.php

# Open conflicted file and resolve
# Look for conflict markers:
# <<<<<<< HEAD
# Your changes
# =======
# Their changes
# >>>>>>> develop

# After resolving conflicts
git add functions.php
git commit -m "Resolve merge conflict in functions.php"

# Abort merge if needed
git merge --abort

Git Hooks for Quality Control

Pre-commit Hook (.git/hooks/pre-commit)

#!/bin/sh
# Run PHP linting
for file in $(git diff --cached --name-only --diff-filter=ACM | grep '\.php$')
do
    php -l "$file"
    if [ $? != 0 ]; then
        echo "PHP syntax error in $file"
        exit 1
    fi
done

# Run PHPCS
vendor/bin/phpcs --standard=WordPress $(git diff --cached --name-only --diff-filter=ACM)
if [ $? != 0 ]; then
    echo "WordPress coding standards violations found"
    exit 1
fi

# Run ESLint
npm run lint:js
if [ $? != 0 ]; then
    echo "JavaScript linting errors found"
    exit 1
fi

exit 0

Commit Message Template (.gitmessage)

# Type: feat, fix, docs, style, refactor, test, chore
# Scope: component or file name
# Subject: imperative mood, max 50 chars

[type]([scope]): [subject]

[body]
# Explain what and why, not how
# Wrap at 72 characters

[footer]
# Closes #123
# Breaking changes

# Example:
# feat(navigation): add mobile hamburger menu
#
# Implemented responsive navigation with hamburger menu
# for mobile devices. Menu slides in from the right
# and includes smooth animations.
#
# Closes #42

Release Management

Semantic Versioning and Tags

# Create annotated tag
git tag -a v1.0.0 -m "Initial release"

# List tags
git tag

# Show tag details
git show v1.0.0

# Push tags to remote
git push origin v1.0.0
# Or push all tags
git push origin --tags

# Delete local tag
git tag -d v1.0.0

# Delete remote tag
git push origin --delete v1.0.0

# Create release branch
git checkout -b release/2.0.0 develop

# Update version in style.css
sed -i 's/Version: .*/Version: 2.0.0/' style.css

# Commit version bump
git add style.css
git commit -m "Bump version to 2.0.0"

# Merge and tag
git checkout main
git merge --no-ff release/2.0.0
git tag -a v2.0.0 -m "Release version 2.0.0"

Changelog Generation

# Generate changelog from commits
git log v1.0.0..v2.0.0 --pretty=format:"- %s" > CHANGELOG.md

# Or use conventional-changelog
npm install -g conventional-changelog-cli
conventional-changelog -p angular -i CHANGELOG.md -s

Automated Deployment with GitHub Actions

.github/workflows/deploy.yml

name: Deploy Theme

on:
  push:
    tags:
      - 'v*'

jobs:
  deploy:
    runs-on: ubuntu-latest
    
    steps:
    - uses: actions/checkout@v3
    
    - name: Setup Node.js
      uses: actions/setup-node@v3
      with:
        node-version: '18'
        
    - name: Install dependencies
      run: npm ci
      
    - name: Build theme
      run: npm run build
      
    - name: Create release package
      run: |
        mkdir -p release
        rsync -av --exclude-from='.distignore' . release/
        cd release
        zip -r ../theme-${{ github.ref_name }}.zip .
        
    - name: Create GitHub Release
      uses: softprops/action-gh-release@v1
      with:
        files: theme-${{ github.ref_name }}.zip
        body: |
          Release ${{ github.ref_name }}
          See CHANGELOG.md for details
          
    - name: Deploy to server
      uses: appleboy/scp-action@master
      with:
        host: ${{ secrets.HOST }}
        username: ${{ secrets.USERNAME }}
        key: ${{ secrets.SSH_KEY }}
        source: "release/*"
        target: "/var/www/wp-content/themes/my-theme"

Git Best Practices Checklist

Write clear, descriptive commit messages
Commit frequently with logical chunks
Never commit sensitive data
Use .gitignore properly
Pull before pushing
Use branches for features
Review code before merging
Tag releases properly
Keep commit history clean
Use meaningful branch names
Document branching strategy
Set up CI/CD pipelines
Protect main branch
Regular backups
Use signed commits when possible

Best Practices

Version Control Best Practices

Atomic commits: Each commit should represent one logical change
Branch naming: Use descriptive names like feature/user-authentication
Regular syncing: Pull changes frequently to avoid conflicts
Code reviews: Always review before merging to main
Documentation: Keep README and CHANGELOG updated
Testing: Never push broken code
Backup: Use multiple remotes for redundancy

Never force push to shared branches. This can overwrite other developers' work and cause serious issues in collaborative environments.

Use GUI tools like GitKraken, SourceTree, or GitHub Desktop if you're not comfortable with command line. They provide visual representations of branches and commits.

Practice Exercise

💻

Implement Version Control

Set up comprehensive version control for your theme:

Initialize Git repository
Create proper .gitignore file
Make initial commit
Create develop branch
Add feature branch
Make several commits
Merge feature to develop
Create and push tag
Set up GitHub repository
Configure GitHub Actions

PHP WordPress Development

Course Progress