MichaelMassamba/wordpress-wizardry-wizards
0
1<!DOCTYPE html>2<html lang="en" class="light">3<head>4 <meta charset="UTF-8">5 <meta name="viewport" content="width=device-width, initial-scale=1.0">6 <title>WordPress Theme Tutorial | WPBreeze</title>7 <link rel="icon" type="image/x-icon" href="/static/favicon.ico">8 <script src="https://cdn.tailwindcss.com"></script>9 <script src="https://unpkg.com/feather-icons"></script>10</head>11<body class="bg-gray-50 dark:bg-gray-900 min-h-screen">12 <!-- Navigation -->13 <nav class="bg-white dark:bg-gray-800 shadow-sm">14 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">15 <div class="flex justify-between h-16">16 <div class="flex items-center">17 <a href="index.html" class="text-xl font-bold gradient-text">WPBreeze</a>18 </div>19 <div class="hidden md:flex items-center space-x-8">20 <a href="index.html" class="text-gray-900 dark:text-white hover:text-primary-600 dark:hover:text-primary-400 font-medium">Home</a>21 <a href="tutorial.html" class="text-primary-600 dark:text-primary-400 font-medium">Tutorial</a>22 <a href="resources.html" class="text-gray-900 dark:text-white hover:text-primary-600 dark:hover:text-primary-400 font-medium">Resources</a>23 <a href="showcase.html" class="text-gray-900 dark:text-white hover:text-primary-600 dark:hover:text-primary-400 font-medium">Showcase</a>24</div>25 <div class="flex items-center">26 <button id="theme-toggle" class="p-2 rounded-full focus:outline-none focus:ring-2 focus:ring-primary-500">27 <i data-feather="moon" class="hidden dark:block text-gray-300"></i>28 <i data-feather="sun" class="dark:hidden text-gray-700"></i>29 </button>30 </div>31 </div>32 </div>33 </nav>34 35 <!-- Tutorial Content -->36 <section class="py-12 px-4 sm:px-6 lg:px-8 max-w-4xl mx-auto">37 <h1 class="text-3xl md:text-4xl font-bold text-gray-900 dark:text-white mb-6">WordPress Theme Development Tutorial</h1>38 39 <article class="prose dark:prose-invert max-w-none">40 <h2 class="text-2xl font-bold mt-8">Creating Your First Theme</h2>41 <ol class="list-decimal pl-6 mb-6">42 <li class="mb-2">Create a new folder in <code>wp-content/themes/</code> named after your theme (e.g., <code>my-theme</code>)</li>43 <li class="mb-2">Create these essential files:44 <ul class="list-disc pl-6 mt-2">45 <li><code>style.css</code> - Theme metadata and styles</li>46 <li><code>index.php</code> - Main template file</li>47 <li><code>functions.php</code> - Theme functions</li>48 </ul>49 </li>50 <li class="mb-2">Add this header to your <code>style.css</code>:51 <pre class="bg-gray-100 dark:bg-gray-700 p-4 rounded-md mt-2">52/*53Theme Name: My Awesome Theme54Theme URI: https://example.com/my-theme55Author: Your Name56Author URI: https://example.com57Description: A custom WordPress theme58Version: 1.059*/</pre>60 </li>61 <li class="mb-2">Add basic template code to your <code>index.php</code>:62 <pre class="bg-gray-100 dark:bg-gray-700 p-4 rounded-md mt-2">63<!DOCTYPE html>64<html <?php language_attributes(); ?>>65<head>66 <meta charset="<?php bloginfo('charset'); ?>">67 <title><?php wp_title(); ?></title>68 <?php wp_head(); ?>69</head>70<body <?php body_class(); ?>>71 <header>72 <h1><?php bloginfo('name'); ?></h1>73 </header>74 75 <main>76 <?php if (have_posts()) : while (have_posts()) : the_post(); ?>77 <article>78 <h2><?php the_title(); ?></h2>79 <?php the_content(); ?>80 </article>81 <?php endwhile; endif; ?>82 </main>83 84 <?php wp_footer(); ?>85</body>86</html></pre>87 </li>88 <li class="mb-2">Add basic functions to <code>functions.php</code>:89 <pre class="bg-gray-100 dark:bg-gray-700 p-4 rounded-md mt-2">90<?php91function my_theme_enqueue_styles() {92 wp_enqueue_style('my-theme-style', get_stylesheet_uri());93}94add_action('wp_enqueue_scripts', 'my_theme_enqueue_styles');95?></pre>96 </li>97 </ol>98 99 <h2 class="text-2xl font-bold mt-8">Activating Your Theme</h2>100 <div class="bg-blue-50 dark:bg-blue-900/30 border-l-4 border-blue-500 p-4 mb-6">101 <h3 class="font-bold text-blue-800 dark:text-blue-200 mb-2">Steps to Activate:</h3>102 <ol class="list-decimal pl-6">103 <li class="mb-2">Log in to your WordPress admin dashboard</li>104 <li class="mb-2">Navigate to <code>Appearance > Themes</code></li>105 <li class="mb-2">Find your theme in the available themes list (it should appear automatically)</li>106 <li class="mb-2">Click on your theme and then click "Activate"</li>107 </ol>108 </div>109 <h2 class="text-2xl font-bold mt-8">Creating a Custom Homepage Template</h2>110 <ol class="list-decimal pl-6 mb-6">111 <li class="mb-2">Create a new file in your theme directory called <code>front-page.php</code></li>112 <li class="mb-2">Add this basic structure:113 <pre class="bg-gray-100 dark:bg-gray-700 p-4 rounded-md mt-2">114<?php115/**116 * Front Page Template117 */118get_header();119?>120 121<main>122 <!-- Hero Section -->123 <section class="hero">124 <div class="container">125 <h1><?php bloginfo('name'); ?></h1>126 <p><?php bloginfo('description'); ?></p>127 <a href="#" class="button">Learn More</a>128 </div>129 </section>130 131 <!-- Featured Content -->132 <section class="features">133 <div class="container grid">134 <?php for ($i = 1; $i <= 4; $i++): ?>135 <div class="feature-item">136 <img src="<?php echo get_template_directory_uri(); ?>/assets/img/feature-<?php echo $i; ?>.jpg" alt="Feature <?php echo $i; ?>">137 <h3>Feature <?php echo $i; ?></h3>138 </div>139 <?php endfor; ?>140 </div>141 </section>142</main>143 144<?php get_footer(); ?></pre>145 </li>146 <li class="mb-2">Create a directory called <code>assets/img</code> in your theme and add four images (feature-1.jpg to feature-4.jpg)</li>147 <li class="mb-2">Add CSS styling in your <code>style.css</code>:148 <pre class="bg-gray-100 dark:bg-gray-700 p-4 rounded-md mt-2">149.hero {150 background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), 151 url('<?php echo get_template_directory_uri(); ?>/assets/img/hero-bg.jpg');152 background-size: cover;153 background-position: center;154 color: white;155 padding: 8rem 0;156 text-align: center;157}158 159.hero h1 {160 font-size: 3rem;161 margin-bottom: 1rem;162}163 164.features {165 padding: 4rem 0;166}167 168.grid {169 display: grid;170 grid-template-columns: repeat(4, 1fr);171 gap: 2rem;172}173 174.feature-item img {175 width: 100%;176 height: 200px;177 object-fit: cover;178 border-radius: 8px;179}</pre>180 </li>181 <li class="mb-2">Go to WordPress Settings > Reading and set "Your homepage displays" to "A static page"</li>182 <li class="mb-2">Select "Front Page" from the dropdown menu</li>183 </ol>184 185 <h2 class="text-2xl font-bold mt-8">Next Steps</h2>186 <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mt-6 mb-12">187<div class="bg-white dark:bg-gray-700 p-6 rounded-lg shadow-md">188 <h3 class="font-bold text-lg mb-3">Theme Development Tips</h3>189 <ul class="list-disc pl-6 space-y-2">190 <li>Use <code>get_template_part()</code> for reusable components</li>191 <li>Create a <code>header.php</code> and <code>footer.php</code></li>192 <li>Learn about <code>WP_Query</code> for custom content</li>193 <li>Use WordPress hooks (<code>add_action</code>, <code>add_filter</code>)</li>194 </ul>195 </div>196 <div class="bg-white dark:bg-gray-700 p-6 rounded-lg shadow-md">197 <h3 class="font-bold text-lg mb-3">Essential Files</h3>198 <ul class="list-disc pl-6 space-y-2">199 <li><code>front-page.php</code> - Custom homepage template</li>200 <li><code>single.php</code> - Single post template</li>201<li><code>page.php</code> - Page template</li>202 <li><code>archive.php</code> - Archive pages</li>203 <li><code>404.php</code> - 404 error page</li>204 </ul>205 </div>206 </div>207 </article>208 </section>209 210 <!-- Image Placeholder Examples -->211 <section class="py-12 px-4 sm:px-6 lg:px-8 max-w-4xl mx-auto">212 <h2 class="text-2xl font-bold text-gray-900 dark:text-white mb-6">Image Placeholder Examples</h2>213 <div class="grid grid-cols-2 md:grid-cols-4 gap-4">214 <div>215 <img src="http://static.photos/technology/320x240/1" alt="Tech 1" class="w-full h-48 object-cover rounded-lg">216 </div>217 <div>218 <img src="http://static.photos/technology/320x240/2" alt="Tech 2" class="w-full h-48 object-cover rounded-lg">219 </div>220 <div>221 <img src="http://static.photos/technology/320x240/3" alt="Tech 3" class="w-full h-48 object-cover rounded-lg">222 </div>223 <div>224 <img src="http://static.photos/technology/320x240/4" alt="Tech 4" class="w-full h-48 object-cover rounded-lg">225 </div>226 </div>227 </section>228<script>229 feather.replace();230 // Theme toggle functionality231 document.getElementById('theme-toggle').addEventListener('click', function() {232 document.documentElement.classList.toggle('dark');233 localStorage.setItem('theme', document.documentElement.classList.contains('dark') ? 'dark' : 'light');234 });235 </script>236</body>237</html>