localwp.com/
📦 WordPress
✨ The Prompt Phrase
localwp.com
💻 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>localwp.com - 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;
--local-green: #7fba00;
--text-primary: #f1f5f9;
--text-secondary: #94a3b8;
--text-muted: #64748b;
--gradient-hero: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #7fba00 100%);
--gradient-local: linear-gradient(135deg, #7fba00 0%, #5d8a00 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: 4rem;
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); }
}
.url-box {
display: inline-block;
background: rgba(0, 0, 0, 0.4);
backdrop-filter: blur(10px);
padding: 25px 50px;
border-radius: 20px;
font-family: 'Fira Code', monospace;
font-size: 2rem;
color: white;
margin: 30px 0;
border: 2px solid rgba(255, 255, 255, 0.3);
box-shadow: var(--shadow-lg);
animation: glow 2s ease-in-out infinite;
}
@keyframes glow {
0%, 100% { box-shadow: 0 0 20px rgba(255, 255, 255, 0.3); }
50% { box-shadow: 0 0 40px rgba(255, 255, 255, 0.6); }
}
.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(--local-green);
transform: translateY(-10px) scale(1.02);
box-shadow: 0 20px 40px rgba(127, 186, 0, 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;
}
.steps-container {
counter-reset: step;
}
.step {
background: var(--bg-card);
border-radius: 20px;
padding: 35px;
margin: 25px 0;
position: relative;
padding-left: 120px;
transition: all 0.3s ease;
border-left: 5px solid var(--local-green);
}
.step:hover {
background: var(--bg-card-hover);
transform: translateX(10px);
}
.step::before {
counter-increment: step;
content: counter(step);
position: absolute;
left: 30px;
top: 50%;
transform: translateY(-50%);
width: 70px;
height: 70px;
background: var(--gradient-local);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 2rem;
font-weight: 900;
color: white;
box-shadow: 0 10px 30px rgba(127, 186, 0, 0.4);
}
.step h4 {
color: var(--accent-cyan);
font-size: 1.5rem;
margin-bottom: 12px;
}
.step p {
color: var(--text-secondary);
font-size: 1.05rem;
}
.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(--local-green);
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-url { color: #4ec9b0; font-weight: 600; }
.code-local { color: #7fba00; font-weight: 700; }
.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(127, 186, 0, 0.1);
}
.tab.active {
color: var(--local-green);
background: rgba(127, 186, 0, 0.2);
}
.tab.active::after {
content: '';
position: absolute;
bottom: -12px;
left: 0;
right: 0;
height: 3px;
background: var(--gradient-local);
}
.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); }
}
.demo-container {
background: var(--bg-card);
border-radius: 20px;
padding: 40px;
margin: 30px 0;
}
.app-mockup {
background: linear-gradient(135deg, #2d3748 0%, #1a202c 100%);
border-radius: 20px;
overflow: hidden;
margin: 30px 0;
box-shadow: var(--shadow-lg);
border: 1px solid rgba(255, 255, 255, 0.1);
}
.app-header {
background: #1a202c;
padding: 20px;
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.app-logo {
display: flex;
align-items: center;
gap: 12px;
font-size: 1.3rem;
font-weight: 700;
color: var(--local-green);
}
.app-content {
padding: 30px;
}
.site-card {
background: rgba(255, 255, 255, 0.05);
border-radius: 12px;
padding: 20px;
margin: 15px 0;
border: 1px solid rgba(255, 255, 255, 0.1);
transition: all 0.3s ease;
}
.site-card:hover {
background: rgba(255, 255, 255, 0.08);
transform: translateX(5px);
}
.site-name {
font-size: 1.2rem;
font-weight: 600;
color: var(--text-primary);
margin-bottom: 8px;
}
.site-url {
color: var(--local-green);
font-family: 'Fira Code', monospace;
font-size: 0.95rem;
}
.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(--local-green);
}
.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(--local-green);
}
.accordion-icon.active {
transform: rotate(180deg);
}
.accordion-content {
max-height: 0;
overflow: hidden;
transition: max-height 0.4s ease;
}
.accordion-content.active {
max-height: 1000px;
}
.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(127, 186, 0, 0.1);
border-color: var(--local-green);
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(--local-green);
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(--local-green);
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-local);
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-local);
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(250px, 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-local);
border-radius: 25px;
font-size: 0.9rem;
font-weight: 700;
margin: 8px;
box-shadow: 0 5px 15px rgba(127, 186, 0, 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(--local-green);
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(--local-green);
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(--local-green);
}
@media (max-width: 768px) {
.hero h1 { font-size: 2.5rem; }
.url-box { font-size: 1.3rem; padding: 20px 30px; }
.section-title { font-size: 2rem; }
.card { padding: 25px; }
.step { padding-left: 100px; }
.step::before { width: 60px; height: 60px; font-size: 1.5rem; left: 20px; }
.feature-grid { grid-template-columns: 1fr; }
.cheat-grid { grid-template-columns: 1fr; }
.tabs { justify-content: center; }
}
::-webkit-scrollbar {
width: 12px;
}
::-webkit-scrollbar-track {
background: var(--bg-darker);
}
::-webkit-scrollbar-thumb {
background: var(--local-green);
border-radius: 6px;
}
::-webkit-scrollbar-thumb:hover {
background: var(--accent-green);
}
</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>Local by Flywheel</h1>
<div class="url-box">localwp.com</div>
<p class="hero-subtitle">The Modern Way to Build WordPress Sites Locally! 🚀</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 Is Local WP?</h2>
<div class="card">
<h3>Your WordPress Development Superpower</h3>
<p style="font-size: 1.2rem; margin-bottom: 25px;">
<strong>LocalWP.com</strong> (formerly known as "Local by Flywheel") is a <span class="tooltip" data-tooltip="Free desktop application for Mac, Windows, and Linux">powerful free tool</span> that lets you create and manage WordPress websites on your own computer in seconds! It's like having a complete web server in your pocket—no hosting, no internet connection required! ⚡
</p>
<p style="margin-bottom: 20px;">
Imagine being able to build, test, and perfect WordPress sites on an airplane, in a coffee shop, or anywhere else—completely offline. That's the magic of Local WP! It's the #1 choice for WordPress developers, designers, and agencies worldwide.
</p>
<div class="alert alert-info">
<span class="alert-icon">💡</span>
<div>
<strong>Fun Fact:</strong> Local WP is developed by WP Engine (a leading WordPress hosting company) and is used by over 1 million developers worldwide. It's completely FREE and packed with professional features!
</div>
</div>
</div>
</section>
<!-- Why Use It Section -->
<section>
<h2 class="section-title">✨ Why Developers Love Local WP</h2>
<div class="feature-grid">
<div class="feature-item">
<span class="feature-icon">⚡</span>
<h3 class="feature-title">One-Click Setup</h3>
<p class="feature-desc">Create a new WordPress site in under 60 seconds with zero configuration!</p>
</div>
<div class="feature-item">
<span class="feature-icon">🎨</span>
<h3 class="feature-title">Beautiful Interface</h3>
<p class="feature-desc">Modern, intuitive UI that makes local development actually enjoyable!</p>
</div>
<div class="feature-item">
<span class="feature-icon">🔧</span>
<h3 class="feature-title">Advanced Tools</h3>
<p class="feature-desc">Built-in SSL, email testing, WP-CLI, and database management!</p>
</div>
<div class="feature-item">
<span class="feature-icon">🌐</span>
<h3 class="feature-title">Live Links</h3>
<p class="feature-desc">Share your local site with clients instantly using secure shareable URLs!</p>
</div>
<div class="feature-item">
<span class="feature-icon">🔄</span>
<h3 class="feature-title">Easy Migration</h3>
<p class="feature-desc">Push and pull sites from live servers with built-in deployment tools!</p>
</div>
<div class="feature-item">
<span class="feature-icon">💯</span>
<h3 class="feature-title">100% Free</h3>
<p class="feature-desc">All features completely free forever—no hidden costs or limitations!</p>
</div>
</div>
</section>
<!-- How It Works Section -->
<section>
<h2 class="section-title">⚙️ How Does Local WP Work?</h2>
<div class="card">
<div class="steps-container">
<div class="step">
<h4>Download & Install</h4>
<p>Visit localwp.com and download the free app for Mac, Windows, or Linux. Installation takes just a few minutes! 📥</p>
</div>
<div class="step">
<h4>Create Your First Site</h4>
<p>Click the big "+" button, name your site, and Local WP automatically sets up WordPress, PHP, MySQL, and a web server—all configured perfectly!</p>
</div>
<div class="step">
<h4>Choose Your Environment</h4>
<p>Select your preferred PHP version, web server (Nginx or Apache), and MySQL version. Or just use the smart defaults!</p>
</div>
<div class="step">
<h4>Start Building</h4>
<p>Access your site via a custom .local domain, install themes and plugins, and develop without limits—all on your computer!</p>
</div>
<div class="step">
<h4>Use Pro Tools</h4>
<p>Enable SSL with one click, test emails, access the database with Adminer, and use WP-CLI for advanced operations!</p>
</div>
<div class="step">
<h4>Deploy When Ready</h4>
<p>Export your site or use the Connect feature to push directly to WP Engine, Flywheel, or any hosting provider! 🚀</p>
</div>
</div>
</div>
</section>
<!-- Demo Section -->
<section>
<h2 class="section-title">🎮 Visual Demo</h2>
<div class="demo-container">
<h3 style="text-align: center; color: var(--local-green); margin-bottom: 30px; font-size: 2rem;">
Inside the Local WP Interface
</h3>
<div class="app-mockup">
<div class="app-header">
<div class="app-logo">
<span>⚡</span>
<span>Local</span>
</div>
<div style="display: flex; gap: 15px;">
<button style="background: var(--local-green); color: white; border: none; padding: 8px 20px; border-radius: 8px; font-weight: 600; cursor: pointer;">+ Add Site</button>
</div>
</div>
<div class="app-content">
<div class="site-card">
<div class="site-name">🎨 My Portfolio</div>
<div class="site-url">http://myportfolio.local</div>
<div style="margin-top: 12px; display: flex; gap: 10px; flex-wrap: wrap;">
<span style="background: rgba(127, 186, 0, 0.2); color: var(--local-green); padding: 4px 12px; border-radius: 6px; font-size: 0.85rem; font-weight: 600;">Running</span>
<span style="background: rgba(59, 130, 246, 0.2); color: var(--accent-blue); padding: 4px 12px; border-radius: 6px; font-size: 0.85rem;">PHP 8.1</span>
<span style="background: rgba(168, 85, 247, 0.2); color: var(--accent-purple); padding: 4px 12px; border-radius: 6px; font-size: 0.85rem;">SSL Enabled</span>
</div>
</div>
<div class="site-card">
<div class="site-name">🛒 E-commerce Store</div>
<div class="site-url">http://mystore.local</div>
<div style="margin-top: 12px; display: flex; gap: 10px; flex-wrap: wrap;">
<span style="background: rgba(100, 100, 100, 0.2); color: var(--text-secondary); padding: 4px 12px; border-radius: 6px; font-size: 0.85rem; font-weight: 600;">Stopped</span>
<span style="background: rgba(59, 130, 246, 0.2); color: var(--accent-blue); padding: 4px 12px; border-radius: 6px; font-size: 0.85rem;">PHP 7.4</span>
</div>
</div>
<div class="site-card">
<div class="site-name">📝 Blog Project</div>
<div class="site-url">http://myblog.local</div>
<div style="margin-top: 12px; display: flex; gap: 10px; flex-wrap: wrap;">
<span style="background: rgba(127, 186, 0, 0.2); color: var(--local-green); padding: 4px 12px; border-radius: 6px; font-size: 0.85rem; font-weight: 600;">Running</span>
<span style="background: rgba(59, 130, 246, 0.2); color: var(--accent-blue); padding: 4px 12px; border-radius: 6px; font-size: 0.85rem;">PHP 8.2</span>
</div>
</div>
</div>
</div>
<div class="alert alert-success" style="margin-top: 30px;">
<span class="alert-icon">✅</span>
<div>
<strong>Multiple Sites, Zero Hassle:</strong> Manage unlimited WordPress sites, each with its own PHP version, database, and configuration. Switch between them instantly!
</div>
</div>
</div>
</section>
<!-- Code Examples Section -->
<section>
<h2 class="section-title">💻 Technical Features</h2>
<div class="card">
<div class="tabs">
<button class="tab active" onclick="switchTab('setup')">Quick Setup</button>
<button class="tab" onclick="switchTab('ssl')">SSL Configuration</button>
<button class="tab" onclick="switchTab('cli')">WP-CLI Access</button>
<button class="tab" onclick="switchTab('share')">Live Link Sharing</button>
</div>
<div id="setup" class="tab-content active">
<h3 style="color: var(--accent-cyan); margin-bottom: 20px;">Creating Your First Site</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('setup-code')">
<span>📋</span>
<span>Copy</span>
</button>
</div>
<pre><code id="setup-code"><span class="code-comment"># Step 1: Launch Local WP application</span>
<span class="code-comment"># Step 2: Click the "+" button to create new site</span>
<span class="code-comment"># Step 3: Enter site details:</span>
Site Name: <span class="code-string">"My Awesome Site"</span>
Domain: <span class="code-url">myawesomesite.local</span>
<span class="code-comment"># Step 4: Choose environment (or use defaults):</span>
PHP Version: <span class="code-string">8.1.9</span>
Web Server: <span class="code-string">nginx</span>
MySQL Version: <span class="code-string">8.0.16</span>
<span class="code-comment"># Step 5: Set WordPress admin credentials:</span>
Username: <span class="code-string">admin</span>
Password: <span class="code-string">your-secure-password</span>
Email: <span class="code-string">your@email.com</span>
<span class="code-comment"># Step 6: Click "Add Site" and wait ~60 seconds!</span>
<span class="code-comment"># Your site is ready at:</span>
<span class="code-url">https://myawesomesite.local</span>
<span class="code-url">https://myawesomesite.local/wp-admin</span></code></pre>
</div>
<div class="alert alert-tip">
<span class="alert-icon">💡</span>
<div>
<strong>Pro Tip:</strong> Use descriptive site names! Instead of "test1", try "client-redesign" or "portfolio-v2" for better organization.
</div>
</div>
</div>
<div id="ssl" class="tab-content">
<h3 style="color: var(--accent-cyan); margin-bottom: 20px;">Enabling SSL (HTTPS)</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('ssl-code')">
<span>📋</span>
<span>Copy</span>
</button>
</div>
<pre><code id="ssl-code"><span class="code-comment"># Enable SSL with one click in Local WP:</span>
<span class="code-comment"># Step 1: Open your site in Local</span>
<span class="code-comment"># Step 2: Go to "SSL" tab</span>
<span class="code-comment"># Step 3: Click "Trust" button</span>
<span class="code-comment"># Local automatically:</span>
<span class="code-comment"># ✓ Generates SSL certificate</span>
<span class="code-comment"># ✓ Installs it in your system</span>
<span class="code-comment"># ✓ Configures WordPress for HTTPS</span>
<span class="code-comment"># ✓ Updates all URLs in database</span>
<span class="code-comment"># Your site now runs on:</span>
<span class="code-url">https://mysite.local</span> <span class="code-comment"># Secure!</span>
<span class="code-comment"># Why SSL matters for local development:</span>
<span class="code-comment"># - Test secure features (geolocation, camera, etc.)</span>
<span class="code-comment"># - Match production environment</span>
<span class="code-comment"># - Avoid mixed content warnings</span>
<span class="code-comment"># - Test payment gateways properly</span>
<span class="code-comment"># Certificate details:</span>
Issuer: <span class="code-string">Local by Flywheel</span>
Valid for: <span class="code-string">825 days</span>
Encryption: <span class="code-string">SHA-256 with RSA</span></code></pre>
</div>
<div class="alert alert-info">
<span class="alert-icon">🔒</span>
<div>
<strong>Security Note:</strong> Local's SSL certificates are self-signed and only valid on your computer. They're perfect for development but not for production sites!
</div>
</div>
</div>
<div id="cli" class="tab-content">
<h3 style="color: var(--accent-cyan); margin-bottom: 20px;">Using WP-CLI</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('cli-code')">
<span>📋</span>
<span>Copy</span>
</button>
</div>
<pre><code id="cli-code"><span class="code-comment"># Access WP-CLI in Local:</span>
<span class="code-comment"># Right-click site → "Open Site Shell"</span>
<span class="code-comment"># Common WP-CLI commands:</span>
<span class="code-comment"># Check WordPress version</span>
wp core version
<span class="code-comment"># Install a plugin</span>
wp plugin install contact-form-7 --activate
<span class="code-comment"># Update all plugins</span>
wp plugin update --all
<span class="code-comment"># Create a new user</span>
wp user create john john@example.com --role=editor
<span class="code-comment"># Search and replace in database</span>
wp search-replace <span class="code-string">'oldsite.com'</span> <span class="code-string">'newsite.local'</span>
<span class="code-comment"># Export database</span>
wp db export backup.sql
<span class="code-comment"># Import database</span>
wp db import backup.sql
<span class="code-comment"># Flush rewrite rules</span>
wp rewrite flush
<span class="code-comment"># Generate dummy content</span>
wp post generate --count=50
<span class="code-comment"># Check site health</span>
wp site health status</code></pre>
</div>
<div class="alert alert-tip">
<span class="alert-icon">⚡</span>
<div>
<strong>Power User Tip:</strong> WP-CLI is incredibly powerful! You can automate almost any WordPress task. Learn more at wp-cli.org
</div>
</div>
</div>
<div id="share" class="tab-content">
<h3 style="color: var(--accent-cyan); margin-bottom: 20px;">Live Link Sharing</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('share-code')">
<span>📋</span>
<span>Copy</span>
</button>
</div>
<pre><code id="share-code"><span class="code-comment"># Share your local site with clients/team:</span>
<span class="code-comment"># Step 1: Open site in Local WP</span>
<span class="code-comment"># Step 2: Click "Enable Live Link" button</span>
<span class="code-comment"># Step 3: Get shareable URL like:</span>
<span class="code-url">https://abc123xyz.localwp.com</span>
<span class="code-comment"># Features of Live Links:</span>
<span class="code-comment"># ✓ Secure HTTPS connection</span>
<span class="code-comment"># ✓ Password protection available</span>
<span class="code-comment"># ✓ Works from anywhere in the world</span>
<span class="code-comment"># ✓ Updates in real-time as you develop</span>
<span class="code-comment"># ✓ Expires after 24 hours (can extend)</span>
<span class="code-comment"># Perfect for:</span>
<span class="code-comment"># - Client previews</span>
<span class="code-comment"># - Team collaboration</span>
<span class="code-comment"># - Mobile device testing</span>
<span class="code-comment"># - Quick demos</span>
<span class="code-comment"># Security options:</span>
Password: <span class="code-string">your-custom-password</span>
Expiration: <span class="code-string">24 hours (or custom)</span>
Access logs: <span class="code-string">View who accessed</span>
<span class="code-comment"># Stop sharing anytime:</span>
<span class="code-comment"># Click "Disable Live Link" to revoke access</span></code></pre>
</div>
<div class="alert alert-success">
<span class="alert-icon">🌐</span>
<div>
<strong>Game Changer:</strong> Live Links eliminate the need for staging servers during development. Show work-in-progress to clients without deploying!
</div>
</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. Not Starting the Site Before Accessing</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> Trying to access your site URL when the site is stopped results in "This site can't be reached" errors.
</div>
</div>
<div class="alert alert-success" style="margin-top: 15px;">
<span class="alert-icon">✅</span>
<div>
<strong>The Solution:</strong> Always click the "Start Site" button in Local before accessing your site. Look for the green "Running" status indicator!
</div>
</div>
</div>
</div>
</div>
<div class="accordion-item">
<div class="accordion-header" onclick="toggleAccordion(this)">
<h4>2. Using Same Site Name Twice</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> Creating multiple sites with the same domain name causes conflicts and routing issues.
</div>
</div>
<div class="alert alert-success" style="margin-top: 15px;">
<span class="alert-icon">✅</span>
<div>
<strong>The Solution:</strong> Use unique, descriptive names for each site. Local will automatically create unique .local domains for you!
</div>
</div>
</div>
</div>
</div>
<div class="accordion-item">
<div class="accordion-header" onclick="toggleAccordion(this)">
<h4>3. Forgetting to Export Before Deleting</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> Deleting a site in Local permanently removes all files and database—there's no undo!
</div>
</div>
<div class="alert alert-success" style="margin-top: 15px;">
<span class="alert-icon">✅</span>
<div>
<strong>The Solution:</strong> Always export your site first! Right-click → Export to create a backup .zip file before deleting anything important.
</div>
</div>
</div>
</div>
</div>
<div class="accordion-item">
<div class="accordion-header" onclick="toggleAccordion(this)">
<h4>4. Mismatched PHP Versions</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> Developing on PHP 8.2 locally but your live server runs PHP 7.4 can cause compatibility issues and errors.
</div>
</div>
<div class="alert alert-success" style="margin-top: 15px;">
<span class="alert-icon">✅</span>
<div>
<strong>The Solution:</strong> Match your Local PHP version to your production server. You can change PHP versions anytime in site settings!
</div>
</div>
</div>
</div>
</div>
<div class="accordion-item">
<div class="accordion-header" onclick="toggleAccordion(this)">
<h4>5. Not Using Version Control</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> Making changes without version control means you can't easily revert mistakes or track what changed.
</div>
</div>
<div class="alert alert-success" style="margin-top: 15px;">
<span class="alert-icon">✅</span>
<div>
<strong>The Solution:</strong> Initialize a Git repository in your theme/plugin folders. Local makes it easy to find your site files—right-click → "Reveal in Finder/Explorer"!
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Pro Tips Section -->
<section>
<h2 class="section-title">🚀 Pro Tips for Power Users</h2>
<div class="card">
<div class="alert alert-tip">
<span class="alert-icon">💡</span>
<div>
<strong>Use Blueprints:</strong> Create site templates with your favorite plugins and themes pre-installed. Save hours on every new project by starting from a blueprint!
</div>
</div>
<div class="alert alert-tip">
<span class="alert-icon">📧</span>
<div>
<strong>Test Emails Locally:</strong> Enable the built-in MailHog feature to capture all outgoing emails. Perfect for testing contact forms and notifications without sending real emails!
</div>
</div>
<div class="alert alert-tip">
<span class="alert-icon">🔍</span>
<div>
<strong>Use Adminer for Database:</strong> Local includes Adminer (better than phpMyAdmin). Access it from the "Database" tab to view, edit, and query your database!
</div>
</div>
<div class="alert alert-tip">
<span class="alert-icon">🎯</span>
<div>
<strong>Keyboard Shortcuts:</strong> Learn Local's shortcuts! Cmd/Ctrl + N for new site, Cmd/Ctrl + O to open site shell, Cmd/Ctrl + W to close tabs. Work faster!
</div>
</div>
<div class="alert alert-tip">
<span class="alert-icon">🔄</span>
<div>
<strong>Connect to WP Engine:</strong> If you host with WP Engine, use the built-in Connect feature to push/pull sites directly—no FTP or manual migration needed!
</div>
</div>
<div class="alert alert-tip">
<span class="alert-icon">🎨</span>
<div>
<strong>Test Across Devices:</strong> Use Live Links to test your local site on real mobile devices, tablets, and different browsers without deploying to staging!
</div>
</div>
</div>
</section>
<!-- Quiz Section -->
<section>
<h2 class="section-title">🎯 Test Your Knowledge!</h2>
<div class="quiz-container">
<div class="quiz-header">
<h3>Interactive Quiz 🧠</h3>
<p style="color: var(--text-secondary); font-size: 1.1rem;">Let's see how much you've learned about Local WP!</p>
</div>
<div class="quiz-question">
<h4>Question 1: What is the main advantage of Local WP?</h4>
<div class="quiz-options">
<div class="quiz-option" onclick="checkAnswer(this, false, 1)">
A) It hosts WordPress sites on the cloud
</div>
<div class="quiz-option" onclick="checkAnswer(this, true, 1)">
B) It lets you develop WordPress sites locally on your computer
</div>
<div class="quiz-option" onclick="checkAnswer(this, false, 1)">
C) It's a WordPress theme builder
</div>
<div class="quiz-option" onclick="checkAnswer(this, false, 1)">
D) It's a backup plugin for WordPress
</div>
</div>
<div class="quiz-feedback" id="feedback1"></div>
</div>
<div class="quiz-question">
<h4>Question 2: What domain extension does Local WP typically use?</h4>
<div class="quiz-options">
<div class="quiz-option" onclick="checkAnswer(this, false, 2)">
A) .dev
</div>
<div class="quiz-option" onclick="checkAnswer(this, true, 2)">
B) .local
</div>
<div class="quiz-option" onclick="checkAnswer(this, false, 2)">
C) .test
</div>
<div class="quiz-option" onclick="checkAnswer(this, false, 2)">
D) .localhost
</div>
</div>
<div class="quiz-feedback" id="feedback2"></div>
</div>
<div class="quiz-question">
<h4>Question 3: What feature allows you to share your local site with others?</h4>
<div class="quiz-options">
<div class="quiz-option" onclick="checkAnswer(this, false, 3)">
A) FTP Upload
</div>
<div class="quiz-option" onclick="checkAnswer(this, false, 3)">
B) Cloud Sync
</div>
<div class="quiz-option" onclick="checkAnswer(this, true, 3)">
C) Live Link
</div>
<div class="quiz-option" onclick="checkAnswer(this, false, 3)">
D) Site Export
</div>
Live Preview