page.php
📦 WordPress
✨ The Prompt Phrase
page.php
💻 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>page.php - Interactive Tutorial</title>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700;800&family=Fira+Code:wght@400;500;600&display=swap" rel="stylesheet">
<style>
:root {
--bg-primary: #0a0e27;
--bg-secondary: #151a35;
--bg-card: #1e2542;
--accent-purple: #a855f7;
--accent-blue: #3b82f6;
--accent-green: #10b981;
--accent-cyan: #06b6d4;
--accent-pink: #ec4899;
--accent-orange: #f59e0b;
--text-primary: #f0f6fc;
--text-secondary: #c9d1d9;
--text-muted: #8b949e;
--border-color: #30363d;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
font-family: 'Poppins', sans-serif;
background: var(--bg-primary);
color: var(--text-primary);
line-height: 1.6;
overflow-x: hidden;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}
/* Hero Section */
.hero {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
position: relative;
overflow: hidden;
}
.hero::before {
content: '';
position: absolute;
width: 200%;
height: 200%;
background: repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(255,255,255,0.03) 10px, rgba(255,255,255,0.03) 20px);
animation: moveBackground 20s linear infinite;
}
@keyframes moveBackground {
0% { transform: translate(0, 0); }
100% { transform: translate(50px, 50px); }
}
.hero-content {
text-align: center;
z-index: 1;
animation: fadeInUp 1s ease;
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.hero h1 {
font-size: 4rem;
font-weight: 800;
margin-bottom: 20px;
text-shadow: 0 0 40px rgba(0,0,0,0.3);
animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.05); }
}
.hero .code-highlight {
background: rgba(0,0,0,0.5);
padding: 20px 50px;
border-radius: 20px;
font-family: 'Fira Code', monospace;
display: inline-block;
backdrop-filter: blur(10px);
border: 3px solid rgba(255,255,255,0.3);
font-size: 2.5rem;
box-shadow: 0 10px 40px rgba(0,0,0,0.3);
margin: 20px 0;
}
.hero p {
font-size: 1.5rem;
margin-top: 20px;
opacity: 0.95;
font-weight: 300;
}
.scroll-indicator {
position: absolute;
bottom: 30px;
left: 50%;
transform: translateX(-50%);
animation: bounce 2s infinite;
font-size: 2.5rem;
cursor: pointer;
filter: drop-shadow(0 0 10px rgba(255,255,255,0.5));
}
@keyframes bounce {
0%, 20%, 50%, 80%, 100% { transform: translateX(-50%) translateY(0); }
40% { transform: translateX(-50%) translateY(-15px); }
60% { transform: translateX(-50%) translateY(-7px); }
}
/* Progress Bar */
.progress-bar {
position: fixed;
top: 0;
left: 0;
height: 5px;
background: linear-gradient(90deg, var(--accent-purple), var(--accent-blue), var(--accent-green));
z-index: 1000;
transition: width 0.3s ease;
box-shadow: 0 0 20px rgba(168, 85, 247, 0.6);
}
/* Section Styles */
section {
padding: 80px 0;
opacity: 0;
transform: translateY(30px);
transition: all 0.6s ease;
}
section.visible {
opacity: 1;
transform: translateY(0);
}
.section-header {
text-align: center;
margin-bottom: 60px;
}
.section-header h2 {
font-size: 3rem;
background: linear-gradient(135deg, var(--accent-purple), var(--accent-cyan));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
margin-bottom: 15px;
font-weight: 800;
}
.section-header p {
color: var(--text-secondary);
font-size: 1.2rem;
}
/* Card Styles */
.card {
background: var(--bg-card);
border-radius: 20px;
padding: 40px;
margin-bottom: 30px;
border: 1px solid var(--border-color);
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.card::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 4px;
background: linear-gradient(90deg, var(--accent-purple), var(--accent-cyan));
transform: scaleX(0);
transition: transform 0.3s ease;
}
.card:hover::before {
transform: scaleX(1);
}
.card:hover {
transform: translateY(-5px);
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
border-color: var(--accent-purple);
}
.card h3 {
font-size: 1.8rem;
margin-bottom: 20px;
color: var(--accent-purple);
font-weight: 700;
}
.card h4 {
font-size: 1.3rem;
margin-bottom: 10px;
color: var(--accent-cyan);
font-weight: 600;
}
.card ul {
margin-left: 20px;
margin-top: 10px;
}
.card li {
margin-bottom: 10px;
line-height: 1.8;
}
/* Code Block */
.code-block {
background: #0d1117;
border-radius: 15px;
padding: 25px;
margin: 20px 0;
position: relative;
font-family: 'Fira Code', monospace;
overflow-x: auto;
border: 1px solid var(--border-color);
box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}
.code-block .copy-btn {
position: absolute;
top: 15px;
right: 15px;
background: var(--accent-purple);
color: white;
border: none;
padding: 8px 16px;
border-radius: 8px;
cursor: pointer;
font-size: 0.9rem;
transition: all 0.3s ease;
font-family: 'Poppins', sans-serif;
font-weight: 600;
}
.code-block .copy-btn:hover {
background: var(--accent-pink);
transform: scale(1.05);
}
.code-block pre {
margin: 0;
color: #e6edf3;
font-size: 0.95rem;
line-height: 1.6;
}
/* Grid Layout */
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 30px;
margin: 40px 0;
}
.grid-item {
background: var(--bg-card);
padding: 30px;
border-radius: 15px;
border: 1px solid var(--border-color);
transition: all 0.3s ease;
}
.grid-item:hover {
border-color: var(--accent-purple);
transform: translateY(-5px);
box-shadow: 0 10px 30px rgba(168, 85, 247, 0.3);
}
.grid-item .icon {
font-size: 3rem;
margin-bottom: 15px;
display: block;
}
/* Tabs */
.tabs {
display: flex;
gap: 10px;
margin-bottom: 30px;
flex-wrap: wrap;
}
.tab-btn {
background: var(--bg-secondary);
color: var(--text-secondary);
border: 1px solid var(--border-color);
padding: 12px 24px;
border-radius: 10px;
cursor: pointer;
transition: all 0.3s ease;
font-size: 1rem;
font-family: 'Poppins', sans-serif;
font-weight: 600;
}
.tab-btn:hover {
border-color: var(--accent-purple);
transform: translateY(-2px);
}
.tab-btn.active {
background: linear-gradient(135deg, var(--accent-purple), var(--accent-cyan));
color: white;
border-color: transparent;
}
.tab-content {
display: none;
}
.tab-content.active {
display: block;
animation: fadeIn 0.5s ease;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
/* Quiz Styles */
.quiz-question {
background: var(--bg-card);
padding: 30px;
border-radius: 15px;
margin-bottom: 20px;
border: 1px solid var(--border-color);
}
.quiz-options {
display: flex;
flex-direction: column;
gap: 15px;
margin-top: 20px;
}
.quiz-option {
background: var(--bg-secondary);
padding: 15px 20px;
border-radius: 10px;
border: 2px solid var(--border-color);
cursor: pointer;
transition: all 0.3s ease;
}
.quiz-option:hover {
border-color: var(--accent-purple);
transform: translateX(5px);
}
.quiz-option.correct {
border-color: var(--accent-green);
background: rgba(16, 185, 129, 0.1);
}
.quiz-option.incorrect {
border-color: #ef4444;
background: rgba(239, 68, 68, 0.1);
}
.quiz-feedback {
margin-top: 20px;
padding: 15px;
border-radius: 10px;
display: none;
}
.quiz-feedback.show {
display: block;
animation: fadeIn 0.5s ease;
}
.quiz-feedback.correct {
background: rgba(16, 185, 129, 0.1);
border: 1px solid var(--accent-green);
color: var(--accent-green);
}
.quiz-feedback.incorrect {
background: rgba(239, 68, 68, 0.1);
border: 1px solid #ef4444;
color: #ef4444;
}
/* Summary Card */
.summary-card {
background: linear-gradient(135deg, rgba(168, 85, 247, 0.1), rgba(6, 182, 212, 0.1));
border: 2px solid var(--accent-purple);
border-radius: 20px;
padding: 40px;
margin: 40px 0;
}
.summary-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
margin-top: 30px;
}
.summary-item {
background: var(--bg-card);
padding: 20px;
border-radius: 10px;
border-left: 4px solid var(--accent-purple);
}
.summary-item strong {
color: var(--accent-purple);
display: block;
margin-bottom: 10px;
font-weight: 700;
}
/* Footer */
footer {
background: var(--bg-secondary);
padding: 40px 20px;
text-align: center;
border-top: 1px solid var(--border-color);
}
footer p {
color: var(--text-muted);
}
.badge {
display: inline-block;
background: linear-gradient(135deg, var(--accent-purple), var(--accent-cyan));
padding: 8px 16px;
border-radius: 20px;
font-size: 0.9rem;
margin: 5px;
font-weight: 600;
}
/* Warning/Info Boxes */
.warning-box {
background: rgba(239, 68, 68, 0.1);
border-left: 4px solid #ef4444;
padding: 20px;
border-radius: 10px;
margin: 20px 0;
}
.success-box {
background: rgba(16, 185, 129, 0.1);
border-left: 4px solid var(--accent-green);
padding: 20px;
border-radius: 10px;
margin: 20px 0;
}
.info-box {
background: rgba(59, 130, 246, 0.1);
border-left: 4px solid var(--accent-blue);
padding: 20px;
border-radius: 10px;
margin: 20px 0;
}
/* Confetti */
.confetti {
position: fixed;
width: 10px;
height: 10px;
animation: confetti-fall 3s linear forwards;
pointer-events: none;
}
@keyframes confetti-fall {
to {
transform: translateY(100vh) rotate(360deg);
opacity: 0;
}
}
/* Demo Box */
.demo-box {
background: var(--bg-secondary);
border: 2px solid var(--accent-purple);
border-radius: 15px;
padding: 30px;
margin: 20px 0;
}
.demo-button {
background: linear-gradient(135deg, var(--accent-purple), var(--accent-cyan));
color: white;
border: none;
padding: 12px 30px;
border-radius: 10px;
cursor: pointer;
font-size: 1rem;
font-weight: 600;
transition: all 0.3s ease;
margin: 10px;
}
.demo-button:hover {
transform: translateY(-2px);
box-shadow: 0 10px 20px rgba(168, 85, 247, 0.3);
}
.demo-output {
background: #0d1117;
border: 1px solid var(--border-color);
border-radius: 10px;
padding: 20px;
margin-top: 20px;
min-height: 100px;
font-family: 'Fira Code', monospace;
}
#quiz-complete {
text-align: center;
padding: 40px;
background: linear-gradient(135deg, rgba(168, 85, 247, 0.2), rgba(6, 182, 212, 0.2));
border-radius: 20px;
border: 2px solid var(--accent-purple);
margin-top: 30px;
display: none;
}
/* Comparison Table */
.comparison-table {
width: 100%;
border-collapse: collapse;
margin: 20px 0;
}
.comparison-table th,
.comparison-table td {
padding: 15px;
text-align: left;
border-bottom: 1px solid var(--border-color);
}
.comparison-table th {
background: var(--bg-secondary);
color: var(--accent-purple);
font-weight: 600;
}
.comparison-table tr:hover {
background: rgba(168, 85, 247, 0.05);
}
/* Responsive */
@media (max-width: 768px) {
.hero h1 {
font-size: 2.5rem;
}
.hero .code-highlight {
font-size: 1.5rem;
padding: 15px 30px;
}
.hero p {
font-size: 1.2rem;
}
.section-header h2 {
font-size: 2rem;
}
.grid {
grid-template-columns: 1fr;
}
}
</style>
</head>
<body>
<div class="progress-bar" id="progressBar"></div>
<!-- Hero Section -->
<section class="hero" id="hero">
<div class="hero-content">
<h1>📄 WordPress Page Template</h1>
<div class="code-highlight">page.php</div>
<p>The Foundation for Static Pages</p>
</div>
<div class="scroll-indicator" onclick="document.getElementById('what-is-it').scrollIntoView({behavior: 'smooth'})">
⬇️
</div>
</section>
<!-- What Is It Section -->
<section id="what-is-it">
<div class="container">
<div class="section-header">
<h2>🤔 What Is page.php?</h2>
<p>The template for static pages in WordPress</p>
</div>
<div class="card">
<h3>📖 The Simple Definition</h3>
<p><strong>page.php</strong> is a WordPress template file that controls how static pages (like About, Contact, Services) are displayed. Unlike blog posts, pages are timeless content that doesn't appear in your blog feed!</p>
<div class="info-box">
<strong>🎯 Think of it like this:</strong>
<p>Imagine a website as a building. Blog posts are like daily newspapers delivered to the lobby (always changing). But pages are like the permanent signs on the walls—"About Us", "Contact", "Services"—they stay the same and don't need dates. <code>page.php</code> is the template that displays these permanent signs!</p>
</div>
<div class="grid">
<div class="grid-item">
<span class="icon">📄</span>
<h4>What It Does</h4>
<p>Displays static pages (About, Contact, etc.)</p>
</div>
<div class="grid-item">
<span class="icon">🎨</span>
<h4>Type</h4>
<p>WordPress template file (PHP)</p>
</div>
<div class="grid-item">
<span class="icon">📍</span>
<h4>Location</h4>
<p>Your theme's root directory</p>
</div>
</div>
</div>
<div class="card">
<h3>🆚 page.php vs single.php</h3>
<table class="comparison-table">
<thead>
<tr>
<th>Feature</th>
<th>page.php</th>
<th>single.php</th>
</tr>
</thead>
<tbody>
<tr>
<td><strong>Used For</strong></td>
<td>Static pages (About, Contact)</td>
<td>Blog posts</td>
</tr>
<tr>
<td><strong>Shows Date?</strong></td>
<td>❌ Usually not</td>
<td>✅ Yes</td>
</tr>
<tr>
<td><strong>Shows Author?</strong></td>
<td>❌ Usually not</td>
<td>✅ Yes</td>
</tr>
<tr>
<td><strong>Has Comments?</strong></td>
<td>🤷 Optional</td>
<td>✅ Usually yes</td>
</tr>
<tr>
<td><strong>In Blog Feed?</strong></td>
<td>❌ No</td>
<td>✅ Yes</td>
</tr>
<tr>
<td><strong>Has Categories?</strong></td>
<td>❌ No</td>
<td>✅ Yes</td>
</tr>
</tbody>
</table>
</div>
</div>
</section>
<!-- Why Use It Section -->
<section id="why-use-it">
<div class="container">
<div class="section-header">
<h2>💡 Why Use page.php?</h2>
<p>The power of dedicated page templates</p>
</div>
<div class="grid">
<div class="card">
<h3>🎨 Clean Design</h3>
<p>Pages look different from blog posts—no dates, no author info, just clean content perfect for About or Contact pages!</p>
</div>
<div class="card">
<h3>📐 Flexible Layouts</h3>
<p>Create full-width layouts, landing pages, or custom designs without blog post clutter!</p>
</div>
<div class="card">
<h3>🎯 Focused Content</h3>
<p>Pages are for timeless content—company info, services, policies—not time-sensitive blog posts!</p>
</div>
<div class="card">
<h3>🔍 Better SEO</h3>
<p>Search engines treat pages differently from posts. Perfect for important business pages!</p>
</div>
<div class="card">
<h3>📱 Custom Features</h3>
<p>Add contact forms, maps, team members—features specific to static pages!</p>
</div>
<div class="card">
<h3>♻️ Reusability</h3>
<p>One template controls all your pages—update once, change everywhere!</p>
</div>
</div>
</div>
</section>
<!-- How It Works Section -->
<section id="how-it-works">
<div class="container">
<div class="section-header">
<h2>⚙️ How Does It Work?</h2>
<p>Understanding the page template</p>
</div>
<div class="card">
<h3>📝 Basic page.php Structure</h3>
<div class="code-block">
<button class="copy-btn" onclick="copyCode(this)">📋 Copy</button>
<pre><code><?php get_header(); ?>
<main id="primary">
<?php
while ( have_posts() ) :
the_post();
?>
<article id="page-<?php the_ID(); ?>">
<!-- Page Title -->
<header class="entry-header">
<h1><?php the_title(); ?></h1>
</header>
<!-- Featured Image (optional) -->
<?php if ( has_post_thumbnail() ) : ?>
<div class="page-thumbnail">
<?php the_post_thumbnail(); ?>
</div>
<?php endif; ?>
<!-- Page Content -->
<div class="entry-content">
<?php the_content(); ?>
</div>
</article>
<?php
// Optional: Show comments if enabled
if ( comments_open() || get_comments_number() ) :
comments_template();
endif;
endwhile;
?>
</main>
<?php get_sidebar(); ?>
<?php get_footer(); ?></code></pre>
</div>
<div class="success-box">
<strong>✅ Key Differences from single.php:</strong>
<ul>
<li>No date display (pages are timeless)</li>
<li>No author info (usually not needed)</li>
<li>No categories or tags</li>
<li>Simpler, cleaner layout</li>
<li>Comments are optional</li>
</ul>
</div>
</div>
</div>
</section>
<!-- Live Demo Section -->
<section id="live-demo">
<div class="container">
<div class="section-header">
<h2>🎮 Interactive Demo</h2>
<p>See page.php components in action!</p>
</div>
<div class="card">
<h3>🎯 Explore Page Types</h3>
<p>Click buttons to see different page styles:</p>
<div class="demo-box">
<button class="demo-button" onclick="showPageType('about')">👥 About Page</button>
<button class="demo-button" onclick="showPageType('contact')">📧 Contact Page</button>
<button class="demo-button" onclick="showPageType('services')">🛠️ Services Page</button>
<button class="demo-button" onclick="showPageType('landing')">🚀 Landing Page</button>
<div class="demo-output" id="pageOutput">
<p style="color: var(--text-muted);">👆 Click a button to explore!</p>
</div>
</div>
</div>
<div class="card">
<div class="tabs">
<button class="tab-btn active" onclick="switchTab(event, 'basic')">Basic</button>
<button class="tab-btn" onclick="switchTab(event, 'fullwidth')">Full Width</button>
<button class="tab-btn" onclick="switchTab(event, 'custom')">Custom Template</button>
</div>
<div id="basic" class="tab-content active">
<h4>🎯 Basic page.php</h4>
<div class="code-block">
<button class="copy-btn" onclick="copyCode(this)">📋 Copy</button>
<pre><code><?php get_header(); ?>
<div class="container">
<?php while ( have_posts() ) : the_post(); ?>
<h1><?php the_title(); ?></h1>
<div class="content">
<?php the_content(); ?>
</div>
<?php endwhile; ?>
</div>
<?php get_sidebar(); ?>
<?php get_footer(); ?></code></pre>
</div>
<div class="success-box">
<strong>✅ Perfect for:</strong> Standard pages like About, Privacy Policy, Terms
</div>
</div>
<div id="fullwidth" class="tab-content">
<h4>🚀 Full Width Page</h4>
<div class="code-block">
<button class="copy-btn" onclick="copyCode(this)">📋 Copy</button>
<pre><code><?php
/*
* Template Name: Full Width Page
*/
?>
<?php get_header(); ?>
<!-- No sidebar, full width -->
<div class="full-width-container">
<?php while ( have_posts() ) : the_post(); ?>
<h1><?php the_title(); ?></h1>
<div class="content">
<?php the_content(); ?>
</div>
<?php endwhile; ?>
</div>
<?php get_footer(); ?></code></pre>
</div>
<div class="info-box">
<strong>💡 Use for:</strong> Landing pages, portfolios, full-width galleries
</div>
</div>
<div id="custom" class="tab-content">
<h4>💎 Custom Page Template</h4>
<div class="code-block">
<button class="copy-btn" onclick="copyCode(this)">📋 Copy</button>
<pre><code><?php
/*
* Template Name: Contact Page
*/
?>
<?php get_header(); ?>
<div class="contact-page">
<?php while ( have_posts() ) : the_post(); ?>
<h1><?php the_title(); ?></h1>
<div class="content">
<?php the_content(); ?>
</div>
<!-- Contact Form -->
<div class="contact-form">
<?php echo do_shortcode('[contact-form-7]'); ?>
</div>
<!-- Google Map -->
<div class="map">
<!-- Map embed code -->
</div>
<?php endwhile; ?>
</div>
<?php get_footer(); ?></code></pre>
</div>
</div>
</div>
</div>
</section>
<!-- Common Mistakes Section -->
<section id="common-mistakes">
<div class="container">
<div class="section-header">
<h2>⚠️ Common Mistakes</h2>
<p>Avoid these page.php pitfalls!</p>
</div>
<div class="card">
<div class="warning-box">
<h3>❌ Mistake #1: Adding Date/Author Info</h3>
<div class="code-block">
<pre><code>// WRONG - Pages don't need dates!
<div class="meta">
Posted on <?php the_date(); ?>
by <?php the_author(); ?>
</div>
// CORRECT ✅ - Keep it simple
<h1><?php the_title(); ?></h1>
<div><?php the_content(); ?></div></code></pre>
</div>
</div>
<div class="warning-box">
<h3>❌ Mistake #2: Using the_excerpt()</h3>
<p>Pages should show FULL content, not excerpts!</p>
<ul>
<li>❌ <code>the_excerpt()</code> - Shows truncated content</li>
<li>✅ <code>the_content()</code> - Shows full page content</li>
</ul>
</div>
<div class="warning-box">
<h3>❌ Mistake #3: Forgetting The Loop</h3>
<div class="code-block">
<pre><code>// WRONG - No loop!
<?php get_header(); ?>
<h1><?php the_title(); ?></h1> <!-- Won't work! -->
// CORRECT ✅
<?php get_header(); ?>
<?php while ( have_posts() ) : the_post(); ?>
<h1><?php the_title(); ?></h1>
<?php endwhile; ?></code></pre>
</div>
</div>
<div class="warning-box">
<h3>❌ Mistake #4: Wrong File Name</h3>
<ul>
<li>❌ Page.php (capital P)</li>
<li>❌ page.html</li>
<li>❌ pages.php (plural)</li>
<li>✅ <strong>page.php</strong> (lowercase, singular, .php)</li>
</ul>
</div>
</div>
</div>
</section>
<!-- Pro Tips Section -->
<section id="pro-tips">
<div class="container">
<div class="section-header">
<h2>🌟 Pro Tips</h2>
<p>Level up your page.php game!</p>
</div>
<div class="grid">
<div class="card">
<h3>💡 Tip #1: Create Custom Page Templates</h3>
<div class="code-block">
<pre><code><?php
/*
* Template Name: Landing Page
*/
?>
<!-- Now selectable in page editor! --></code></pre>
</div>
</div>
<div class="card">
<h3>🚀 Tip #2: Remove Sidebar for Pages</h3>
<div class="code-block">
<pre><code><!-- Don't call get_sidebar() -->
<!-- Full width layout! --></code></pre>
</div>
</div>
<div class="card">
<h3>🎨 Tip #3: Add Page-Specific Classes</h3>
<div class="code-block">
<pre><code><body <?php body_class(); ?>>
<!-- Adds: page-id-5, page-about --></code></pre>
</div>
</div>
<div class="card">
<h3>⚡ Tip #4: Use Page Templates</h3>
<div class="code-block">
<pre><code>// Create: page-contact.php
// WordPress auto-detects it!</code></pre>
</div>
</div>
<div class="card">
<h3>🔒 Tip #5: Password Protected Pages</h3>
<div class="code-block">
<pre><code><?php
if ( post_password_required() ) {
echo get_the_password_form();
return;
}
?></code></pre>
</div>
</div>
<div class="card">
<h3>📱 Tip #6: Child Pages</h3>
<div class="code-block">
<pre><code><?php
// List child pages
$children = get_pages([
'child_of' => get_the_ID()
]);
?></code></pre>
</div>
</div>
</div>
</div>
</section>
<!-- Quiz Section -->
<section id="quiz">
<div class="container">
<div class="section-header">
<h2>🎯 Test Your Knowledge!</h2>
<p>Time to prove you're a page.php master!</p>
</div>
<div class="quiz-question">
<h3>Question 1: What is page.php used for?</h3>
<div class="quiz-options">
<div class="quiz-option" onclick="checkAnswer(this, false, 1)">
A) Displaying blog posts
</div>
<div class="quiz-option" onclick="checkAnswer(this, true, 1)">
B) Displaying static pages (About, Contact)
</div>
<div class="quiz-option" onclick="checkAnswer(this, false, 1)">
C) Displaying the homepage
</div>
<div class="quiz-option" onclick="checkAnswer(this, false, 1)">
D) Displaying archives
</div>
</div>
<div class="quiz-feedback" id="feedback1"></div>
</div>
<div class="quiz-question">
<h3>Question 2: What's a key difference between page.php and single.php?</h3>
<div class="quiz-options">
<div class="quiz-option" onclick="checkAnswer(this, false, 2)">
A) They're exactly the same
</div>
<div class="quiz-option" onclick="checkAnswer(this, true, 2)">
B) Pages don't show dates/authors
</div>
<div class="quiz-option" onclick="checkAnswer(this, false, 2)">
C) Pages can't have content
</div>
<div class="quiz-option" onclick="checkAnswer(this, false, 2)">
D) Pages don't use The Loop
</div>
</div>
<div class="quiz-feedback" id="feedback2"></div>
</div>
<div class="quiz-question">
<h3>Question 3: How do you create a custom page template?</h3>
<div class="quiz-options">
<div class="quiz-option" onclick="checkAnswer(this, false, 3)">
A) Just create a new PHP file
</div>
<div class="quiz-option" onclick="checkAnswer(this, true, 3)">
B) Add "Template Name:" comment at top
</div>
<div class="quiz-option" onclick="checkAnswer(this, false, 3)">
C) Use a plugin
</div>
<div class="quiz-option" onclick="checkAnswer(this, false, 3)">
D) Modify functions.php
</div>
</div>
<div class="quiz-feedback" id="feedback3"></div>
</div>
<div id="quiz-complete">
<h2 style="font-size: 3rem;">🎉 Congratulations!</h2>
<p style="font-size: 1.5rem; margin-top: 20px;">You're now a page.php expert!</p>
<div class="badge">WordPress Master</div>
<div class="badge">Theme Developer</div>
<div class="badge">page.php Pro</div>
</div>
</div>
</section>
<!-- Summary Section -->
<section id="summary">
<div class="container">
<div class="section-header">
<h2>📚 Quick Reference</h2>
<p>Your page.php cheat sheet</p>
</div>
<div class="summary-card">
<h3>🎯 page.php Essentials</h3>
<div class="summary-grid">
<div class="summary-item">
<strong>✅ Purpose</strong>
<p>Displays static pages</p>
</div>
<div class="summary-item">
<strong>✅ Location</strong>
<p>Theme root directory</p>
</div>
<div class="summary-item">
<strong>✅ Must Have</strong>
<p>The Loop (while have_posts)</p>
</div>
<div class="summary-item">
<strong>✅ Key Functions</strong>
<p>the_title(), the_content()</p>
</div>
<div class="summary-item">
<strong>✅ No Need For</strong>
<p>Dates, authors, categories</p>
</div>
<div class="summary-item">
<strong>✅ Common Pages</strong>
<p>About, Contact, Services</p>
</div>
<div class="summary-item">
<strong>✅ Custom Templates</strong>
<p>Add "Template Name:" comment</p>
</div>
<div class="summary-item">
<strong>✅ Sidebar</strong>
<p>Optional (often removed)</p>
</div>
</div>
<div class="success-box" style="margin-top: 30px;">
<h4>🔑 Key Takeaways:</h4>
<ul>
<li>✨ For static, timeless content</li>
<li>🎯 Simpler than single.php</li>
<li>🎨 No dates or author info</li>
<li>⚡ Can create custom templates</li>
<li>🔧 Perfect for business pages</li>
<li>🚀 One template, all pages</li>
</ul>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer>
<div class="container">
<h3 style="margin-bottom: 20px;">🎓 Mission Accomplished!</h3>
<p>You've mastered page.php and are ready to build amazing WordPress themes!</p>
<p style="margin-top: 20px; color: var(--text-muted); font-size: 0.9rem;">
Generated by <strong>AI Prompt Dictionary</strong> 🤖<br>
Making learning interactive, fun, and effective!
</p>
<div style="margin-top: 30px;">
<span class="badge">Interactive Learning</span>
<span class="badge">WordPress Master</span>
<span class="badge">Theme Development</span>
</div>
</div>
</footer>
<script>
// Progress Bar
window.addEventListener('scroll', () => {
const windowHeight = window.innerHeight;
const documentHeight = document.documentElement.scrollHeight - windowHeight;
const scrolled = window.scrollY;
const progress = (scrolled / documentHeight) * 100;
document.getElementById('progressBar').style.width = progress + '%';
});
// Intersection Observer
const sections = document.querySelectorAll('section');
const observerOptions = {
threshold: 0.3,
rootMargin: '0px'
};
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('visible');
}
});
}, observerOptions);
sections.forEach(section => observer.observe(section));
// Tab Switching
function switchTab(event, tabName) {
const tabContents = document.querySelectorAll('.tab-content');
const tabBtns = document.querySelectorAll('.tab-btn');
tabContents.forEach(content => content.classList.remove('active'));
tabBtns.forEach(btn => btn.classList.remove('active'));
document.getElementById(tabName).classList.add('active');
event.target.classList.add('active');
}
// Copy Code
function copyCode(button) {
const codeBlock = button.nextElementSibling;
const code = codeBlock.textContent;
navigator.clipboard.writeText(code).then(() => {
button.textContent = '✓ Copied!';
button.style.background = 'var(--accent-green)';
setTimeout(() => {
button.textContent = '📋 Copy';
button.style.background = 'var(--accent-purple)';
}, 2000);
});
}
// Interactive Page Type Demo
function showPageType(type) {
const output = document.getElementById('pageOutput');
const demos = {
about: `<span style="color: var(--accent-green);">✅ About Page</span>
<span style="color: var(--text-secondary);">// Features:
// - Company history
// - Team member bios
// - Mission statement
// - No date/author needed
// - Clean, professional layout</span>`,
contact: `<span style="color: var(--accent-cyan);">✅ Contact Page</span>
<span style="color: var(--text-secondary);">// Features:
// - Contact form
// - Address & phone
// - Google Maps embed
// - Social media links
// - Business hours</span>`,
services: `<span style="color: var(--accent-pink);">✅ Services Page</span>
<span style="color: var(--text-secondary);">// Features:
// - Service descriptions
// - Pricing tables
// - Call-to-action buttons
// - Feature highlights
// - Testimonials</span>`,
landing: `<span style="color: var(--accent-orange);">✅ Landing Page</span>
<span style="color: var(--text-secondary);">// Features:
// - Full-width hero section
// - No sidebar/distractions
// - Strong CTA
// - Conversion optimized
// - Custom template</span>`
};
output.innerHTML = `<pre style="margin: 0;">${demos[type]}</pre>`;
}
// Quiz Logic
let correctAnswers = 0;
let answeredQuestions = new Set();
function checkAnswer(element, isCorrect, questionNum) {
if (answeredQuestions.has(questionNum)) return;
answeredQuestions.add(questionNum);
const feedback = document.getElementById('feedback' + questionNum);
const options = element.parentElement.querySelectorAll('.quiz-option');
options.forEach(opt => opt.style.pointerEvents = 'none');
if (isCorrect) {
element.classList.add('correct');
feedback.className = 'quiz-feedback correct show';
feedback.innerHTML = '🎉 Perfect! You nailed it!';
correctAnswers++;
createConfetti();
} else {
element.classList.add('incorrect');
feedback.className = 'quiz-feedback incorrect show';
feedback.innerHTML = '❌ Not quite! Review the section above.';
}
if (answeredQuestions.size === 3 && correctAnswers === 3) {
setTimeout(() => {
document.getElementById('quiz-complete').style.display = 'block';
createMegaConfetti();
}, 1000);
}
}
// Confetti Effects
function createConfetti() {
const colors = ['#a855f7', '#3b82f6', '#10b981', '#ec4899'];
for (let i = 0; i < 30; i++) {
const confetti = document.createElement('div');
confetti.className = 'confetti';
confetti.style.left = Math.random() * 100 + '%';
confetti.style.background = colors[Math.floor(Math.random() * colors.length)];
confetti.style.animationDelay = Math.random() * 0.5 + 's';
document.body.appendChild(confetti);
setTimeout(() => confetti.remove(), 3000);
}
}
function createMegaConfetti() {
const colors = ['#a855f7', '#3b82f6', '#10b981', '#ec4899', '#f59e0b'];
for (let i = 0; i < 100; i++) {
const confetti = document.createElement('div');
confetti.className = 'confetti';
confetti.style.left = Math.random() * 100 + '%';
confetti.style.background = colors[Math.floor(Math.random() * colors.length)];
confetti.style.animationDelay = (Math.random() * 2) + 's';
confetti.style.width = (Math.random() * 10 + 5) + 'px';
confetti.style.height = confetti.style.width;
document.body.appendChild(confetti);
setTimeout(() => confetti.remove(), 5000);
}
}
</script>
</body>
</html>
Live Preview