| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>WordPress Design Wizard</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <script src="https://unpkg.com/feather-icons"></script> |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> |
| <link rel="stylesheet" href="style.css"> |
| </head> |
| <body class="bg-gray-50 min-h-screen"> |
| <custom-header></custom-header> |
| |
| <main class="container mx-auto px-4 py-12"> |
| <div class="max-w-4xl mx-auto bg-white rounded-xl shadow-md overflow-hidden p-8"> |
| <h1 class="text-3xl font-bold text-gray-800 mb-6">WordPress Design Wizard</h1> |
| |
| <div class="mb-8"> |
| <h2 class="text-xl font-semibold text-gray-700 mb-4">How to Implement in WordPress</h2> |
| <ol class="list-decimal pl-6 space-y-3 text-gray-600"> |
| <li>Create a child theme in WordPress</li> |
| <li>Add these files to your child theme directory</li> |
| <li>Enqueue the scripts and styles in your functions.php</li> |
| <li>Use the customizer API for color settings</li> |
| <li>Implement the design system components</li> |
| </ol> |
| </div> |
|
|
| <div class="grid md:grid-cols-2 gap-8"> |
| <div class="bg-gray-100 p-6 rounded-lg"> |
| <h3 class="font-medium text-lg mb-4 flex items-center"> |
| <i data-feather="code" class="mr-2"></i> Code Implementation |
| </h3> |
| <pre class="bg-gray-800 text-gray-100 p-4 rounded text-sm overflow-x-auto"> |
| <code> |
| // In functions.php |
| function enqueue_custom_design() { |
| wp_enqueue_style('tailwind', 'https://cdn.tailwindcss.com'); |
| wp_enqueue_script('feather-icons', 'https://unpkg.com/feather-icons'); |
| wp_enqueue_style('custom-style', get_stylesheet_directory_uri() . '/style.css'); |
| wp_enqueue_script('custom-script', get_stylesheet_directory_uri() . '/script.js'); |
| } |
| add_action('wp_enqueue_scripts', 'enqueue_custom_design'); |
| </code> |
| </pre> |
| </div> |
|
|
| <div class="bg-gray-100 p-6 rounded-lg"> |
| <h3 class="font-medium text-lg mb-4 flex items-center"> |
| <i data-feather="settings" class="mr-2"></i> Customizer Setup |
| </h3> |
| <pre class="bg-gray-800 text-gray-100 p-4 rounded text-sm overflow-x-auto"> |
| <code> |
| // Add to functions.php |
| function theme_customize_register($wp_customize) { |
| // Add color settings |
| $wp_customize->add_setting('primary_color', array('default' => '#3b82f6')); |
| $wp_customize->add_setting('secondary_color', array('default' => '#10b981')); |
| |
| // Add controls |
| $wp_customize->add_control(new WP_Customize_Color_Control( |
| $wp_customize, 'primary_color', array( |
| 'label' => __('Primary Color', 'textdomain'), |
| 'section' => 'colors', |
| ) |
| )); |
| } |
| add_action('customize_register', 'theme_customize_register'); |
| </code> |
| </pre> |
| </div> |
| </div> |
| </div> |
| </main> |
|
|
| <custom-footer></custom-footer> |
|
|
| <script src="components/header.js"></script> |
| <script src="components/footer.js"></script> |
| <script src="script.js"></script> |
| <script>feather.replace();</script> |
| <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script> |
| </body> |
| </html> |
