What WordPress function returns the home page URL of your website?
📦 WordPress
✨ The Prompt Phrase
<?php echo home_url(); ?>
💻 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>What WordPress function returns the home page URL of your website? - Interactive Tutorial</title>
<style>
:root {
--primary: #667eea;
--secondary: #764ba2;
--accent: #f093fb;
--success: #4ade80;
--warning: #fbbf24;
--danger: #f87171;
--dark: #0f172a;
--dark-light: #1e293b;
--dark-lighter: #334155;
--text: #e2e8f0;
--text-dim: #94a3b8;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background: linear-gradient(135deg, var(--dark) 0%, var(--dark-light) 100%);
color: var(--text);
line-height: 1.6;
overflow-x: hidden;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}
/* Hero Section */
.hero {
text-align: center;
padding: 80px 20px;
background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
border-radius: 30px;
margin-bottom: 40px;
position: relative;
overflow: hidden;
animation: fadeInDown 0.8s ease;
}
.hero::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle, rgba(255,255,255,0.1) 1px, transparent 1px);
background-size: 50px 50px;
animation: moveBackground 20s linear infinite;
}
@keyframes moveBackground {
0% { transform: translate(0, 0); }
100% { transform: translate(50px, 50px); }
}
.hero h1 {
font-size: 3rem;
margin-bottom: 20px;
position: relative;
z-index: 1;
text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}
.hero-code {
background: rgba(0,0,0,0.3);
padding: 20px 40px;
border-radius: 15px;
display: inline-block;
font-family: 'Courier New', monospace;
font-size: 1.5rem;
margin-top: 20px;
position: relative;
z-index: 1;
backdrop-filter: blur(10px);
border: 2px solid rgba(255,255,255,0.2);
}
.progress-bar {
position: fixed;
top: 0;
left: 0;
height: 5px;
background: linear-gradient(90deg, var(--primary), var(--accent));
width: 0%;
z-index: 1000;
transition: width 0.3s ease;
}
/* Section Styles */
.section {
background: var(--dark-light);
border-radius: 20px;
padding: 40px;
margin-bottom: 30px;
border: 1px solid var(--dark-lighter);
animation: fadeInUp 0.6s ease;
position: relative;
overflow: hidden;
}
.section::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 5px;
height: 100%;
background: linear-gradient(180deg, var(--primary), var(--secondary));
}
.section h2 {
font-size: 2rem;
margin-bottom: 20px;
color: var(--accent);
display: flex;
align-items: center;
gap: 15px;
}
.section h3 {
font-size: 1.5rem;
margin: 25px 0 15px 0;
color: var(--primary);
}
.section p {
color: var(--text-dim);
margin-bottom: 15px;
font-size: 1.1rem;
}
/* Code Block */
.code-block {
background: var(--dark);
border-radius: 15px;
padding: 25px;
margin: 20px 0;
position: relative;
border: 1px solid var(--dark-lighter);
overflow-x: auto;
}
.code-block pre {
margin: 0;
font-family: 'Courier New', monospace;
font-size: 1rem;
color: #a5f3fc;
}
.code-annotation {
color: var(--success);
font-style: italic;
}
.copy-btn {
position: absolute;
top: 15px;
right: 15px;
background: var(--primary);
color: white;
border: none;
padding: 8px 16px;
border-radius: 8px;
cursor: pointer;
font-size: 0.9rem;
transition: all 0.3s ease;
}
.copy-btn:hover {
background: var(--secondary);
transform: translateY(-2px);
}
.copy-btn.copied {
background: var(--success);
}
/* Tabs */
.tabs {
display: flex;
gap: 10px;
margin-bottom: 20px;
flex-wrap: wrap;
}
.tab-btn {
background: var(--dark-lighter);
color: var(--text);
border: none;
padding: 12px 24px;
border-radius: 10px;
cursor: pointer;
transition: all 0.3s ease;
font-size: 1rem;
}
.tab-btn:hover {
background: var(--primary);
transform: translateY(-2px);
}
.tab-btn.active {
background: linear-gradient(135deg, var(--primary), var(--secondary));
box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
}
.tab-content {
display: none;
}
.tab-content.active {
display: block;
animation: fadeIn 0.5s ease;
}
/* Cards */
.card-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 20px;
margin: 20px 0;
}
.card {
background: var(--dark);
border-radius: 15px;
padding: 25px;
border: 1px solid var(--dark-lighter);
transition: all 0.3s ease;
cursor: pointer;
}
.card:hover {
transform: translateY(-5px);
border-color: var(--primary);
box-shadow: 0 10px 30px rgba(102, 126, 234, 0.3);
}
.card h4 {
color: var(--accent);
margin-bottom: 10px;
font-size: 1.3rem;
}
.card-icon {
font-size: 2.5rem;
margin-bottom: 15px;
}
/* Quiz */
.quiz-question {
background: var(--dark);
padding: 25px;
border-radius: 15px;
margin: 20px 0;
border: 2px solid var(--dark-lighter);
}
.quiz-options {
display: flex;
flex-direction: column;
gap: 10px;
margin-top: 15px;
}
.quiz-option {
background: var(--dark-lighter);
padding: 15px 20px;
border-radius: 10px;
cursor: pointer;
transition: all 0.3s ease;
border: 2px solid transparent;
}
.quiz-option:hover {
background: var(--dark-light);
border-color: var(--primary);
}
.quiz-option.correct {
background: var(--success);
color: white;
animation: pulse 0.5s ease;
}
.quiz-option.incorrect {
background: var(--danger);
color: white;
animation: shake 0.5s ease;
}
.quiz-feedback {
margin-top: 15px;
padding: 15px;
border-radius: 10px;
display: none;
}
.quiz-feedback.show {
display: block;
animation: fadeIn 0.5s ease;
}
.quiz-feedback.correct {
background: rgba(74, 222, 128, 0.2);
border: 1px solid var(--success);
color: var(--success);
}
.quiz-feedback.incorrect {
background: rgba(248, 113, 113, 0.2);
border: 1px solid var(--danger);
color: var(--danger);
}
/* Summary Card */
.summary-card {
background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
border-radius: 20px;
padding: 40px;
margin: 30px 0;
box-shadow: 0 20px 40px rgba(102, 126, 234, 0.3);
}
.summary-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 20px;
margin-top: 20px;
}
.summary-item {
background: rgba(255, 255, 255, 0.1);
padding: 20px;
border-radius: 15px;
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
}
.summary-item h4 {
margin-bottom: 10px;
font-size: 1.1rem;
}
/* Accordion */
.accordion-item {
background: var(--dark);
border-radius: 15px;
margin: 15px 0;
overflow: hidden;
border: 1px solid var(--dark-lighter);
}
.accordion-header {
padding: 20px;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
transition: all 0.3s ease;
}
.accordion-header:hover {
background: var(--dark-lighter);
}
.accordion-header.active {
background: var(--primary);
}
.accordion-content {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease;
padding: 0 20px;
}
.accordion-content.active {
max-height: 1000px;
padding: 20px;
}
.accordion-icon {
transition: transform 0.3s ease;
}
.accordion-icon.rotate {
transform: rotate(180deg);
}
/* Badge */
.badge {
display: inline-block;
padding: 8px 16px;
border-radius: 20px;
font-size: 0.9rem;
font-weight: bold;
margin: 5px;
}
.badge-success {
background: var(--success);
color: var(--dark);
}
.badge-warning {
background: var(--warning);
color: var(--dark);
}
.badge-danger {
background: var(--danger);
color: white;
}
.badge-info {
background: var(--primary);
color: white;
}
/* Tooltip */
.tooltip {
position: relative;
display: inline-block;
border-bottom: 2px dotted var(--primary);
cursor: help;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 250px;
background-color: var(--dark-lighter);
color: var(--text);
text-align: center;
border-radius: 10px;
padding: 10px;
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
margin-left: -125px;
opacity: 0;
transition: opacity 0.3s;
border: 1px solid var(--primary);
font-size: 0.9rem;
}
.tooltip:hover .tooltiptext {
visibility: visible;
opacity: 1;
}
/* List Styles */
.styled-list {
list-style: none;
padding-left: 0;
}
.styled-list li {
padding: 15px;
margin: 10px 0;
background: var(--dark);
border-radius: 10px;
border-left: 4px solid var(--primary);
transition: all 0.3s ease;
}
.styled-list li:hover {
transform: translateX(10px);
border-left-color: var(--accent);
}
/* Footer */
footer {
text-align: center;
padding: 40px 20px;
margin-top: 60px;
border-top: 1px solid var(--dark-lighter);
}
footer p {
color: var(--text-dim);
margin: 10px 0;
}
.footer-logo {
font-size: 2rem;
margin-bottom: 15px;
}
/* Animations */
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes fadeInDown {
from {
opacity: 0;
transform: translateY(-30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes pulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.05); }
}
@keyframes shake {
0%, 100% { transform: translateX(0); }
25% { transform: translateX(-10px); }
75% { transform: translateX(10px); }
}
/* Confetti */
.confetti {
position: fixed;
width: 10px;
height: 10px;
background: var(--accent);
position: absolute;
animation: confetti-fall 3s linear forwards;
}
@keyframes confetti-fall {
to {
transform: translateY(100vh) rotate(360deg);
opacity: 0;
}
}
/* Responsive */
@media (max-width: 768px) {
.hero h1 {
font-size: 2rem;
}
.hero-code {
font-size: 1rem;
padding: 15px 20px;
}
.section {
padding: 25px;
}
.section h2 {
font-size: 1.5rem;
}
.card-grid {
grid-template-columns: 1fr;
}
}
/* Highlight effect */
.highlight {
background: linear-gradient(120deg, transparent 0%, var(--primary) 50%, transparent 100%);
background-size: 200% 100%;
animation: highlight 2s ease infinite;
}
@keyframes highlight {
0%, 100% { background-position: 200% 0; }
50% { background-position: -200% 0; }
}
/* Score Display */
.score-display {
position: fixed;
top: 20px;
right: 20px;
background: var(--dark-light);
padding: 15px 25px;
border-radius: 15px;
border: 2px solid var(--primary);
z-index: 100;
font-size: 1.2rem;
font-weight: bold;
}
.score-number {
color: var(--accent);
font-size: 1.5rem;
}
</style>
</head>
<body>
<div class="progress-bar" id="progressBar"></div>
<div class="score-display">
🏆 Score: <span class="score-number" id="scoreDisplay">0</span>/3
</div>
<div class="container">
<!-- Hero Section -->
<div class="hero">
<h1>🏠 WordPress Home URL Function</h1>
<p style="font-size: 1.2rem; margin-top: 10px;">Master the art of linking to your homepage!</p>
<div class="hero-code"><?php echo home_url(); ?></div>
</div>
<!-- What Is It Section -->
<div class="section">
<h2>🤔 What Is It?</h2>
<p>
<strong>home_url()</strong> is a powerful WordPress function that returns the <span class="tooltip">home page URL<span class="tooltiptext">The main URL where your website lives, like https://yoursite.com</span></span> of your website.
Think of it as a GPS coordinate that always points to your website's front door! 🚪
</p>
<p>
When you use <code style="background: var(--dark); padding: 5px 10px; border-radius: 5px; color: var(--accent);"><?php echo home_url(); ?></code>,
WordPress automatically fetches your site's home URL from the database and displays it. No hard-coding needed!
</p>
<div class="card-grid" style="margin-top: 30px;">
<div class="card">
<div class="card-icon">🎯</div>
<h4>Dynamic</h4>
<p>Automatically updates if you change your site URL</p>
</div>
<div class="card">
<div class="card-icon">🔒</div>
<h4>Secure</h4>
<p>Uses WordPress core functions for reliability</p>
</div>
<div class="card">
<div class="card-icon">⚡</div>
<h4>Fast</h4>
<p>Optimized for performance</p>
</div>
</div>
</div>
<!-- Why Use It Section -->
<div class="section">
<h2>💡 Why Use It?</h2>
<p>You might be wondering, "Why not just type my URL directly?" Great question! Here's why home_url() is your best friend:</p>
<ul class="styled-list">
<li>
<strong>🔄 Flexibility:</strong> If you move your site from development to production (like from localhost to yoursite.com),
the function automatically adapts. No find-and-replace nightmares!
</li>
<li>
<strong>🎨 Theme Portability:</strong> Your theme works on ANY WordPress site without modification.
Perfect for theme developers!
</li>
<li>
<strong>🌐 Multisite Support:</strong> Works seamlessly with WordPress Multisite installations,
always pointing to the correct site.
</li>
<li>
<strong>✅ Best Practice:</strong> It's the WordPress-recommended way to handle URLs.
Following standards makes your code professional!
</li>
</ul>
</div>
<!-- How Does It Work Section -->
<div class="section">
<h2>⚙️ How Does It Work?</h2>
<p>Let's break down the magic step by step! 🪄</p>
<div class="accordion-item">
<div class="accordion-header" onclick="toggleAccordion(this)">
<span><strong>Step 1:</strong> WordPress Checks the Database</span>
<span class="accordion-icon">▼</span>
</div>
<div class="accordion-content">
<p>When you call <code>home_url()</code>, WordPress looks in the <strong>wp_options</strong> table for the 'home' option.
This is where your site URL is stored (Settings → General → Site Address).</p>
</div>
</div>
<div class="accordion-item">
<div class="accordion-header" onclick="toggleAccordion(this)">
<span><strong>Step 2:</strong> Function Returns the URL</span>
<span class="accordion-icon">▼</span>
</div>
<div class="accordion-content">
<p>The function retrieves the URL value and returns it as a string. At this point, nothing is displayed yet—it's just data!</p>
</div>
</div>
<div class="accordion-item">
<div class="accordion-header" onclick="toggleAccordion(this)">
<span><strong>Step 3:</strong> Echo Displays It</span>
<span class="accordion-icon">▼</span>
</div>
<div class="accordion-content">
<p>The <code>echo</code> statement takes that string and outputs it to your HTML.
This is what makes it visible on your webpage!</p>
</div>
</div>
<div class="accordion-item">
<div class="accordion-header" onclick="toggleAccordion(this)">
<span><strong>Step 4:</strong> Browser Renders It</span>
<span class="accordion-icon">▼</span>
</div>
<div class="accordion-content">
<p>Your browser receives the URL and can use it in links, images, or anywhere else you need it. Mission accomplished! 🎉</p>
</div>
</div>
</div>
<!-- Live Demo Section -->
<div class="section">
<h2>🎮 Live Demo & Examples</h2>
<p>See home_url() in action! Click through the tabs to explore different use cases:</p>
<div class="tabs">
<button class="tab-btn active" onclick="switchTab(event, 'tab1')">Basic Link</button>
<button class="tab-btn" onclick="switchTab(event, 'tab2')">Logo Link</button>
<button class="tab-btn" onclick="switchTab(event, 'tab3')">With Path</button>
</div>
<div id="tab1" class="tab-content active">
<h3>Creating a Home Link</h3>
<p>The most common use case—creating a link back to your homepage:</p>
<div class="code-block">
<button class="copy-btn" onclick="copyCode(this)">Copy</button>
<pre><a href="<?php echo home_url(); ?>">Go Home</a>
<span class="code-annotation">// Output: <a href="https://yoursite.com">Go Home</a></span></pre>
</div>
</div>
<div id="tab2" class="tab-content">
<h3>Linking Your Logo</h3>
<p>Make your logo clickable and take users home:</p>
<div class="code-block">
<button class="copy-btn" onclick="copyCode(this)">Copy</button>
<pre><a href="<?php echo home_url(); ?>">
<img src="logo.png" alt="Site Logo">
</a>
<span class="code-annotation">// Clicking the logo takes users to the homepage</span></pre>
</div>
</div>
<div id="tab3" class="tab-content">
<h3>Adding a Path</h3>
<p>You can add paths to create URLs for specific pages:</p>
<div class="code-block">
<button class="copy-btn" onclick="copyCode(this)">Copy</button>
<pre><a href="<?php echo home_url('/about'); ?>">About Us</a>
<span class="code-annotation">// Output: <a href="https://yoursite.com/about">About Us</a></span></pre>
</div>
</div>
</div>
<!-- Code Breakdown Section -->
<div class="section">
<h2>🔍 Code Breakdown</h2>
<p>Let's dissect each part of the code like a surgeon! 🔬</p>
<div class="code-block">
<pre><?php echo home_url(); ?></pre>
</div>
<div class="card-grid" style="margin-top: 20px;">
<div class="card">
<h4><?php ?></h4>
<p><strong>PHP Tags</strong></p>
<p>These tell the server "Hey! This is PHP code, please execute it!" Everything between these tags is processed by PHP.</p>
</div>
<div class="card">
<h4>echo</h4>
<p><strong>Output Command</strong></p>
<p>This keyword tells PHP to display whatever comes next. Think of it as a "print" or "show" command.</p>
</div>
<div class="card">
<h4>home_url()</h4>
<p><strong>WordPress Function</strong></p>
<p>The star of the show! This function fetches your site's home URL from the database and returns it as text.</p>
</div>
</div>
<h3 style="margin-top: 30px;">Advanced Usage 🚀</h3>
<div class="code-block">
<button class="copy-btn" onclick="copyCode(this)">Copy</button>
<pre>// With path parameter
echo home_url('/contact');
<span class="code-annotation">// Returns: https://yoursite.com/contact</span>
// With scheme parameter
echo home_url('/', 'https');
<span class="code-annotation">// Forces HTTPS: https://yoursite.com/</span>
// Store in variable
$home = home_url();
echo "Visit us at: " . $home;
<span class="code-annotation">// Returns: Visit us at: https://yoursite.com</span></pre>
</div>
</div>
<!-- Common Mistakes Section -->
<div class="section">
<h2>❌ Common Mistakes</h2>
<p>Learn from others' mistakes! Here are the most common pitfalls and how to avoid them:</p>
<div class="card-grid">
<div class="card" style="border-left: 4px solid var(--danger);">
<div class="card-icon">🚫</div>
<h4>Forgetting Echo</h4>
<div class="code-block" style="margin-top: 10px;">
<pre style="color: var(--danger);">// WRONG ❌
<a href="<?php home_url(); ?>"></pre>
</div>
<div class="code-block">
<pre style="color: var(--success);">// CORRECT ✅
<a href="<?php echo home_url(); ?>"></pre>
</div>
<p style="margin-top: 10px;">Without <code>echo</code>, the URL won't be displayed!</p>
</div>
<div class="card" style="border-left: 4px solid var(--danger);">
<div class="card-icon">🚫</div>
<h4>Hard-Coding URLs</h4>
<div class="code-block" style="margin-top: 10px;">
<pre style="color: var(--danger);">// WRONG ❌
<a href="https://mysite.com"></pre>
</div>
<div class="code-block">
<pre style="color: var(--success);">// CORRECT ✅
<a href="<?php echo home_url(); ?>"></pre>
</div>
<p style="margin-top: 10px;">Hard-coded URLs break when you move sites!</p>
</div>
<div class="card" style="border-left: 4px solid var(--danger);">
<div class="card-icon">🚫</div>
<h4>Using Outside WordPress</h4>
<div class="code-block" style="margin-top: 10px;">
<pre style="color: var(--danger);">// WRONG ❌
// In a standalone PHP file
echo home_url();</pre>
</div>
<p style="margin-top: 10px;">This function only works within WordPress. Load WordPress first!</p>
</div>
<div class="card" style="border-left: 4px solid var(--danger);">
<div class="card-icon">🚫</div>
<h4>Confusing with site_url()</h4>
<p style="margin-top: 10px;"><code>home_url()</code> = Front page URL<br>
<code>site_url()</code> = WordPress installation URL<br>
They're different! Use the right one.</p>
</div>
</div>
</div>
<!-- Pro Tips Section -->
<div class="section">
<h2>🌟 Pro Tips</h2>
<p>Level up your WordPress skills with these expert tips!</p>
<ul class="styled-list">
<li>
<strong>🎯 Tip #1: Use in Navigation Menus</strong><br>
Always use <code>home_url()</code> for your site logo and home links in navigation. It's more reliable than hard-coded URLs.
</li>
<li>
<strong>🔗 Tip #2: Combine with Other Functions</strong><br>
<div class="code-block" style="margin-top: 10px;">
<pre>// Get current page URL relative to home
$current = home_url(add_query_arg(array(), $wp->request));</pre>
</div>
</li>
<li>
<strong>⚡ Tip #3: Cache for Performance</strong><br>
If you're using it multiple times, store it in a variable to avoid repeated database calls:
<div class="code-block" style="margin-top: 10px;">
<pre>$home = home_url();
echo $home; // Use multiple times</pre>
</div>
</li>
<li>
<strong>🌐 Tip #4: Multilingual Sites</strong><br>
Works perfectly with WPML and Polylang plugins—automatically returns the correct language URL!
</li>
<li>
<strong>🔒 Tip #5: Always Escape in Attributes</strong><br>
For extra security, use <code>esc_url()</code> when outputting in HTML attributes:
<div class="code-block" style="margin-top: 10px;">
<pre><a href="<?php echo esc_url(home_url()); ?>"></pre>
</div>
</li>
</ul>
</div>
<!-- Practice Quiz Section -->
<div class="section">
<h2>🎯 Practice Quiz</h2>
<p>Test your knowledge! Answer these questions to see if you've mastered home_url(). Get all 3 right to earn your badge! 🏆</p>
<!-- Question 1 -->
<div class="quiz-question">
<h3>Question 1: What does home_url() return?</h3>
<div class="quiz-options">
<div class="quiz-option" onclick="checkAnswer(this, false, 1)">
A) The WordPress installation directory path
</div>
<div class="quiz-option" onclick="checkAnswer(this, true, 1)">
B) The home page URL of your website
</div>
<div class="quiz-option" onclick="checkAnswer(this, false, 1)">
C) The current page URL
</div>
<div class="quiz-option" onclick="checkAnswer(this, false, 1)">
D) The admin panel URL
</div>
</div>
<div class="quiz-feedback" id="feedback1"></div>
</div>
<!-- Question 2 -->
<div class="quiz-question">
<h3>Question 2: Which is the correct way to use home_url()?</h3>
<div class="quiz-options">
<div class="quiz-option" onclick="checkAnswer(this, false, 2)">
A) <?php home_url(); ?>
</div>
<div class="quiz-option" onclick="checkAnswer(this, true, 2)">
B) <?php echo home_url(); ?>
</div>
<div class="quiz-option" onclick="checkAnswer(this, false, 2)">
C) <?php print home_url; ?>
</div>
<div class="quiz-option" onclick="checkAnswer(this, false, 2)">
D) <?= home_url ?>
</div>
</div>
<div class="quiz-feedback" id="feedback2"></div>
</div>
<!-- Question 3 -->
<div class="quiz-question">
<h3>Question 3: What's the main benefit of using home_url() instead of hard-coding your URL?</h3>
<div class="quiz-options">
<div class="quiz-option" onclick="checkAnswer(this, false, 3)">
A) It makes your site load faster
</div>
<div class="quiz-option" onclick="checkAnswer(this, false, 3)">
B) It improves SEO rankings
</div>
<div class="quiz-option" onclick="checkAnswer(this, true, 3)">
C) It automatically adapts when you move or change your site URL
</div>
<div class="quiz-option" onclick="checkAnswer(this, false, 3)">
D) It adds security encryption
</div>
</div>
<div class="quiz-feedback" id="feedback3"></div>
</div>
<div id="quizComplete" style="display: none; text-align: center; margin-top: 30px; padding: 30px; background: linear-gradient(135deg, var(--success) 0%, var(--primary) 100%); border-radius: 20px;">
<h2 style="font-size: 3rem; margin-bottom: 20px;">🎉 Congratulations! 🎉</h2>
<p style="font-size: 1.5rem; margin-bottom: 20px;">You've mastered home_url()!</p>
<div style="font-size: 5rem; margin: 20px 0;">🏆</div>
<p style="font-size: 1.2rem;">You're now a WordPress URL expert!</p>
</div>
</div>
<!-- Summary Card Section -->
<div class="summary-card">
<h2 style="text-align: center; margin-bottom: 30px;">📚 Quick Reference Cheat Sheet</h2>
<div class="summary-grid">
<div class="summary-item">
<h4>🎯 Function</h4>
<p><code>home_url()</code></p>
</div>
<div class="summary-item">
<h4>📝 Syntax</h4>
<p><code><?php echo home_url(); ?></code></p>
</div>
<div class="summary-item">
<h4>🔄 Returns</h4>
<p>Home page URL string</p>
</div>
<div class="summary-item">
<h4>📍 Location</h4>
<p>Settings → General → Site Address</p>
</div>
<div class="summary-item">
<h4>⚡ Use Case</h4>
<p>Links, logos, navigation</p>
</div>
<div class="summary-item">
<h4>🎨 Best Practice</h4>
<p>Always use over hard-coded URLs</p>
</div>
</div>
<div style="margin-top: 30px; padding: 20px; background: rgba(255,255,255,0.1); border-radius: 15px;">
<h3 style="margin-bottom: 15px;">💡 Remember:</h3>
<ul style="list-style: none; padding: 0;">
<li style="margin: 10px 0;">✅ Always use <code>echo</code> to display the URL</li>
<li style="margin: 10px 0;">✅ Add paths with <code>home_url('/path')</code></li>
<li style="margin: 10px 0;">✅ Use <code>esc_url()</code> for security in attributes</li>
<li style="margin: 10px 0;">✅ Works with multisite and multilingual setups</li>
<li style="margin: 10px 0;">❌ Don't hard-code URLs</li>
<li style="margin: 10px 0;">❌ Don't confuse with <code>site_url()</code></li>
</ul>
</div>
</div>
<!-- Footer -->
<footer>
<div class="footer-logo">🚀</div>
<h3>You Did It! 🎉</h3>
<p>You've completed the home_url() interactive tutorial!</p>
<p style="margin-top: 20px;">Now go forth and build amazing WordPress themes!</p>
<p style="margin-top: 30px; font-size: 0.9rem; color: var(--text-dim);">
Generated by <strong>AI Prompt Dictionary</strong> 📖<br>
Making learning fun, one tutorial at a time!
</p>
<div style="margin-top: 20px;">
<span class="badge badge-info">WordPress</span>
<span class="badge badge-success">PHP</span>
<span class="badge badge-warning">Tutorial</span>
</div>
</footer>
</div>
<script>
// Progress Bar
window.addEventListener('scroll', () => {
const windowHeight = window.innerHeight;
const documentHeight = document.documentElement.scrollHeight;
const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
const scrollPercent = (scrollTop / (documentHeight - windowHeight)) * 100;
document.getElementById('progressBar').style.width = scrollPercent + '%';
});
// Tab Switching
function switchTab(event, tabId) {
const tabContents = document.querySelectorAll('.tab-content');
const tabButtons = document.querySelectorAll('.tab-btn');
tabContents.forEach(content => content.classList.remove('active'));
tabButtons.forEach(btn => btn.classList.remove('active'));
document.getElementById(tabId).classList.add('active');
event.target.classList.add('active');
}
// Copy Code
function copyCode(button) {
const codeBlock = button.parentElement;
const code = codeBlock.querySelector('pre').textContent;
navigator.clipboard.writeText(code).then(() => {
const originalText = button.textContent;
button.textContent = 'Copied!';
button.classList.add('copied');
setTimeout(() => {
button.textContent = originalText;
button.classList.remove('copied');
}, 2000);
});
}
// Accordion Toggle
function toggleAccordion(header) {
const content = header.nextElementSibling;
const icon = header.querySelector('.accordion-icon');
header.classList.toggle('active');
content.classList.toggle('active');
icon.classList.toggle('rotate');
}
// Quiz System
let score = 0;
let answeredQuestions = new Set();
function checkAnswer(element, isCorrect, questionNumber) {
// Prevent multiple answers for same question
if (answeredQuestions.has(questionNumber)) {
return;
}
const options = element.parentElement.querySelectorAll('.quiz-option');
const feedback = document.getElementById('feedback' + questionNumber);
// Disable all options
options.forEach(opt => {
opt.style.pointerEvents = 'none';
});
answeredQuestions.add(questionNumber);
if (isCorrect) {
element.classList.add('correct');
feedback.classList.add('show', 'correct');
feedback.innerHTML = '🎉 <strong>Correct!</strong> You nailed it! Keep going!';
score++;
updateScore();
createConfetti();
} else {
element.classList.add('incorrect');
feedback.classList.add('show', 'incorrect');
feedback.innerHTML = '❌ <strong>Not quite!</strong> Review the material and try to understand why.';
}
// Check if quiz is complete
if (answeredQuestions.size === 3) {
setTimeout(() => {
if (score === 3) {
document.getElementById('quizComplete').style.display = 'block';
createMassiveConfetti();
}
}, 1000);
}
}
function updateScore() {
document.getElementById('scoreDisplay').textContent = score;
}
// Confetti Effect
function createConfetti() {
for (let i = 0; i < 30; i++) {
setTimeout(() => {
const confetti = document.createElement('div');
confetti.classList.add('confetti');
confetti.style.left = Math.random() * 100 + '%';
confetti.style.background = `hsl(${Math.random() * 360}, 70%, 60%)`;
confetti.style.animationDuration = (Math.random() * 2 + 2) + 's';
document.body.appendChild(confetti);
setTimeout(() => confetti.remove(), 3000);
}, i * 30);
}
}
function createMassiveConfetti() {
for (let i = 0; i < 100; i++) {
setTimeout(() => {
const confetti = document.createElement('div');
confetti.classList.add('confetti');
confetti.style.left = Math.random() * 100 + '%';
confetti.style.background = `hsl(${Math.random() * 360}, 70%, 60%)`;
confetti.style.animationDuration = (Math.random() * 3 + 2) + 's';
confetti.style.width = (Math.random() * 10 + 5) + 'px';
confetti.style.height = (Math.random() * 10 + 5) + 'px';
document.body.appendChild(confetti);
setTimeout(() => confetti.remove(), 5000);
}, i * 20);
}
}
// Smooth Scroll
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
const target = document.querySelector(this.getAttribute('href'));
if (target) {
target.scrollIntoView({ behavior: 'smooth', block: 'start' });
}
});
});
// Animate sections on scroll
const observerOptions = {
threshold: 0.1,
rootMargin: '0px 0px -100px 0px'
};
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.style.opacity = '1';
entry.target.style.transform = 'translateY(0)';
}
});
}, observerOptions);
document.querySelectorAll('.section').forEach(section => {
section.style.opacity = '0';
section.style.transform = 'translateY(30px)';
section.style.transition = 'all 0.6s ease';
observer.observe(section);
});
</script>
</body>
</html>
Live Preview