GitHub Excluded Files
📦 WordPress
✨ The Prompt Phrase
excluded from GitHub and included in the host section such as Hostinger or WordPress.com. Reason enclosed with each item. 1. /wp-admin/ Why → WordPress core system 2. /wp-includes/ Why → WordPress core libraries 3. /wp-content/uploads/ Why → User-generated media 4. Vendor plugins Why → Third-party managed code 5. /wp-config.php Why → Secrets & environment config 6. Database Why → Dynamic runtime data
💻 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>WordPress Deployment Strategy - 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;
--host-orange: #ff6b35;
--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-host: linear-gradient(135deg, #ff6b35 0%, #f7931e 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-icons {
display: flex;
justify-content: center;
align-items: center;
gap: 30px;
font-size: 6rem;
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); }
}
.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; }
}
.deployment-flow {
display: flex;
justify-content: center;
align-items: center;
gap: 20px;
margin: 40px 0;
flex-wrap: wrap;
}
.flow-box {
background: rgba(0, 0, 0, 0.4);
backdrop-filter: blur(10px);
padding: 25px;
border-radius: 16px;
border: 2px solid rgba(255, 255, 255, 0.3);
min-width: 150px;
text-align: center;
animation: fadeIn 1s ease 0.5s backwards;
}
.flow-arrow {
font-size: 2rem;
color: white;
animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse {
0%, 100% { opacity: 0.5; }
50% { 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;
}
.split-view {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 30px;
margin: 40px 0;
}
.split-card {
background: var(--bg-card);
padding: 35px;
border-radius: 20px;
border: 3px solid;
transition: all 0.3s ease;
}
.split-card.github {
border-color: var(--github-purple);
}
.split-card.host {
border-color: var(--host-orange);
}
.split-card:hover {
transform: translateY(-10px);
box-shadow: var(--shadow-xl);
}
.split-card h3 {
font-size: 1.8rem;
margin-bottom: 20px;
display: flex;
align-items: center;
gap: 12px;
}
.split-card.github h3 {
color: var(--github-purple);
}
.split-card.host h3 {
color: var(--host-orange);
}
.item-list {
list-style: none;
margin: 20px 0;
}
.item-list li {
padding: 15px;
margin: 12px 0;
background: rgba(255, 255, 255, 0.03);
border-radius: 12px;
border-left: 4px solid;
transition: all 0.3s ease;
}
.github .item-list li {
border-color: var(--github-purple);
}
.host .item-list li {
border-color: var(--host-orange);
}
.item-list li:hover {
background: rgba(255, 255, 255, 0.08);
transform: translateX(10px);
}
.item-title {
font-family: 'Fira Code', monospace;
font-weight: 700;
color: var(--text-primary);
font-size: 1.1rem;
margin-bottom: 8px;
}
.item-reason {
color: var(--text-secondary);
font-size: 0.95rem;
display: flex;
align-items: center;
gap: 8px;
}
.reason-icon {
color: var(--accent-yellow);
font-size: 1.2rem;
}
.exclusion-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 25px;
margin: 40px 0;
}
.exclusion-card {
background: var(--bg-card);
padding: 30px;
border-radius: 20px;
border: 2px solid transparent;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.exclusion-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 5px;
background: var(--gradient-host);
}
.exclusion-card:hover {
border-color: var(--host-orange);
transform: translateY(-5px);
box-shadow: 0 15px 40px rgba(255, 107, 53, 0.3);
}
.exclusion-number {
position: absolute;
top: 20px;
right: 20px;
width: 50px;
height: 50px;
background: var(--gradient-host);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
font-weight: 900;
color: white;
box-shadow: 0 5px 15px rgba(255, 107, 53, 0.4);
}
.exclusion-path {
font-family: 'Fira Code', monospace;
font-size: 1.2rem;
color: var(--accent-cyan);
margin: 15px 0;
font-weight: 600;
}
.exclusion-why {
background: rgba(255, 107, 53, 0.1);
padding: 15px;
border-radius: 12px;
margin-top: 15px;
border-left: 4px solid var(--host-orange);
}
.exclusion-why strong {
color: var(--host-orange);
display: block;
margin-bottom: 8px;
}
.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(--host-orange);
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-exclude { color: #ef4444; }
.code-include { color: #10b981; }
.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(255, 107, 53, 0.1);
border-color: var(--host-orange);
color: var(--text-primary);
}
.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(--host-orange);
}
.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(--host-orange);
}
.accordion-icon.active {
transform: rotate(180deg);
}
.accordion-content {
max-height: 0;
overflow: hidden;
transition: max-height 0.4s ease;
}
.accordion-content.active {
max-height: 2000px;
}
.accordion-body {
padding: 25px;
background: rgba(30, 41, 59, 0.5);
border-radius: 15px;
margin-top: 10px;
}
.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(--host-orange);
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(--host-orange);
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-host);
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-host);
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;
}
.badge {
display: inline-block;
padding: 8px 16px;
background: var(--gradient-host);
border-radius: 25px;
font-size: 0.9rem;
font-weight: 700;
margin: 8px;
box-shadow: 0 5px 15px rgba(255, 107, 53, 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(--host-orange);
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(--host-orange);
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(--host-orange);
}
@media (max-width: 768px) {
.hero h1 { font-size: 2rem; }
.hero-icons { font-size: 4rem; gap: 15px; }
.section-title { font-size: 2rem; }
.card { padding: 25px; }
.split-view { grid-template-columns: 1fr; }
.exclusion-grid { grid-template-columns: 1fr; }
.cheat-grid { grid-template-columns: 1fr; }
.deployment-flow { flex-direction: column; }
}
::-webkit-scrollbar {
width: 12px;
}
::-webkit-scrollbar-track {
background: var(--bg-darker);
}
::-webkit-scrollbar-thumb {
background: var(--host-orange);
border-radius: 6px;
}
::-webkit-scrollbar-thumb:hover {
background: var(--accent-orange);
}
</style>
</head>
<body>
<div class="progress-bar" id="progressBar"></div>
<!-- Hero Section -->
<section class="hero">
<div class="hero-content">
<div class="hero-icons">
<span>📁</span>
<span>➡️</span>
<span>🌐</span>
</div>
<h1>WordPress Deployment Strategy</h1>
<p class="hero-subtitle">Understanding What Goes Where: GitHub vs Hosting! 🚀</p>
<div class="deployment-flow">
<div class="flow-box">
<div style="font-size: 3rem; margin-bottom: 10px;">💻</div>
<div style="color: white; font-weight: 700;">GitHub</div>
<div style="color: rgba(255,255,255,0.8); font-size: 0.9rem;">Your Code</div>
</div>
<div class="flow-arrow">⚡</div>
<div class="flow-box">
<div style="font-size: 3rem; margin-bottom: 10px;">🌐</div>
<div style="color: white; font-weight: 700;">Hosting</div>
<div style="color: rgba(255,255,255,0.8); font-size: 0.9rem;">Live Site</div>
</div>
</div>
</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>The Great WordPress Separation</h3>
<p style="font-size: 1.2rem; margin-bottom: 25px;">
When deploying WordPress, you need to understand a crucial concept: <strong>not everything belongs in Git</strong>! This guide explains which files should be <span class="tooltip" data-tooltip="Version controlled in your repository">tracked in GitHub</span> and which should <strong>only live on your hosting server</strong> (like Hostinger or WordPress.com).
</p>
<p style="margin-bottom: 20px;">
Think of it like packing for a trip: You pack your personal items (custom code) in your suitcase (GitHub), but you don't pack the hotel furniture (WordPress core), the local water supply (database), or items already at your destination (vendor plugins). They're already there waiting for you! 🧳
</p>
<div class="alert alert-info">
<span class="alert-icon">💡</span>
<div>
<strong>The Golden Rule:</strong> GitHub stores YOUR custom code. The hosting server manages WordPress core, third-party plugins, user uploads, configuration, and the database. This separation keeps your repository clean and deployment efficient!
</div>
</div>
</div>
</section>
<!-- Split View: GitHub vs Host -->
<section>
<h2 class="section-title">⚖️ The Great Divide</h2>
<div class="split-view">
<div class="split-card github">
<h3><span>💻</span> In GitHub (Version Control)</h3>
<p style="color: var(--text-secondary); margin-bottom: 20px;">
Only YOUR custom code that you write and maintain
</p>
<ul class="item-list">
<li>
<div class="item-title">✅ Custom Themes</div>
<div class="item-reason">
<span class="reason-icon">💡</span>
<span>Code you created</span>
</div>
</li>
<li>
<div class="item-title">✅ Custom Plugins</div>
<div class="item-reason">
<span class="reason-icon">💡</span>
<span>Your functionality</span>
</div>
</li>
<li>
<div class="item-title">✅ Custom MU-Plugins</div>
<div class="item-reason">
<span class="reason-icon">💡</span>
<span>Your must-use code</span>
</div>
</li>
<li>
<div class="item-title">✅ .gitignore</div>
<div class="item-reason">
<span class="reason-icon">💡</span>
<span>Exclusion rules</span>
</div>
</li>
<li>
<div class="item-title">✅ README.md</div>
<div class="item-reason">
<span class="reason-icon">💡</span>
<span>Documentation</span>
</div>
</li>
</ul>
</div>
<div class="split-card host">
<h3><span>🌐</span> On Hosting Server Only</h3>
<p style="color: var(--text-secondary); margin-bottom: 20px;">
WordPress core, third-party code, and dynamic data
</p>
<ul class="item-list">
<li>
<div class="item-title">❌ /wp-admin/</div>
<div class="item-reason">
<span class="reason-icon">🔧</span>
<span>WordPress core system</span>
</div>
</li>
<li>
<div class="item-title">❌ /wp-includes/</div>
<div class="item-reason">
<span class="reason-icon">📚</span>
<span>Core libraries</span>
</div>
</li>
<li>
<div class="item-title">❌ /wp-content/uploads/</div>
<div class="item-reason">
<span class="reason-icon">🖼️</span>
<span>User media files</span>
</div>
</li>
<li>
<div class="item-title">❌ Vendor Plugins</div>
<div class="item-reason">
<span class="reason-icon">🔌</span>
<span>Third-party code</span>
</div>
</li>
<li>
<div class="item-title">❌ wp-config.php</div>
<div class="item-reason">
<span class="reason-icon">🔐</span>
<span>Secrets & config</span>
</div>
</li>
<li>
<div class="item-title">❌ Database</div>
<div class="item-reason">
<span class="reason-icon">💾</span>
<span>Dynamic runtime data</span>
</div>
</li>
</ul>
</div>
</div>
</section>
<!-- Detailed Breakdown of Exclusions -->
<section>
<h2 class="section-title">🔍 Why Exclude These 6 Items?</h2>
<div class="card">
<p style="font-size: 1.1rem; color: var(--text-secondary); margin-bottom: 30px;">
Let's dive deep into each excluded item and understand the reasoning behind keeping them out of GitHub:
</p>
</div>
<div class="exclusion-grid">
<div class="exclusion-card">
<div class="exclusion-number">1</div>
<div style="font-size: 3rem; margin-bottom: 15px;">🏛️</div>
<div class="exclusion-path">/wp-admin/</div>
<p style="color: var(--text-secondary); margin: 15px 0;">
The WordPress administration dashboard and all its core files.
</p>
<div class="exclusion-why">
<strong>Why Exclude?</strong>
<p>WordPress core system files maintained by WordPress.org. These update frequently, contain thousands of files you don't own, and are identical across all WordPress installations. Including them bloats your repo and causes merge conflicts.</p>
</div>
</div>
<div class="exclusion-card">
<div class="exclusion-number">2</div>
<div style="font-size: 3rem; margin-bottom: 15px;">📚</div>
<div class="exclusion-path">/wp-includes/</div>
<p style="color: var(--text-secondary); margin: 15px 0;">
Core WordPress libraries, functions, and classes that power WordPress.
</p>
<div class="exclusion-why">
<strong>Why Exclude?</strong>
<p>WordPress core libraries that provide essential functionality. These are maintained by the WordPress team, updated with security patches, and should never be modified. They're automatically present in any WordPress installation.</p>
</div>
</div>
<div class="exclusion-card">
<div class="exclusion-number">3</div>
<div style="font-size: 3rem; margin-bottom: 15px;">🖼️</div>
<div class="exclusion-path">/wp-content/uploads/</div>
<p style="color: var(--text-secondary); margin: 15px 0;">
User-uploaded media files: images, videos, PDFs, and documents.
</p>
<div class="exclusion-why">
<strong>Why Exclude?</strong>
<p>User-generated media files that are often gigabytes in size. These are environment-specific (different on dev/staging/production), change constantly, and would make your repository massive. Use separate backup solutions for media.</p>
</div>
</div>
<div class="exclusion-card">
<div class="exclusion-number">4</div>
<div style="font-size: 3rem; margin-bottom: 15px;">🔌</div>
<div class="exclusion-path">Vendor Plugins</div>
<p style="color: var(--text-secondary); margin: 15px 0;">
Third-party plugins like WooCommerce, Yoast SEO, Contact Form 7, etc.
</p>
<div class="exclusion-why">
<strong>Why Exclude?</strong>
<p>Third-party managed code from WordPress.org or commercial sources. These plugins have their own version control, update independently, and shouldn't be modified. Document required plugins in a README or composer.json instead.</p>
</div>
</div>
<div class="exclusion-card">
<div class="exclusion-number">5</div>
<div style="font-size: 3rem; margin-bottom: 15px;">🔐</div>
<div class="exclusion-path">wp-config.php</div>
<p style="color: var(--text-secondary); margin: 15px 0;">
WordPress configuration file containing database credentials and security keys.
</p>
<div class="exclusion-why">
<strong>Why Exclude?</strong>
<p>Contains sensitive secrets (database passwords, security salts) and environment-specific configuration. Committing this exposes credentials and causes conflicts between dev/staging/production. Use environment variables or wp-config-sample.php as a template.</p>
</div>
</div>
<div class="exclusion-card">
<div class="exclusion-number">6</div>
<div style="font-size: 3rem; margin-bottom: 15px;">💾</div>
<div class="exclusion-path">Database</div>
<p style="color: var(--text-secondary); margin: 15px 0;">
MySQL database containing posts, pages, settings, and all dynamic content.
</p>
<div class="exclusion-why">
<strong>Why Exclude?</strong>
<p>Dynamic runtime data that changes constantly with every page view, comment, or edit. Databases are binary files that don't work well with Git's text-based version control. Use database migration tools or SQL dumps for specific purposes instead.</p>
</div>
</div>
</div>
</section>
<!-- Code Example: .gitignore -->
<section>
<h2 class="section-title">📝 Perfect .gitignore Configuration</h2>
<div class="card">
<h3>Implementing the Exclusion Strategy</h3>
<p style="color: var(--text-secondary); margin-bottom: 25px;">
Here's a production-ready .gitignore file that implements all the exclusions we discussed:
</p>
<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 Deployment .gitignore</span>
<span class="code-comment"># Exclude these 6 categories from GitHub</span>
<span class="code-comment"># 1. WordPress Core - /wp-admin/</span>
<span class="code-exclude">/wp-admin/</span>
<span class="code-comment"># Reason: WordPress core system files</span>
<span class="code-comment"># 2. WordPress Core - /wp-includes/</span>
<span class="code-exclude">/wp-includes/</span>
<span class="code-comment"># Reason: WordPress core libraries</span>
<span class="code-comment"># 3. User Uploads - /wp-content/uploads/</span>
<span class="code-exclude">/wp-content/uploads/</span>
<span class="code-comment"># Reason: User-generated media files</span>
<span class="code-comment"># 4. Vendor Plugins - Third-party code</span>
<span class="code-exclude">/wp-content/plugins/*</span>
<span class="code-include">!/wp-content/plugins/your-custom-plugin/</span>
<span class="code-comment"># Reason: Third-party managed code</span>
<span class="code-comment"># Note: Use ! to include YOUR custom plugins</span>
<span class="code-comment"># 5. Configuration - wp-config.php</span>
<span class="code-exclude">wp-config.php</span>
<span class="code-exclude">.env</span>
<span class="code-exclude">.env.local</span>
<span class="code-comment"># Reason: Secrets & environment config</span>
<span class="code-comment"># 6. Database - *.sql files</span>
<span class="code-exclude">*.sql</span>
<span class="code-exclude">*.sql.gz</span>
<span class="code-comment"># Reason: Dynamic runtime data</span>
<span class="code-comment"># Additional WordPress files to exclude</span>
<span class="code-exclude">/wp-*.php</span>
<span class="code-exclude">/xmlrpc.php</span>
<span class="code-exclude">/readme.html</span>
<span class="code-exclude">/license.txt</span>
<span class="code-comment"># Exclude all themes except your custom theme</span>
<span class="code-exclude">/wp-content/themes/*</span>
<span class="code-include">!/wp-content/themes/your-custom-theme/</span>
<span class="code-comment"># Cache and temporary files</span>
<span class="code-exclude">/wp-content/cache/</span>
<span class="code-exclude">/wp-content/backup*/</span>
<span class="code-exclude">/wp-content/upgrade/</span>
<span class="code-comment"># Development dependencies</span>
<span class="code-exclude">node_modules/</span>
<span class="code-exclude">vendor/</span>
<span class="code-comment"># OS and IDE files</span>
<span class="code-exclude">.DS_Store</span>
<span class="code-exclude">Thumbs.db</span>
<span class="code-exclude">.idea/</span>
<span class="code-exclude">.vscode/</span>
<span class="code-comment"># Logs</span>
<span class="code-exclude">*.log</span>
<span class="code-exclude">error_log</span>
<span class="code-exclude">debug.log</span></code></pre>
</div>
<div class="alert alert-success">
<span class="alert-icon">✅</span>
<div>
<strong>Pro Setup:</strong> Save this as <code>.gitignore</code> in your WordPress root directory. Update the custom theme/plugin names to match your project. This configuration follows industry best practices!
</div>
</div>
</div>
</section>
<!-- How It Works: Deployment Flow -->
<section>
<h2 class="section-title">⚙️ How Deployment Works</h2>
<div class="card">
<h3>The Complete Deployment Workflow</h3>
<p style="color: var(--text-secondary); margin-bottom: 30px;">
Understanding how your code travels from development to production:
</p>
<div class="accordion-item">
<div class="accordion-header" onclick="toggleAccordion(this)">
<h4>Step 1: Local Development 💻</h4>
<span class="accordion-icon">▼</span>
</div>
<div class="accordion-content">
<div class="accordion-body">
<p style="margin-bottom: 15px;">You develop your custom WordPress theme and plugins on your local machine using tools like Local WP, XAMPP, or Laragon.</p>
<div class="alert alert-info">
<span class="alert-icon">💡</span>
<div>
<strong>What's Happening:</strong> You have a complete WordPress installation locally, including core files, third-party plugins, and your custom code. But you'll only commit YOUR custom code to Git!
</div>
</div>
</div>
</div>
</div>
<div class="accordion-item">
<div class="accordion-header" onclick="toggleAccordion(this)">
<h4>Step 2: Commit to GitHub 📤</h4>
<span class="accordion-icon">▼</span>
</div>
<div class="accordion-content">
<div class="accordion-body">
<p style="margin-bottom: 15px;">You commit only your custom theme, custom plugins, and custom MU-plugins to GitHub. The .gitignore file ensures WordPress core, vendor plugins, uploads, config, and database are excluded.</p>
<div class="code-block" style="margin-top: 20px;">
<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('git-commands')">
<span>📋</span>
<span>Copy</span>
</button>
</div>
<pre><code id="git-commands"><span class="code-comment"># Initialize Git repository</span>
git init
<span class="code-comment"># Add .gitignore file</span>
git add .gitignore
<span class="code-comment"># Add only your custom code</span>
git add wp-content/themes/your-custom-theme/
git add wp-content/plugins/your-custom-plugin/
git add wp-content/mu-plugins/
<span class="code-comment"># Commit changes</span>
git commit -m <span class="code-string">"Initial commit: Custom theme and plugins"</span>
<span class="code-comment"># Push to GitHub</span>
git remote add origin https://github.com/yourusername/your-repo.git
git push -u origin main</code></pre>
</div>
</div>
</div>
</div>
<div class="accordion-item">
<div class="accordion-header" onclick="toggleAccordion(this)">
<h4>Step 3: Hosting Server Setup 🌐</h4>
<span class="accordion-icon">▼</span>
</div>
<div class="accordion-content">
<div class="accordion-body">
<p style="margin-bottom: 15px;">On your hosting server (Hostinger, WordPress.com, etc.), WordPress core is already installed. You'll deploy your custom code from GitHub to the appropriate directories.</p>
<div class="alert alert-tip">
<span class="alert-icon">🚀</span>
<div>
<strong>Deployment Options:</strong>
<ul style="margin-top: 10px; padding-left: 20px;">
<li>Manual: FTP/SFTP your custom files</li>
<li>Git: Clone your repo and copy custom folders</li>
<li>CI/CD: Automated deployment with GitHub Actions</li>
<li>Managed: Use hosting provider's Git integration</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="accordion-item">
<div class="accordion-header" onclick="toggleAccordion(this)">
<h4>Step 4: Install Dependencies 📦</h4>
<span class="accordion-icon">▼</span>
</div>
<div class="accordion-content">
<div class="accordion-body">
<p style="margin-bottom: 15px;">On the hosting server, you manually install the required third-party plugins through the WordPress admin panel or via WP-CLI.</p>
<div class="code-block" style="margin-top: 20px;">
<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('wp-cli-commands')">
<span>📋</span>
<span>Copy</span>
</button>
</div>
<pre><code id="wp-cli-commands"><span class="code-comment"># Install required plugins via WP-CLI</span>
wp plugin install woocommerce --activate
wp plugin install contact-form-7 --activate
wp plugin install yoast-seo --activate
<span class="code-comment"># Or document in README.md:</span>
<span class="code-comment"># Required Plugins:</span>
<span class="code-comment"># - WooCommerce 8.0+</span>
<span class="code-comment"># - Contact Form 7 5.8+</span>
<span class="code-comment"># - Yoast SEO 21.0+</span></code></pre>
</div>
</div>
</div>
</div>
<div class="accordion-item">
<div class="accordion-header" onclick="toggleAccordion(this)">
<h4>Step 5: Configure Environment 🔧</h4>
<span class="accordion-icon">▼</span>
</div>
<div class="accordion-content">
<div class="accordion-body">
<p style="margin-bottom: 15px;">Create or update wp-config.php on the server with production database credentials and security keys. Never commit this file to Git!</p>
<div class="alert alert-warning">
<span class="alert-icon">⚠️</span>
<div>
<strong>Security Critical:</strong> wp-config.php contains sensitive information. Each environment (dev, staging, production) should have its own wp-config.php with unique credentials and security salts. Use environment variables or a wp-config-sample.php template.
</div>
</div>
</div>
</div>
</div>
<div class="accordion-item">
<div class="accordion-header" onclick="toggleAccordion(this)">
<h4>Step 6: Database Migration 💾</h4>
<span class="accordion-icon">▼</span>
</div>
<div class="accordion-content">
<div class="accordion-body">
<p style="margin-bottom: 15px;">If moving from local to production, export your local database, perform search-replace for URLs, and import to the production database.</p>
<div class="alert alert-info">
<span class="alert-icon">🔄</span>
<div>
<strong>Database Tools:</strong>
<ul style="margin-top: 10px; padding-left: 20px;">
<li><strong>WP Migrate DB:</strong> Plugin for database migration</li>
<li><strong>WP-CLI:</strong> Command-line search-replace</li>
<li><strong>Duplicator:</strong> Full site migration</li>
<li><strong>All-in-One WP Migration:</strong> Easy drag-and-drop</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Common Mistakes -->
<section>
<h2 class="section-title">❌ Common Deployment Mistakes</h2>
<div class="card">
<div class="accordion-item">
<div class="accordion-header" onclick="toggleAccordion(this)">
<h4>1. Committing wp-config.php with Passwords</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 Danger:</strong> Exposing database credentials, API keys, and security salts in a public repository is a critical security vulnerability. Attackers can access your database and compromise your entire site!
</div>
</div>
<div class="alert alert-success" style="margin-top: 15px;">
<span class="alert-icon">✅</span>
<div>
<strong>The Fix:</strong> Always add wp-config.php to .gitignore. Use environment variables or create a wp-config-sample.php template without real credentials. Each environment should have its own wp-config.php created manually.
</div>
</div>
</div>
</div>
</div>
<div class="accordion-item">
<div class="accordion-header" onclick="toggleAccordion(this)">
<h4>2. Including Uploads Folder in Git</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> The uploads folder can contain gigabytes of images, videos, and documents. Including it makes your repository massive, slow to clone, and wastes storage. Plus, media is environment-specific!
</div>
</div>
<div class="alert alert-success" style="margin-top: 15px;">
<span class="alert-icon">✅</span>
<div>
<strong>The Fix:</strong> Exclude /wp-content/uploads/ in .gitignore. Use separate backup solutions for media (hosting backups, cloud storage, or dedicated media management tools). Sync media between environments using rsync or cloud storage.
</div>
</div>
</div>
</div>
</div>
<div class="accordion-item">
<div class="accordion-header" onclick="toggleAccordion(this)">
<h4>3. Committing 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> Including plugins like WooCommerce, Yoast, or Contact Form 7 adds thousands of files you don't maintain. When they update, you get massive diffs that obscure your actual changes and create merge conflicts.
</div>
</div>
<div class="alert alert-success" style="margin-top: 15px;">
<span class="alert-icon">✅</span>
<div>
<strong>The Fix:</strong> Exclude all plugins except YOUR custom ones. Document required plugins in README.md with versions. Use Composer or WP-CLI to install them on each environment. Only commit plugins YOU developed!
</div>
</div>
</div>
</div>
</div>
<div class="accordion-item">
<div class="accordion-header" onclick="toggleAccordion(this)">
<h4>4. 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> WordPress core (/wp-admin/, /wp-includes/, core PHP files) contains 1000+ files that update frequently. Including them bloats your repo, causes conflicts, and makes it impossible to update WordPress cleanly.
</div>
</div>
<div class="alert alert-success" style="margin-top: 15px;">
<span class="alert-icon">✅</span>
<div>
<strong>The Fix:</strong> Exclude all WordPress core directories and files. Document the WordPress version in README.md. WordPress core is already on your hosting server and can be updated independently through the admin panel or WP-CLI.
</div>
</div>
</div>
</div>
</div>
<div class="accordion-item">
<div class="accordion-header" onclick="toggleAccordion(this)">
<h4>5. Trying to Version Control the Database</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> Databases are binary files that change constantly. Git is designed for text files. Committing .sql files creates huge diffs, doesn't track changes meaningfully, and causes conflicts between environments.
</div>
</div>
<div class="alert alert-success" style="margin-top: 15px;">
<span class="alert-icon">✅</span>
<div>
<strong>The Fix:</strong> Never commit database files to Git. Use database migration tools (WP Migrate DB, Duplicator) for moving data between environments. Use version control for database schema changes through migration scripts or plugins.
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Pro Tips -->
<section>
<h2 class="section-title">🚀 Pro Deployment Tips</h2>
<div class="card">
<div class="alert alert-tip">
<span class="alert-icon">💡</span>
<div>
<strong>Document Everything:</strong> Create a comprehensive README.md that lists required WordPress version, PHP version, required plugins with versions, server requirements, and setup instructions. Future you (and your team) will thank you!
</div>
</div>
<div class="alert alert-tip">
Live Preview