What WordPress function before </head> lets plugins inject scripts?
📦 WordPress
✨ The Prompt Phrase
<?php wp_head(); ?>
💻 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 before </head> lets plugins inject scripts? - 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;
}
/* Progress Bar */
.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;
}
/* 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);
}
.hero-subtitle {
font-size: 1.2rem;
margin-top: 15px;
position: relative;
z-index: 1;
opacity: 0.9;
}
/* 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;
box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}
.score-number {
color: var(--accent);
font-size: 1.5rem;
}
/* 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;
line-height: 1.6;
}
.code-annotation {
color: var(--success);
font-style: italic;
}
.code-tag {
color: #f472b6;
}
.code-function {
color: #fbbf24;
}
.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;
}
.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;
}
/* 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);
}
/* 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;
}
/* 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);
}
/* Visual Demo */
.visual-demo {
background: var(--dark);
border-radius: 15px;
padding: 30px;
margin: 20px 0;
border: 2px solid var(--primary);
}
.demo-browser {
background: #fff;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}
.demo-browser-bar {
background: #e5e7eb;
padding: 10px;
display: flex;
align-items: center;
gap: 8px;
}
.demo-dot {
width: 12px;
height: 12px;
border-radius: 50%;
background: #ef4444;
}
.demo-dot:nth-child(2) {
background: #fbbf24;
}
.demo-dot:nth-child(3) {
background: #4ade80;
}
.demo-content {
padding: 20px;
color: #1e293b;
font-size: 0.9rem;
}
.demo-highlight {
background: #fef3c7;
padding: 2px 6px;
border-radius: 4px;
font-weight: bold;
}
/* 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;
}
/* 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;
}
}
/* Quiz Complete */
#quizComplete {
text-align: center;
margin-top: 30px;
padding: 30px;
background: linear-gradient(135deg, var(--success) 0%, var(--primary) 100%);
border-radius: 20px;
}
/* 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;
}
.score-display {
top: 10px;
right: 10px;
padding: 10px 15px;
font-size: 1rem;
}
.score-number {
font-size: 1.2rem;
}
}
</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 wp_head() Hook</h1>
<p class="hero-subtitle">The magical function that powers your WordPress site! ✨</p>
<div class="hero-code"><?php wp_head(); ?></div>
</div>
<!-- What Is It Section -->
<div class="section">
<h2>🤔 What Is It?</h2>
<p>
<strong>wp_head()</strong> is one of the most important <span class="tooltip">action hooks<span class="tooltiptext">A hook is a point in WordPress code where you can "hook in" your own functions</span></span> in WordPress!
Think of it as a VIP backstage pass 🎫 that allows plugins and themes to inject essential code into your website's <code><head></code> section.
</p>
<p>
When you place <code><?php wp_head(); ?></code> just before the closing <code></head></code> tag in your theme,
WordPress says "Hey everyone! This is your chance to add your stuff to the header!" 📢
</p>
<div class="card-grid" style="margin-top: 30px;">
<div class="card">
<div class="card-icon">🔌</div>
<h4>Plugin Gateway</h4>
<p>Allows plugins to add their scripts, styles, and meta tags</p>
</div>
<div class="card">
<div class="card-icon">🎨</div>
<h4>Theme Hook</h4>
<p>Lets themes inject custom CSS and JavaScript</p>
</div>
<div class="card">
<div class="card-icon">⚙️</div>
<h4>Core Functions</h4>
<p>WordPress core uses it to add essential functionality</p>
</div>
</div>
</div>
<!-- Why Use It Section -->
<div class="section">
<h2>💡 Why Use It?</h2>
<p>Imagine building a house without electrical outlets. Sure, it's a house, but good luck using any appliances! 🏠⚡</p>
<p>That's what a WordPress theme without <code>wp_head()</code> is like. Here's why it's absolutely essential:</p>
<ul class="styled-list">
<li>
<strong>🔌 Plugin Compatibility:</strong> Without wp_head(), most plugins simply won't work!
SEO plugins, analytics tools, contact forms—they all rely on this hook to function properly.
</li>
<li>
<strong>🎯 SEO & Meta Tags:</strong> SEO plugins like Yoast and Rank Math use wp_head() to inject
crucial meta tags, Open Graph data, and structured data for search engines.
</li>
<li>
<strong>📊 Analytics & Tracking:</strong> Google Analytics, Facebook Pixel, and other tracking codes
need wp_head() to be placed in your site's header.
</li>
<li>
<strong>🎨 Custom Styles & Scripts:</strong> Themes and plugins can dynamically add CSS and JavaScript
without modifying your theme files directly.
</li>
<li>
<strong>✅ WordPress Standards:</strong> It's a requirement for theme submission to WordPress.org.
No wp_head(), no approval!
</li>
</ul>
</div>
<!-- How Does It Work Section -->
<div class="section">
<h2>⚙️ How Does It Work?</h2>
<p>Let's pull back the curtain and see the magic happen! 🎭</p>
<div class="accordion-item">
<div class="accordion-header" onclick="toggleAccordion(this)">
<span><strong>Step 1:</strong> WordPress Loads Your Theme</span>
<span class="accordion-icon">▼</span>
</div>
<div class="accordion-content">
<p>When someone visits your site, WordPress starts building the page. It reads your theme's header.php file
and processes all the HTML until it encounters <code><?php wp_head(); ?></code>.</p>
</div>
</div>
<div class="accordion-item">
<div class="accordion-header" onclick="toggleAccordion(this)">
<span><strong>Step 2:</strong> The Hook Fires</span>
<span class="accordion-icon">▼</span>
</div>
<div class="accordion-content">
<p>When wp_head() is called, WordPress triggers the 'wp_head' action hook. This is like sending out
an invitation: "Anyone who wants to add something to the header, now's your chance!" 🎉</p>
</div>
</div>
<div class="accordion-item">
<div class="accordion-header" onclick="toggleAccordion(this)">
<span><strong>Step 3:</strong> Plugins & Themes Respond</span>
<span class="accordion-icon">▼</span>
</div>
<div class="accordion-content">
<p>All the plugins and theme functions that have "hooked into" wp_head run their code. They might add:</p>
<ul style="margin-top: 10px; padding-left: 20px;">
<li>CSS stylesheets</li>
<li>JavaScript files</li>
<li>Meta tags</li>
<li>Analytics tracking codes</li>
<li>Custom inline styles</li>
</ul>
</div>
</div>
<div class="accordion-item">
<div class="accordion-header" onclick="toggleAccordion(this)">
<span><strong>Step 4:</strong> Output is Generated</span>
<span class="accordion-icon">▼</span>
</div>
<div class="accordion-content">
<p>All the code from plugins and themes gets combined and inserted right where wp_head() was called.
The browser receives a complete, fully-functional HTML head section! 🎊</p>
</div>
</div>
</div>
<!-- Live Demo Section -->
<div class="section">
<h2>🎮 Visual Demo</h2>
<p>See what happens when wp_head() runs! Click through the tabs to explore:</p>
<div class="tabs">
<button class="tab-btn active" onclick="switchTab(event, 'tab1')">Without wp_head()</button>
<button class="tab-btn" onclick="switchTab(event, 'tab2')">With wp_head()</button>
<button class="tab-btn" onclick="switchTab(event, 'tab3')">What Gets Added</button>
</div>
<div id="tab1" class="tab-content active">
<h3>❌ Theme Without wp_head()</h3>
<div class="visual-demo">
<div class="demo-browser">
<div class="demo-browser-bar">
<div class="demo-dot"></div>
<div class="demo-dot"></div>
<div class="demo-dot"></div>
</div>
<div class="demo-content">
<strong>Problems you'll face:</strong><br><br>
❌ SEO plugins won't add meta tags<br>
❌ Analytics won't track visitors<br>
❌ Many plugins will break<br>
❌ Admin bar won't show when logged in<br>
❌ Custom fonts won't load<br>
❌ Theme won't be approved by WordPress.org
</div>
</div>
</div>
</div>
<div id="tab2" class="tab-content">
<h3>✅ Theme With wp_head()</h3>
<div class="code-block">
<button class="copy-btn" onclick="copyCode(this)">Copy</button>
<pre><span class="code-tag"><!DOCTYPE html></span>
<span class="code-tag"><html</span> <span class="code-function">lang</span>="en"<span class="code-tag">></span>
<span class="code-tag"><head></span>
<span class="code-tag"><meta</span> <span class="code-function">charset</span>="UTF-8"<span class="code-tag">></span>
<span class="code-tag"><title></span>My WordPress Site<span class="code-tag"></title></span>
<span class="code-annotation"><!-- This is where the magic happens! --></span>
<span class="code-function"><?php wp_head(); ?></span>
<span class="code-tag"></head></span>
<span class="code-tag"><body></span></pre>
</div>
<p style="margin-top: 15px;">✨ Everything works perfectly! Plugins can add their code, themes can inject styles, and WordPress can do its thing!</p>
</div>
<div id="tab3" class="tab-content">
<h3>🔍 What Actually Gets Added</h3>
<div class="code-block">
<button class="copy-btn" onclick="copyCode(this)">Copy</button>
<pre><span class="code-annotation"><!-- WordPress Core --></span>
<span class="code-tag"><link</span> rel='stylesheet' href='wp-includes/css/dist/block-library/style.min.css'<span class="code-tag">></span>
<span class="code-annotation"><!-- SEO Plugin (Yoast) --></span>
<span class="code-tag"><meta</span> name="description" content="Your site description"<span class="code-tag">></span>
<span class="code-tag"><meta</span> property="og:title" content="Your Page Title"<span class="code-tag">></span>
<span class="code-annotation"><!-- Analytics Plugin --></span>
<span class="code-tag"><script</span> async src="https://www.googletagmanager.com/gtag/js"<span class="code-tag">></script></span>
<span class="code-annotation"><!-- Theme Styles --></span>
<span class="code-tag"><link</span> rel='stylesheet' href='wp-content/themes/your-theme/style.css'<span class="code-tag">></span>
<span class="code-annotation"><!-- Custom CSS from Customizer --></span>
<span class="code-tag"><style</span> type="text/css"<span class="code-tag">></span>
body { background-color: #ffffff; }
<span class="code-tag"></style></span>
<span class="code-annotation"><!-- And much more! --></span></pre>
</div>
</div>
</div>
<!-- Code Breakdown Section -->
<div class="section">
<h2>🔍 Code Breakdown</h2>
<p>Let's dissect this tiny but mighty piece of code! 🔬</p>
<div class="code-block">
<pre><?php wp_head(); ?></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 "This is PHP code, please execute it!" Everything between these tags is processed by PHP before being sent to the browser.</p>
</div>
<div class="card">
<h4>wp_head</h4>
<p><strong>Function Name</strong></p>
<p>This is the actual WordPress function that triggers the 'wp_head' action hook. It's part of WordPress core and has been around since version 1.2!</p>
</div>
<div class="card">
<h4>()</h4>
<p><strong>Empty Parameters</strong></p>
<p>wp_head() doesn't take any parameters. You just call it as-is. Simple and straightforward!</p>
</div>
<div class="card">
<h4>;</h4>
<p><strong>Statement Terminator</strong></p>
<p>In PHP, every statement ends with a semicolon. It tells PHP "This command is complete!"</p>
</div>
</div>
<h3 style="margin-top: 30px;">📍 Where to Place It</h3>
<div class="code-block">
<button class="copy-btn" onclick="copyCode(this)">Copy</button>
<pre><span class="code-tag"><head></span>
<span class="code-tag"><meta</span> charset="UTF-8"<span class="code-tag">></span>
<span class="code-tag"><meta</span> name="viewport" content="width=device-width, initial-scale=1"<span class="code-tag">></span>
<span class="code-tag"><title></span><?php wp_title(); ?><span class="code-tag"></title></span>
<span class="code-annotation"><!-- Place wp_head() RIGHT BEFORE the closing </head> tag --></span>
<span class="code-function"><?php wp_head(); ?></span>
<span class="code-tag"></head></span></pre>
</div>
</div>
<!-- Common Mistakes Section -->
<div class="section">
<h2>❌ Common Mistakes</h2>
<p>Learn from these common pitfalls! Even experienced developers make these mistakes:</p>
<div class="card-grid">
<div class="card" style="border-left: 4px solid var(--danger);">
<div class="card-icon">🚫</div>
<h4>Forgetting It Entirely</h4>
<p><strong>The Problem:</strong> Not including wp_head() at all</p>
<p style="margin-top: 10px; color: var(--danger);">❌ Result: Most plugins break, admin bar disappears, SEO fails</p>
<p style="margin-top: 10px; color: var(--success);">✅ Solution: Always include it in header.php before </head></p>
</div>
<div class="card" style="border-left: 4px solid var(--danger);">
<div class="card-icon">🚫</div>
<h4>Wrong Placement</h4>
<div class="code-block" style="margin-top: 10px;">
<pre style="color: var(--danger);">❌ WRONG
<body>
<?php wp_head(); ?></pre>
</div>
<div class="code-block">
<pre style="color: var(--success);">✅ CORRECT
</head>
<body></pre>
</div>
<p style="margin-top: 10px;">It must go in the <head> section, not the body!</p>
</div>
<div class="card" style="border-left: 4px solid var(--danger);">
<div class="card-icon">🚫</div>
<h4>Conditional Removal</h4>
<div class="code-block" style="margin-top: 10px;">
<pre style="color: var(--danger);">❌ DON'T DO THIS
<?php
if (!is_admin()) {
wp_head();
}
?></pre>
</div>
<p style="margin-top: 10px;">Never wrap it in conditions. It needs to run on every page load!</p>
</div>
<div class="card" style="border-left: 4px solid var(--danger);">
<div class="card-icon">🚫</div>
<h4>Confusing with wp_footer()</h4>
<p style="margin-top: 10px;">wp_head() goes in the header, wp_footer() goes before </body>.
Both are required, but they're different functions!</p>
</div>
</div>
</div>
<!-- Pro Tips Section -->
<div class="section">
<h2>🌟 Pro Tips</h2>
<p>Level up your WordPress development with these expert insights! 🚀</p>
<ul class="styled-list">
<li>
<strong>🎯 Tip #1: Always Pair with wp_footer()</strong><br>
wp_head() has a partner: wp_footer()! Place it before </body> for complete plugin compatibility.
<div class="code-block" style="margin-top: 10px;">
<pre><?php wp_footer(); ?>
</body>
</html></pre>
</div>
</li>
<li>
<strong>🔌 Tip #2: Hook Your Own Functions</strong><br>
You can add your own code to wp_head using add_action():
<div class="code-block" style="margin-top: 10px;">
<pre>function my_custom_head_code() {
echo '<meta name="author" content="Your Name">';
}
add_action('wp_head', 'my_custom_head_code');</pre>
</div>
</li>
<li>
<strong>⚡ Tip #3: Control Priority</strong><br>
You can control when your function runs by setting priority (default is 10):
<div class="code-block" style="margin-top: 10px;">
<pre>add_action('wp_head', 'my_function', 5); <span class="code-annotation">// Runs early</span>
add_action('wp_head', 'my_function', 20); <span class="code-annotation">// Runs late</span></pre>
</div>
</li>
<li>
<strong>🔍 Tip #4: Debug What's Being Added</strong><br>
To see what's being added to wp_head, view your page source (Ctrl+U) and look in the <head> section.
You'll see all the injected code!
</li>
<li>
<strong>🎨 Tip #5: Clean Up Unnecessary Items</strong><br>
WordPress adds some items you might not need. You can remove them:
<div class="code-block" style="margin-top: 10px;">
<pre>remove_action('wp_head', 'wp_generator'); <span class="code-annotation">// Removes WP version</span>
remove_action('wp_head', 'wlwmanifest_link'); <span class="code-annotation">// Removes Windows Live Writer link</span></pre>
</div>
</li>
</ul>
</div>
<!-- Practice Quiz Section -->
<div class="section">
<h2>🎯 Practice Quiz</h2>
<p>Test your knowledge! Answer these questions to prove you're a wp_head() master! 🏆</p>
<!-- Question 1 -->
<div class="quiz-question">
<h3>Question 1: Where should wp_head() be placed?</h3>
<div class="quiz-options">
<div class="quiz-option" onclick="checkAnswer(this, false, 1)">
A) At the very top of your HTML document
</div>
<div class="quiz-option" onclick="checkAnswer(this, true, 1)">
B) Just before the closing </head> tag
</div>
<div class="quiz-option" onclick="checkAnswer(this, false, 1)">
C) Right after the opening <body> tag
</div>
<div class="quiz-option" onclick="checkAnswer(this, false, 1)">
D) Before the closing </body> tag
</div>
</div>
<div class="quiz-feedback" id="feedback1"></div>
</div>
<!-- Question 2 -->
<div class="quiz-question">
<h3>Question 2: What is the main purpose of wp_head()?</h3>
<div class="quiz-options">
<div class="quiz-option" onclick="checkAnswer(this, false, 2)">
A) To display the site header logo
</div>
<div class="quiz-option" onclick="checkAnswer(this, false, 2)">
B) To create the navigation menu
</div>
<div class="quiz-option" onclick="checkAnswer(this, true, 2)">
C) To allow plugins and themes to inject code into the head section
</div>
<div class="quiz-option" onclick="checkAnswer(this, false, 2)">
D) To load the WordPress admin bar
</div>
</div>
<div class="quiz-feedback" id="feedback2"></div>
</div>
<!-- Question 3 -->
<div class="quiz-question">
<h3>Question 3: What happens if you forget to include wp_head()?</h3>
<div class="quiz-options">
<div class="quiz-option" onclick="checkAnswer(this, false, 3)">
A) Nothing, it's optional
</div>
<div class="quiz-option" onclick="checkAnswer(this, false, 3)">
B) Only the homepage will break
</div>
<div class="quiz-option" onclick="checkAnswer(this, true, 3)">
C) Most plugins won't work and essential features will break
</div>
<div class="quiz-option" onclick="checkAnswer(this, false, 3)">
D) Your site will load faster
</div>
</div>
<div class="quiz-feedback" id="feedback3"></div>
</div>
<div id="quizComplete" style="display: none;">
<h2 style="font-size: 3rem; margin-bottom: 20px;">🎉 Congratulations! 🎉</h2>
<p style="font-size: 1.5rem; margin-bottom: 20px;">You've mastered wp_head()!</p>
<div style="font-size: 5rem; margin: 20px 0;">🏆</div>
<p style="font-size: 1.2rem;">You're now a WordPress hook 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>wp_head()</code></p>
</div>
<div class="summary-item">
<h4>📝 Syntax</h4>
<p><code><?php wp_head(); ?></code></p>
</div>
<div class="summary-item">
<h4>📍 Location</h4>
<p>Before </head> in header.php</p>
</div>
<div class="summary-item">
<h4>🔄 Hook Type</h4>
<p>Action Hook</p>
</div>
<div class="summary-item">
<h4>⚡ Purpose</h4>
<p>Inject code into header</p>
</div>
<div class="summary-item">
<h4>🎨 Required?</h4>
<p>Yes, absolutely!</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 include wp_head() in your theme</li>
<li style="margin: 10px 0;">✅ Place it before </head></li>
<li style="margin: 10px 0;">✅ Pair it with wp_footer()</li>
<li style="margin: 10px 0;">✅ Never wrap it in conditions</li>
<li style="margin: 10px 0;">✅ It's required for WordPress.org themes</li>
<li style="margin: 10px 0;">❌ Don't place it in the body</li>
<li style="margin: 10px 0;">❌ Don't forget it!</li>
</ul>
</div>
</div>
<!-- Footer -->
<footer>
<div class="footer-logo">🚀</div>
<h3>You Did It! 🎉</h3>
<p>You've completed the wp_head() interactive tutorial!</p>
<p style="margin-top: 20px;">Now your WordPress themes will be plugin-friendly and fully functional!</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">Hooks</span>
<span class="badge badge-danger">Essential</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) {
if (answeredQuestions.has(questionNumber)) {
return;
}
const options = element.parentElement.querySelectorAll('.quiz-option');
const feedback = document.getElementById('feedback' + questionNumber);
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\'re on fire! Keep going!';
score++;
updateScore();
createConfetti();
} else {
element.classList.add('incorrect');
feedback.classList.add('show', 'incorrect');
feedback.innerHTML = '❌ <strong>Not quite!</strong> Review the material above and try to understand why.';
}
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