GitHub included files
📦 WordPress
✨ The Prompt Phrase
GitHub included files : 1. /wp-content/themes/your-custom-theme/ 2. /wp-content/plugins/your-custom-plugin/ 3. /wp-content/mu-plugins/ (custom only) 4. Custom PHP / JS / CSS code you wrote
💻 Code Preview
📦 All-in-One Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>GitHub WordPress Files - Interactive Tutorial</title>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700;800;900&family=Fira+Code:wght@400;500;600&display=swap" rel="stylesheet">
<style>
:root {
--bg-dark: #0f172a;
--bg-darker: #020617;
--bg-card: #1e293b;
--bg-card-hover: #334155;
--accent-purple: #a855f7;
--accent-blue: #3b82f6;
--accent-green: #10b981;
--accent-red: #ef4444;
--accent-yellow: #fbbf24;
--accent-cyan: #06b6d4;
--accent-orange: #f97316;
--github-purple: #8b5cf6;
--text-primary: #f1f5f9;
--text-secondary: #94a3b8;
--text-muted: #64748b;
--gradient-hero: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
--gradient-github: linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%);
--gradient-success: linear-gradient(135deg, #10b981 0%, #059669 100%);
--shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.5);
--shadow-xl: 0 25px 80px rgba(0, 0, 0, 0.6);
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Inter', sans-serif;
background: var(--bg-darker);
color: var(--text-primary);
line-height: 1.7;
overflow-x: hidden;
}
.progress-bar {
position: fixed;
top: 0;
left: 0;
height: 4px;
background: var(--gradient-hero);
width: 0%;
z-index: 9999;
transition: width 0.2s ease;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}
.hero {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: var(--gradient-hero);
position: relative;
overflow: hidden;
text-align: center;
padding: 40px 20px;
}
.hero::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg"><circle cx="50" cy="50" r="1" fill="white" opacity="0.2"/></svg>');
animation: stars 30s linear infinite;
}
@keyframes stars {
from { transform: translateY(0); }
to { transform: translateY(-100px); }
}
.hero-content {
position: relative;
z-index: 2;
}
.hero-icon {
font-size: 8rem;
margin-bottom: 30px;
animation: float 3s ease-in-out infinite;
filter: drop-shadow(0 10px 30px rgba(0,0,0,0.3));
}
@keyframes float {
0%, 100% { transform: translateY(0px); }
50% { transform: translateY(-20px); }
}
.hero h1 {
font-size: 3.5rem;
font-weight: 900;
margin-bottom: 20px;
color: white;
text-shadow: 2px 4px 8px rgba(0,0,0,0.3);
animation: slideDown 0.8s ease;
}
@keyframes slideDown {
from { opacity: 0; transform: translateY(-50px); }
to { opacity: 1; transform: translateY(0); }
}
.code-box {
display: inline-block;
background: rgba(0, 0, 0, 0.4);
backdrop-filter: blur(10px);
padding: 30px 40px;
border-radius: 20px;
font-family: 'Fira Code', monospace;
font-size: 1.1rem;
color: white;
margin: 30px 0;
border: 2px solid rgba(255, 255, 255, 0.3);
box-shadow: var(--shadow-lg);
text-align: left;
max-width: 90%;
}
.code-box div {
margin: 8px 0;
padding-left: 20px;
}
.hero-subtitle {
font-size: 1.5rem;
color: white;
opacity: 0.95;
margin-top: 20px;
animation: fadeIn 1s ease 0.3s backwards;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.scroll-indicator {
position: absolute;
bottom: 40px;
left: 50%;
transform: translateX(-50%);
animation: bounce 2s infinite;
cursor: pointer;
font-size: 2rem;
color: white;
opacity: 0.8;
}
@keyframes bounce {
0%, 20%, 50%, 80%, 100% { transform: translateX(-50%) translateY(0); }
40% { transform: translateX(-50%) translateY(-20px); }
60% { transform: translateX(-50%) translateY(-10px); }
}
section {
padding: 80px 0;
}
.section-title {
font-size: 3rem;
font-weight: 800;
margin-bottom: 40px;
background: var(--gradient-hero);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
text-align: center;
}
.card {
background: var(--bg-card);
border-radius: 24px;
padding: 40px;
margin: 30px 0;
box-shadow: var(--shadow-lg);
border: 1px solid rgba(255, 255, 255, 0.05);
transition: all 0.3s ease;
}
.card:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-xl);
border-color: rgba(255, 255, 255, 0.1);
}
.card h3 {
color: var(--accent-purple);
font-size: 1.8rem;
margin-bottom: 20px;
}
.card p {
color: var(--text-secondary);
font-size: 1.1rem;
line-height: 1.8;
}
.feature-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 30px;
margin: 40px 0;
}
.feature-item {
background: var(--bg-card);
padding: 35px;
border-radius: 20px;
text-align: center;
transition: all 0.3s ease;
border: 2px solid transparent;
}
.feature-item:hover {
border-color: var(--github-purple);
transform: translateY(-10px) scale(1.02);
box-shadow: 0 20px 40px rgba(139, 92, 246, 0.3);
}
.feature-icon {
font-size: 4rem;
margin-bottom: 20px;
display: block;
}
.feature-title {
font-size: 1.4rem;
font-weight: 700;
color: var(--text-primary);
margin-bottom: 15px;
}
.feature-desc {
color: var(--text-secondary);
font-size: 1rem;
}
.file-tree {
background: #1e1e1e;
border-radius: 16px;
padding: 30px;
margin: 25px 0;
font-family: 'Fira Code', monospace;
overflow-x: auto;
}
.file-tree-item {
padding: 8px 0;
color: #e0e0e0;
font-size: 1rem;
display: flex;
align-items: center;
gap: 10px;
transition: all 0.2s ease;
}
.file-tree-item:hover {
color: var(--github-purple);
transform: translateX(5px);
}
.file-icon {
font-size: 1.2rem;
}
.indent-1 { padding-left: 20px; }
.indent-2 { padding-left: 40px; }
.indent-3 { padding-left: 60px; }
.indent-4 { padding-left: 80px; }
.include { color: var(--accent-green); font-weight: 600; }
.exclude { color: var(--accent-red); opacity: 0.5; text-decoration: line-through; }
.code-block {
background: #1e1e1e;
border-radius: 16px;
padding: 30px;
margin: 25px 0;
position: relative;
overflow: hidden;
}
.code-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
padding-bottom: 15px;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.code-dots {
display: flex;
gap: 8px;
}
.code-dot {
width: 14px;
height: 14px;
border-radius: 50%;
}
.dot-red { background: #ff5f56; }
.dot-yellow { background: #ffbd2e; }
.dot-green { background: #27c93f; }
.copy-btn {
background: var(--github-purple);
color: white;
border: none;
padding: 10px 20px;
border-radius: 10px;
cursor: pointer;
font-size: 0.95rem;
font-weight: 600;
transition: all 0.3s ease;
display: flex;
align-items: center;
gap: 8px;
}
.copy-btn:hover {
background: var(--accent-blue);
transform: scale(1.05);
}
.copy-btn.copied {
background: var(--accent-green);
}
pre {
margin: 0;
overflow-x: auto;
font-family: 'Fira Code', monospace;
}
code {
color: #e0e0e0;
font-size: 1rem;
line-height: 1.8;
}
.code-comment { color: #6a9955; font-style: italic; }
.code-string { color: #ce9178; }
.code-keyword { color: #569cd6; font-weight: 600; }
.code-path { color: #4ec9b0; font-weight: 600; }
.code-file { color: #dcdcaa; }
.tabs {
display: flex;
gap: 15px;
margin-bottom: 30px;
flex-wrap: wrap;
border-bottom: 2px solid rgba(255, 255, 255, 0.1);
padding-bottom: 10px;
}
.tab {
padding: 12px 28px;
background: transparent;
border: none;
color: var(--text-secondary);
cursor: pointer;
font-size: 1.05rem;
font-weight: 600;
border-radius: 10px 10px 0 0;
transition: all 0.3s ease;
position: relative;
}
.tab:hover {
color: var(--text-primary);
background: rgba(139, 92, 246, 0.1);
}
.tab.active {
color: var(--github-purple);
background: rgba(139, 92, 246, 0.2);
}
.tab.active::after {
content: '';
position: absolute;
bottom: -12px;
left: 0;
right: 0;
height: 3px;
background: var(--gradient-github);
}
.tab-content {
display: none;
}
.tab-content.active {
display: block;
animation: fadeInUp 0.5s ease;
}
@keyframes fadeInUp {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
.comparison-table {
width: 100%;
border-collapse: collapse;
margin: 30px 0;
background: var(--bg-card);
border-radius: 16px;
overflow: hidden;
}
.comparison-table th {
background: var(--gradient-github);
color: white;
padding: 20px;
text-align: left;
font-size: 1.1rem;
font-weight: 700;
}
.comparison-table td {
padding: 20px;
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
color: var(--text-secondary);
}
.comparison-table tr:hover {
background: var(--bg-card-hover);
}
.check { color: var(--accent-green); font-size: 1.5rem; }
.cross { color: var(--accent-red); font-size: 1.5rem; }
.accordion-item {
margin: 20px 0;
}
.accordion-header {
background: var(--bg-card);
padding: 25px;
border-radius: 15px;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
transition: all 0.3s ease;
border: 2px solid transparent;
}
.accordion-header:hover {
background: var(--bg-card-hover);
border-color: var(--github-purple);
}
.accordion-header h4 {
color: var(--text-primary);
font-size: 1.3rem;
font-weight: 600;
}
.accordion-icon {
font-size: 1.5rem;
transition: transform 0.3s ease;
color: var(--github-purple);
}
.accordion-icon.active {
transform: rotate(180deg);
}
.accordion-content {
max-height: 0;
overflow: hidden;
transition: max-height 0.4s ease;
}
.accordion-content.active {
max-height: 1500px;
}
.accordion-body {
padding: 25px;
background: rgba(30, 41, 59, 0.5);
border-radius: 15px;
margin-top: 10px;
}
.alert {
padding: 20px 25px;
border-radius: 12px;
margin: 20px 0;
border-left: 5px solid;
display: flex;
align-items: flex-start;
gap: 15px;
}
.alert-icon {
font-size: 1.8rem;
flex-shrink: 0;
}
.alert-info {
background: rgba(59, 130, 246, 0.1);
border-color: var(--accent-blue);
color: var(--text-primary);
}
.alert-warning {
background: rgba(239, 68, 68, 0.1);
border-color: var(--accent-red);
color: var(--text-primary);
}
.alert-success {
background: rgba(16, 185, 129, 0.1);
border-color: var(--accent-green);
color: var(--text-primary);
}
.alert-tip {
background: rgba(139, 92, 246, 0.1);
border-color: var(--github-purple);
color: var(--text-primary);
}
.quiz-container {
background: var(--bg-card);
border-radius: 24px;
padding: 50px;
margin: 40px 0;
box-shadow: var(--shadow-lg);
}
.quiz-header {
text-align: center;
margin-bottom: 40px;
}
.quiz-header h3 {
font-size: 2.5rem;
color: var(--github-purple);
margin-bottom: 15px;
}
.quiz-question {
margin: 40px 0;
padding: 30px;
background: rgba(30, 41, 59, 0.5);
border-radius: 16px;
}
.quiz-question h4 {
color: var(--accent-cyan);
font-size: 1.5rem;
margin-bottom: 25px;
}
.quiz-options {
display: flex;
flex-direction: column;
gap: 15px;
}
.quiz-option {
background: var(--bg-card);
padding: 20px 25px;
border-radius: 12px;
cursor: pointer;
transition: all 0.3s ease;
border: 2px solid transparent;
font-size: 1.05rem;
}
.quiz-option:hover {
border-color: var(--github-purple);
transform: translateX(10px);
background: var(--bg-card-hover);
}
.quiz-option.correct {
border-color: var(--accent-green);
background: rgba(16, 185, 129, 0.2);
}
.quiz-option.incorrect {
border-color: var(--accent-red);
background: rgba(239, 68, 68, 0.2);
}
.quiz-option.disabled {
pointer-events: none;
opacity: 0.6;
}
.quiz-feedback {
margin-top: 20px;
padding: 20px;
border-radius: 12px;
display: none;
font-size: 1.05rem;
}
.quiz-feedback.show {
display: block;
animation: slideIn 0.4s ease;
}
@keyframes slideIn {
from { opacity: 0; transform: translateY(-10px); }
to { opacity: 1; transform: translateY(0); }
}
.quiz-feedback.correct {
background: rgba(16, 185, 129, 0.2);
border-left: 5px solid var(--accent-green);
}
.quiz-feedback.incorrect {
background: rgba(239, 68, 68, 0.2);
border-left: 5px solid var(--accent-red);
}
.quiz-score {
text-align: center;
padding: 40px;
background: var(--gradient-github);
border-radius: 20px;
margin-top: 40px;
display: none;
}
.quiz-score.show {
display: block;
animation: zoomIn 0.5s ease;
}
@keyframes zoomIn {
from { opacity: 0; transform: scale(0.8); }
to { opacity: 1; transform: scale(1); }
}
.quiz-score h3 {
font-size: 2.5rem;
color: white;
margin-bottom: 15px;
}
.quiz-score p {
font-size: 1.3rem;
color: white;
opacity: 0.95;
}
.cheat-sheet {
background: var(--gradient-github);
border-radius: 24px;
padding: 50px;
margin: 40px 0;
color: white;
box-shadow: var(--shadow-xl);
}
.cheat-sheet h3 {
font-size: 2.5rem;
margin-bottom: 30px;
text-align: center;
color: white;
}
.cheat-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 25px;
margin-top: 30px;
}
.cheat-item {
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(10px);
padding: 25px;
border-radius: 16px;
border: 1px solid rgba(255, 255, 255, 0.2);
transition: all 0.3s ease;
}
.cheat-item:hover {
background: rgba(255, 255, 255, 0.25);
transform: translateY(-5px);
}
.cheat-item h4 {
color: white;
font-size: 1.3rem;
margin-bottom: 12px;
display: flex;
align-items: center;
gap: 10px;
}
.cheat-item p {
color: rgba(255, 255, 255, 0.9);
font-size: 0.95rem;
margin-top: 10px;
font-family: 'Fira Code', monospace;
}
.badge {
display: inline-block;
padding: 8px 16px;
background: var(--gradient-github);
border-radius: 25px;
font-size: 0.9rem;
font-weight: 700;
margin: 8px;
box-shadow: 0 5px 15px rgba(139, 92, 246, 0.3);
}
.footer {
background: var(--bg-card);
padding: 60px 20px;
text-align: center;
margin-top: 80px;
border-radius: 24px 24px 0 0;
}
.footer h2 {
font-size: 2.5rem;
color: var(--github-purple);
margin-bottom: 20px;
}
.footer p {
color: var(--text-secondary);
font-size: 1.1rem;
margin: 15px 0;
}
.footer-badges {
margin: 30px 0;
}
.confetti {
position: fixed;
width: 10px;
height: 10px;
z-index: 9999;
animation: confetti-fall 3s linear forwards;
}
@keyframes confetti-fall {
to {
transform: translateY(100vh) rotate(720deg);
opacity: 0;
}
}
.tooltip {
position: relative;
display: inline-block;
border-bottom: 2px dotted var(--github-purple);
cursor: help;
}
.tooltip:hover::after {
content: attr(data-tooltip);
position: absolute;
bottom: 125%;
left: 50%;
transform: translateX(-50%);
padding: 10px 15px;
background: var(--bg-darker);
color: var(--text-primary);
border-radius: 8px;
white-space: nowrap;
font-size: 0.9rem;
box-shadow: var(--shadow-lg);
z-index: 1000;
border: 1px solid var(--github-purple);
}
@media (max-width: 768px) {
.hero h1 { font-size: 2rem; }
.code-box { font-size: 0.9rem; padding: 20px; }
.section-title { font-size: 2rem; }
.card { padding: 25px; }
.feature-grid { grid-template-columns: 1fr; }
.cheat-grid { grid-template-columns: 1fr; }
.tabs { justify-content: center; }
.comparison-table { font-size: 0.9rem; }
.comparison-table th, .comparison-table td { padding: 12px; }
}
::-webkit-scrollbar {
width: 12px;
}
::-webkit-scrollbar-track {
background: var(--bg-darker);
}
::-webkit-scrollbar-thumb {
background: var(--github-purple);
border-radius: 6px;
}
::-webkit-scrollbar-thumb:hover {
background: var(--accent-purple);
}
</style>
</head>
<body>
<div class="progress-bar" id="progressBar"></div>
<!-- Hero Section -->
<section class="hero">
<div class="hero-content">
<div class="hero-icon">📁</div>
<h1>GitHub WordPress Files Guide</h1>
<div class="code-box">
<div>📂 <strong>1.</strong> /wp-content/themes/your-custom-theme/</div>
<div>🔌 <strong>2.</strong> /wp-content/plugins/your-custom-plugin/</div>
<div>⚙️ <strong>3.</strong> /wp-content/mu-plugins/ (custom only)</div>
<div>💻 <strong>4.</strong> Custom PHP / JS / CSS code you wrote</div>
</div>
<p class="hero-subtitle">Master WordPress Version Control Like a Pro! 🚀</p>
</div>
<div class="scroll-indicator" onclick="document.getElementById('what-is-it').scrollIntoView({behavior: 'smooth'})">
⬇️
</div>
</section>
<div class="container">
<!-- What Is It Section -->
<section id="what-is-it">
<h2 class="section-title">🤔 What Does This Mean?</h2>
<div class="card">
<h3>Your WordPress Git Strategy Explained</h3>
<p style="font-size: 1.2rem; margin-bottom: 25px;">
This list defines <strong>exactly what files you should track in Git</strong> when working with WordPress. It's the <span class="tooltip" data-tooltip="Best practice recommended by WordPress experts">golden rule</span> for version control: <strong>only commit YOUR custom code</strong>, not WordPress core files or third-party plugins!
</p>
<p style="margin-bottom: 20px;">
Think of it like this: WordPress core and downloaded plugins are like the "operating system" of your site—they're maintained by others. Your custom themes, plugins, and code are like the "apps" you build—those are what you need to track and manage in Git! 🎯
</p>
<div class="alert alert-info">
<span class="alert-icon">💡</span>
<div>
<strong>Why This Matters:</strong> Following this practice keeps your Git repository clean, makes collaboration easier, prevents merge conflicts, and ensures your custom work is safely backed up without bloating your repo with unnecessary files!
</div>
</div>
</div>
</section>
<!-- Visual File Tree -->
<section>
<h2 class="section-title">🌳 WordPress File Structure</h2>
<div class="card">
<h3>What to Include vs Exclude</h3>
<div class="file-tree">
<div class="file-tree-item exclude">
<span class="file-icon">📁</span>
<span>wordpress/ (root)</span>
</div>
<div class="file-tree-item exclude indent-1">
<span class="file-icon">📄</span>
<span>index.php (WordPress core - DON'T commit)</span>
</div>
<div class="file-tree-item exclude indent-1">
<span class="file-icon">📄</span>
<span>wp-login.php (WordPress core - DON'T commit)</span>
</div>
<div class="file-tree-item exclude indent-1">
<span class="file-icon">📁</span>
<span>wp-admin/ (WordPress core - DON'T commit)</span>
</div>
<div class="file-tree-item exclude indent-1">
<span class="file-icon">📁</span>
<span>wp-includes/ (WordPress core - DON'T commit)</span>
</div>
<div class="file-tree-item indent-1">
<span class="file-icon">📁</span>
<span>wp-content/</span>
</div>
<div class="file-tree-item include indent-2">
<span class="file-icon">📁</span>
<span>themes/</span>
</div>
<div class="file-tree-item exclude indent-3">
<span class="file-icon">📁</span>
<span>twentytwentyfour/ (Default theme - DON'T commit)</span>
</div>
<div class="file-tree-item include indent-3">
<span class="file-icon">✅</span>
<span><strong>your-custom-theme/</strong> (COMMIT THIS!)</span>
</div>
<div class="file-tree-item include indent-4">
<span class="file-icon">📄</span>
<span>style.css</span>
</div>
<div class="file-tree-item include indent-4">
<span class="file-icon">📄</span>
<span>functions.php</span>
</div>
<div class="file-tree-item include indent-4">
<span class="file-icon">📄</span>
<span>index.php</span>
</div>
<div class="file-tree-item include indent-2">
<span class="file-icon">📁</span>
<span>plugins/</span>
</div>
<div class="file-tree-item exclude indent-3">
<span class="file-icon">📁</span>
<span>akismet/ (Third-party - DON'T commit)</span>
</div>
<div class="file-tree-item exclude indent-3">
<span class="file-icon">📁</span>
<span>woocommerce/ (Third-party - DON'T commit)</span>
</div>
<div class="file-tree-item include indent-3">
<span class="file-icon">✅</span>
<span><strong>your-custom-plugin/</strong> (COMMIT THIS!)</span>
</div>
<div class="file-tree-item include indent-4">
<span class="file-icon">📄</span>
<span>your-custom-plugin.php</span>
</div>
<div class="file-tree-item include indent-2">
<span class="file-icon">✅</span>
<span><strong>mu-plugins/</strong> (Must-use plugins - COMMIT custom ones!)</span>
</div>
<div class="file-tree-item include indent-3">
<span class="file-icon">📄</span>
<span>custom-functionality.php</span>
</div>
<div class="file-tree-item exclude indent-2">
<span class="file-icon">📁</span>
<span>uploads/ (Media files - DON'T commit)</span>
</div>
</div>
<div class="alert alert-success" style="margin-top: 20px;">
<span class="alert-icon">✅</span>
<div>
<strong>Key Principle:</strong> Green items = YOUR code (commit it!). Red items = Others' code or generated files (exclude it!).
</div>
</div>
</div>
</section>
<!-- Why Use It Section -->
<section>
<h2 class="section-title">✨ Why Follow This Practice?</h2>
<div class="feature-grid">
<div class="feature-item">
<span class="feature-icon">🎯</span>
<h3 class="feature-title">Clean Repository</h3>
<p class="feature-desc">Keep your Git repo focused on YOUR code, not thousands of WordPress core files!</p>
</div>
<div class="feature-item">
<span class="feature-icon">🚀</span>
<h3 class="feature-title">Faster Clones</h3>
<p class="feature-desc">Smaller repos mean faster git clone, pull, and push operations!</p>
</div>
<div class="feature-item">
<span class="feature-icon">🤝</span>
<h3 class="feature-title">Better Collaboration</h3>
<p class="feature-desc">Team members can easily see what custom code changed without noise!</p>
</div>
<div class="feature-item">
<span class="feature-icon">🔄</span>
<h3 class="feature-title">Easy Updates</h3>
<p class="feature-desc">Update WordPress core and plugins separately without Git conflicts!</p>
</div>
<div class="feature-item">
<span class="feature-icon">🛡️</span>
<h3 class="feature-title">Security</h3>
<p class="feature-desc">Avoid accidentally committing sensitive config files or credentials!</p>
</div>
<div class="feature-item">
<span class="feature-icon">📦</span>
<h3 class="feature-title">Portability</h3>
<p class="feature-desc">Deploy your custom code to any WordPress installation easily!</p>
</div>
</div>
</section>
<!-- Detailed Breakdown -->
<section>
<h2 class="section-title">🔍 Breaking Down Each Item</h2>
<div class="card">
<div class="tabs">
<button class="tab active" onclick="switchTab('themes')">Custom Themes</button>
<button class="tab" onclick="switchTab('plugins')">Custom Plugins</button>
<button class="tab" onclick="switchTab('muplugins')">MU-Plugins</button>
<button class="tab" onclick="switchTab('custom')">Custom Code</button>
</div>
<div id="themes" class="tab-content active">
<h3 style="color: var(--accent-cyan); margin-bottom: 20px;">1. Custom Themes</h3>
<div class="code-block">
<div class="code-header">
<div class="code-dots">
<div class="code-dot dot-red"></div>
<div class="code-dot dot-yellow"></div>
<div class="code-dot dot-green"></div>
</div>
<button class="copy-btn" onclick="copyCode('themes-code')">
<span>📋</span>
<span>Copy</span>
</button>
</div>
<pre><code id="themes-code"><span class="code-comment"># Include in Git: Your custom theme directory</span>
<span class="code-path">/wp-content/themes/your-custom-theme/</span>
<span class="code-comment"># What this includes:</span>
<span class="code-file">style.css</span> <span class="code-comment"># Theme stylesheet</span>
<span class="code-file">functions.php</span> <span class="code-comment"># Theme functions</span>
<span class="code-file">index.php</span> <span class="code-comment"># Main template</span>
<span class="code-file">header.php</span> <span class="code-comment"># Header template</span>
<span class="code-file">footer.php</span> <span class="code-comment"># Footer template</span>
<span class="code-file">single.php</span> <span class="code-comment"># Single post template</span>
<span class="code-file">page.php</span> <span class="code-comment"># Page template</span>
<span class="code-comment"># ... and all your custom template files</span>
<span class="code-comment"># DO NOT include default WordPress themes:</span>
<span class="code-comment"># ❌ /wp-content/themes/twentytwentyfour/</span>
<span class="code-comment"># ❌ /wp-content/themes/twentytwentythree/</span>
<span class="code-comment"># ❌ Any downloaded/purchased themes</span>
<span class="code-comment"># Example .gitignore for themes folder:</span>
<span class="code-keyword">wp-content/themes/*</span>
<span class="code-keyword">!wp-content/themes/your-custom-theme/</span></code></pre>
</div>
<div class="alert alert-tip">
<span class="alert-icon">💡</span>
<div>
<strong>Pro Tip:</strong> If you're using a child theme of a parent theme (like a child of Astra), only commit your child theme. Document the parent theme name and version in your README!
</div>
</div>
</div>
<div id="plugins" class="tab-content">
<h3 style="color: var(--accent-cyan); margin-bottom: 20px;">2. Custom Plugins</h3>
<div class="code-block">
<div class="code-header">
<div class="code-dots">
<div class="code-dot dot-red"></div>
<div class="code-dot dot-yellow"></div>
<div class="code-dot dot-green"></div>
</div>
<button class="copy-btn" onclick="copyCode('plugins-code')">
<span>📋</span>
<span>Copy</span>
</button>
</div>
<pre><code id="plugins-code"><span class="code-comment"># Include in Git: Your custom plugin directories</span>
<span class="code-path">/wp-content/plugins/your-custom-plugin/</span>
<span class="code-comment"># Example custom plugin structure:</span>
your-custom-plugin/
├── <span class="code-file">your-custom-plugin.php</span> <span class="code-comment"># Main plugin file</span>
├── <span class="code-file">README.md</span> <span class="code-comment"># Documentation</span>
├── includes/ <span class="code-comment"># PHP classes</span>
│ ├── <span class="code-file">class-admin.php</span>
│ └── <span class="code-file">class-frontend.php</span>
├── assets/ <span class="code-comment"># CSS/JS/images</span>
│ ├── css/
│ ├── js/
│ └── images/
└── languages/ <span class="code-comment"># Translation files</span>
<span class="code-comment"># DO NOT include third-party plugins:</span>
<span class="code-comment"># ❌ /wp-content/plugins/woocommerce/</span>
<span class="code-comment"># ❌ /wp-content/plugins/contact-form-7/</span>
<span class="code-comment"># ❌ /wp-content/plugins/yoast-seo/</span>
<span class="code-comment"># ❌ Any plugin downloaded from WordPress.org or purchased</span>
<span class="code-comment"># Example .gitignore for plugins folder:</span>
<span class="code-keyword">wp-content/plugins/*</span>
<span class="code-keyword">!wp-content/plugins/your-custom-plugin/</span>
<span class="code-keyword">!wp-content/plugins/another-custom-plugin/</span></code></pre>
</div>
<div class="alert alert-info">
<span class="alert-icon">📚</span>
<div>
<strong>Best Practice:</strong> Create a composer.json or package.json file to document which third-party plugins your project needs. This makes setup on new environments much easier!
</div>
</div>
</div>
<div id="muplugins" class="tab-content">
<h3 style="color: var(--accent-cyan); margin-bottom: 20px;">3. Must-Use Plugins (MU-Plugins)</h3>
<div class="code-block">
<div class="code-header">
<div class="code-dots">
<div class="code-dot dot-red"></div>
<div class="code-dot dot-yellow"></div>
<div class="code-dot dot-green"></div>
</div>
<button class="copy-btn" onclick="copyCode('muplugins-code')">
<span>📋</span>
<span>Copy</span>
</button>
</div>
<pre><code id="muplugins-code"><span class="code-comment"># Include in Git: Custom MU-plugins only</span>
<span class="code-path">/wp-content/mu-plugins/</span>
<span class="code-comment"># What are MU-Plugins?</span>
<span class="code-comment"># Must-Use plugins that are ALWAYS active</span>
<span class="code-comment"># Cannot be deactivated from WordPress admin</span>
<span class="code-comment"># Perfect for site-critical functionality</span>
<span class="code-comment"># Example MU-plugin structure:</span>
mu-plugins/
├── <span class="code-file">custom-post-types.php</span> <span class="code-comment"># Register CPTs</span>
├── <span class="code-file">custom-taxonomies.php</span> <span class="code-comment"># Register taxonomies</span>
├── <span class="code-file">site-functionality.php</span> <span class="code-comment"># Core site features</span>
├── <span class="code-file">security-tweaks.php</span> <span class="code-comment"># Security enhancements</span>
└── <span class="code-file">performance-optimizations.php</span> <span class="code-comment"># Speed tweaks</span>
<span class="code-comment"># Common use cases for MU-plugins:</span>
<span class="code-comment"># ✓ Custom post types and taxonomies</span>
<span class="code-comment"># ✓ Site-wide functionality that must always run</span>
<span class="code-comment"># ✓ Security configurations</span>
<span class="code-comment"># ✓ Environment-specific settings</span>
<span class="code-comment"># ✓ Custom admin modifications</span>
<span class="code-comment"># Include ALL custom MU-plugins in Git:</span>
<span class="code-keyword">wp-content/mu-plugins/*.php</span></code></pre>
</div>
<div class="alert alert-warning">
<span class="alert-icon">⚠️</span>
<div>
<strong>Important:</strong> MU-plugins are powerful but can't be deactivated! Only use them for critical functionality. Regular plugins are better for features you might want to disable temporarily.
</div>
</div>
</div>
<div id="custom" class="tab-content">
<h3 style="color: var(--accent-cyan); margin-bottom: 20px;">4. Custom PHP/JS/CSS Code</h3>
<div class="code-block">
<div class="code-header">
<div class="code-dots">
<div class="code-dot dot-red"></div>
<div class="code-dot dot-yellow"></div>
<div class="code-dot dot-green"></div>
</div>
<button class="copy-btn" onclick="copyCode('custom-code')">
<span>📋</span>
<span>Copy</span>
</button>
</div>
<pre><code id="custom-code"><span class="code-comment"># Include in Git: All custom code you wrote</span>
<span class="code-comment"># Custom PHP files:</span>
<span class="code-path">/wp-content/themes/your-theme/</span>
├── <span class="code-file">functions.php</span> <span class="code-comment"># Custom functions</span>
├── <span class="code-file">inc/custom-hooks.php</span> <span class="code-comment"># Custom hooks</span>
└── <span class="code-file">inc/template-tags.php</span> <span class="code-comment"># Helper functions</span>
<span class="code-comment"># Custom JavaScript:</span>
<span class="code-path">/wp-content/themes/your-theme/assets/js/</span>
├── <span class="code-file">main.js</span> <span class="code-comment"># Main JavaScript</span>
├── <span class="code-file">custom-slider.js</span> <span class="code-comment"># Custom features</span>
└── <span class="code-file">admin-scripts.js</span> <span class="code-comment"># Admin panel JS</span>
<span class="code-comment"># Custom CSS/SCSS:</span>
<span class="code-path">/wp-content/themes/your-theme/assets/css/</span>
├── <span class="code-file">style.css</span> <span class="code-comment"># Main stylesheet</span>
├── <span class="code-file">custom.css</span> <span class="code-comment"># Additional styles</span>
└── <span class="code-file">admin-styles.css</span> <span class="code-comment"># Admin styles</span>
<span class="code-comment"># Build tools and configs (if you use them):</span>
├── <span class="code-file">package.json</span> <span class="code-comment"># npm dependencies</span>
├── <span class="code-file">webpack.config.js</span> <span class="code-comment"># Webpack config</span>
├── <span class="code-file">gulpfile.js</span> <span class="code-comment"># Gulp tasks</span>
└── <span class="code-file">.babelrc</span> <span class="code-comment"># Babel config</span>
<span class="code-comment"># DO NOT include:</span>
<span class="code-comment"># ❌ node_modules/ (use .gitignore)</span>
<span class="code-comment"># ❌ vendor/ (Composer dependencies)</span>
<span class="code-comment"># ❌ Compiled/minified files (if you build them)</span>
<span class="code-comment"># ❌ .env files with secrets</span></code></pre>
</div>
<div class="alert alert-success">
<span class="alert-icon">✅</span>
<div>
<strong>Golden Rule:</strong> If YOU wrote it or YOUR team created it, commit it to Git. If someone else made it (WordPress core, third-party plugins), exclude it!
</div>
</div>
</div>
</div>
</section>
<!-- Comparison Table -->
<section>
<h2 class="section-title">📊 Include vs Exclude Quick Reference</h2>
<div class="card">
<table class="comparison-table">
<thead>
<tr>
<th>File/Folder</th>
<th>Include in Git?</th>
<th>Reason</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>/wp-admin/</code></td>
<td><span class="cross">❌</span></td>
<td>WordPress core - maintained by WordPress.org</td>
</tr>
<tr>
<td><code>/wp-includes/</code></td>
<td><span class="cross">❌</span></td>
<td>WordPress core - maintained by WordPress.org</td>
</tr>
<tr>
<td><code>wp-config.php</code></td>
<td><span class="cross">❌</span></td>
<td>Contains sensitive database credentials</td>
</tr>
<tr>
<td><code>/wp-content/uploads/</code></td>
<td><span class="cross">❌</span></td>
<td>Media files - too large, environment-specific</td>
</tr>
<tr>
<td><code>/wp-content/themes/twentytwenty*/</code></td>
<td><span class="cross">❌</span></td>
<td>Default WordPress themes</td>
</tr>
<tr>
<td><code>/wp-content/themes/your-custom-theme/</code></td>
<td><span class="check">✅</span></td>
<td>YOUR custom theme code</td>
</tr>
<tr>
<td><code>/wp-content/plugins/woocommerce/</code></td>
<td><span class="cross">❌</span></td>
<td>Third-party plugin from WordPress.org</td>
</tr>
<tr>
<td><code>/wp-content/plugins/your-plugin/</code></td>
<td><span class="check">✅</span></td>
<td>YOUR custom plugin code</td>
</tr>
<tr>
<td><code>/wp-content/mu-plugins/custom.php</code></td>
<td><span class="check">✅</span></td>
<td>YOUR custom must-use plugin</td>
</tr>
<tr>
<td><code>.htaccess</code></td>
<td><span class="check">✅</span></td>
<td>Custom server rules (if you modified it)</td>
</tr>
<tr>
<td><code>composer.json</code></td>
<td><span class="check">✅</span></td>
<td>Dependency management configuration</td>
</tr>
<tr>
<td><code>package.json</code></td>
<td><span class="check">✅</span></td>
<td>Node dependencies configuration</td>
</tr>
<tr>
<td><code>node_modules/</code></td>
<td><span class="cross">❌</span></td>
<td>Can be reinstalled with npm install</td>
</tr>
<tr>
<td><code>vendor/</code></td>
<td><span class="cross">❌</span></td>
<td>Can be reinstalled with composer install</td>
</tr>
</tbody>
</table>
</div>
</section>
<!-- .gitignore Example -->
<section>
<h2 class="section-title">📝 Complete .gitignore Example</h2>
<div class="card">
<h3>The Perfect WordPress .gitignore File</h3>
<div class="code-block">
<div class="code-header">
<div class="code-dots">
<div class="code-dot dot-red"></div>
<div class="code-dot dot-yellow"></div>
<div class="code-dot dot-green"></div>
</div>
<button class="copy-btn" onclick="copyCode('gitignore-code')">
<span>📋</span>
<span>Copy</span>
</button>
</div>
<pre><code id="gitignore-code"><span class="code-comment"># WordPress .gitignore - Best Practices</span>
<span class="code-comment"># WordPress Core Files</span>
/wp-admin/
/wp-includes/
/wp-*.php
/xmlrpc.php
/readme.html
/license.txt
<span class="code-comment"># Configuration Files (contain secrets!)</span>
wp-config.php
.env
.env.local
<span class="code-comment"># All Themes EXCEPT Your Custom Theme</span>
/wp-content/themes/*
!/wp-content/themes/your-custom-theme/
<span class="code-comment"># All Plugins EXCEPT Your Custom Plugins</span>
/wp-content/plugins/*
!/wp-content/plugins/your-custom-plugin/
!/wp-content/plugins/another-custom-plugin/
<span class="code-comment"># Include Custom MU-Plugins</span>
!/wp-content/mu-plugins/
<span class="code-comment"># Uploads and Cache</span>
/wp-content/uploads/
/wp-content/cache/
/wp-content/backup*/
/wp-content/upgrade/
<span class="code-comment"># Node.js Dependencies</span>
node_modules/
npm-debug.log
yarn-error.log
<span class="code-comment"># Composer Dependencies</span>
vendor/
<span class="code-comment"># Build Files</span>
/dist/
/build/
*.map
<span class="code-comment"># OS Files</span>
.DS_Store
Thumbs.db
desktop.ini
<span class="code-comment"># IDE Files</span>
.idea/
.vscode/
*.swp
*.swo
*~
<span class="code-comment"># Logs</span>
*.log
/logs/
error_log
debug.log</code></pre>
</div>
<div class="alert alert-tip">
<span class="alert-icon">💡</span>
<div>
<strong>Pro Tip:</strong> Save this as <code>.gitignore</code> in your WordPress root directory. Customize the theme and plugin names to match your project!
</div>
</div>
</div>
</section>
<!-- Common Mistakes Section -->
<section>
<h2 class="section-title">❌ Common Mistakes to Avoid</h2>
<div class="card">
<div class="accordion-item">
<div class="accordion-header" onclick="toggleAccordion(this)">
<h4>1. Committing WordPress Core Files</h4>
<span class="accordion-icon">▼</span>
</div>
<div class="accordion-content">
<div class="accordion-body">
<div class="alert alert-warning">
<span class="alert-icon">⚠️</span>
<div>
<strong>The Problem:</strong> Committing /wp-admin/, /wp-includes/, and core PHP files bloats your repository with 1000+ files you don't own or maintain. This makes git operations slow and creates merge conflicts when WordPress updates.
</div>
</div>
<div class="alert alert-success" style="margin-top: 15px;">
<span class="alert-icon">✅</span>
<div>
<strong>The Solution:</strong> Add WordPress core directories to .gitignore. Document the WordPress version your project uses in README.md. Use Composer or manual installation to add WordPress to new environments.
</div>
</div>
</div>
</div>
</div>
<div class="accordion-item">
<div class="accordion-header" onclick="toggleAccordion(this)">
<h4>2. Including Third-Party Plugins</h4>
<span class="accordion-icon">▼</span>
</div>
<div class="accordion-content">
<div class="accordion-body">
<div class="alert alert-warning">
<span class="alert-icon">⚠️</span>
<div>
<strong>The Problem:</strong> Committing plugins like WooCommerce, Yoast SEO, or Contact Form 7 adds thousands of files to your repo. When these plugins update, you get massive diffs that obscure your actual code changes.
</div>
</div>
<div class="alert alert-success" style="margin-top: 15px;">
<span class="alert-icon">✅</span>
<div>
<strong>The Solution:</strong> Create a plugins.txt or use composer.json to list required plugins and their versions. Team members can install these separately. Only commit plugins YOU developed!
</div>
</div>
</div>
</div>
</div>
<div class="accordion-item">
<div class="accordion-header" onclick="toggleAccordion(this)">
<h4>3. Committing wp-config.php with Credentials</h4>
<span class="accordion-icon">▼</span>
</div>
<div class="accordion-content">
<div class="accordion-body">
<div class="alert alert-warning">
<span class="alert-icon">⚠️</span>
<div>
<strong>The Problem:</strong> wp-config.php contains database passwords, security keys, and environment-specific settings. Committing it exposes credentials and causes conflicts between dev/staging/production environments.
</div>
</div>
<div class="alert alert-success
Live Preview