' . esc_html__('Please sign in to access the AI Builder settings.', 'ai-builder') . '
'; return; } // Check if the active theme is a supported FSE theme $supported_fse_themes = array( 'twentytwentytwo', 'twentytwentythree', 'twentytwentyfour', 'twentytwentyfive', 'spectra-one', 'neve-fse', 'raft', 'ollie', 'ona', 'ona-studio', 'ona-fashion', 'ona-architecture', 'ona-photography', 'blockbase', 'bricksy', 'poe', 'beaumont', 'abisko', 'hideo', 'quadrat', 'videomaker', 'axton', 'artsylens', 'catch-fse', 'inspiro-blocks', 'plover', 'jace', 'miniblock-ooak', 'yith-wonder', ); $current_theme = wp_get_theme(); $current_theme_slug = $current_theme ? $current_theme->get_stylesheet() : ''; $is_supported_fse = in_array($current_theme_slug, $supported_fse_themes, true); // Get Site Editor URLs for header and footer pattern selection $header_url = admin_url('site-editor.php?p=%2Fpattern&postType=wp_template_part&categoryId=header'); $footer_url = admin_url('site-editor.php?p=%2Fpattern&postType=wp_template_part&categoryId=footer'); ?>

Generate Headers & Footers with AI

Learn how to create custom headers and footers for your site using AI Builder

1

Generate Your Header

Create a custom header for your site

  1. Open the Site Editor: Go to Header Patterns →
  2. Create or edit your Header Template Part: In Patterns → Template Parts, open Header (or create a new one), then build it with blocks and click Save.
  3. Use the AI chat widget in the bottom-left corner to generate your header content
  4. Describe your header (e.g., "Create a modern header with logo, navigation menu, and CTA button")
  5. Click Generate and let AI create your header
  6. Make it "global" by reusing the same Template Part in templates: Open Templates and ensure each template contains a Template Part block pointing to your main Header (replace old ones if needed).
2

Generate Your Footer

Create a custom footer for your site

  1. Open the Site Editor: Go to Footer Patterns →
  2. Create or edit your Footer Template Part: In Patterns → Template Parts, open Footer (or create a new one), then build it with blocks and click Save.
  3. Use the AI chat widget in the bottom-left corner to generate your footer content
  4. Describe your footer (e.g., "Create a footer with company info, links, and social media icons")
  5. Click Generate and let AI create your footer
  6. Make it "global" by reusing the same Template Part in templates: Open Templates and ensure each template contains a Template Part block pointing to your main Footer (replace old ones if needed).

Pro Tips

  • Be specific in your prompts for better results (e.g., mention colors, layout, elements)
  • You can edit the generated content using the CSS and JS buttons in the chat widget
  • Headers and footers are template parts, so they'll be applied site-wide
  • You can regenerate parts if you're not satisfied with the first result
Header Patterns Footer Patterns