Build a Site-Wide Elementor Header with ElementsKit and AI
Your site name and your menu in a header built with free Elementor, checked from a preview before it goes live.
Prerequisites
A site connected to WPVibe running Elementor (free is enough) and ElementsKit Elementor Addons 4.0.8 or newer (tested on 4.0.8, the free version) on WordPress 6.9 or newer with a classic theme, with an administrator account. The menu you want in the header, under Appearance > Menus.
My WordPress site uses Elementor and the free ElementsKit Elementor Addons plugin. Build a site-wide header with it: [my site name] on the left, my [menu name] menu on the right, background [color], menu links [color], and the menu button on phones [a color that shows on that background].
1. ElementsKit's AI tools run through its own REST route: call rest_api_write with POST /elementskit/v1/mcp-proxy and the body {"tool": "TOOL_NAME", "input": {...}}. Don't use run_ability for them: ElementsKit keeps its abilities off the Abilities REST API. If the route is not found, stop and tell me to update ElementsKit. Run the list-widgets tool with {"search": "menu"} to check it works. Check my theme with GET /wp/v2/themes?status=active. If is_block_theme is true, stop and tell me: ElementsKit's headers need a classic theme.
2. Run list-templates with {"type": "header"} and read each one with GET /elementskit/v1/my-template/get/ID. If one has activation yes, tell me: ElementsKit shows the oldest header that is switched on, so a new one would not appear until that one is off. Ask me whether to replace it. If I say keep it, stop. Note its fields; you may need to switch it back on.
3. Find my menu's slug with GET /wp/v2/menus; if it is not there, stop and ask me.
4. For any ElementsKit widget, run the list-widgets tool (input {"search": "WORD"}) and use the type it returns exactly: a widget type Elementor doesn't know is dropped without an error (the Nav Menu widget is ekit-nav-menu). Elementor's own heading, text-editor and button widgets work too (heading: title, header_size, link {"url"}, title_color; text-editor: editor; button: text, link {"url"}). Create the header with create-header-footer: type header, title "Site header", activation "no", and elements: one container (flex_direction row, flex_justify_content space-between, flex_align_items center, background_background classic, background_color [color]) holding a heading widget (my site name, link to /, title_color) and an ekit-nav-menu widget (elementskit_nav_menu set to the menu's slug, elementskit_menu_text_color set to the link color, elementskit_menu_toggle_icon_color set to the phone menu button color). Leave the tablet link color alone: on tablets and phones the menu opens in a light panel and keeps dark links. Don't pass a template_id: library headers bring demo logos, menus and contact details. Its reply says "activated site-wide" either way; activated false is what counts.
5. Give me the header's preview_url, fetch it with get_page_html and describe it: the name and every menu item. Wait for my yes; the header is not live yet.
6. On my yes, fetch [a page on my site] with get_page_html and note the classes on its body tag and the stylesheet link tags in its head. Then turn the header on. Switch a header on or off with rest_api GET /elementskit/v1/my-template/update/ID and every field as a query parameter: title, type, activation (yes or no), condition_a, condition_singular, condition_singular_id. Read the current values first with GET /elementskit/v1/my-template/get/ID and send them back with only activation changed: the update overwrites every field, and a missing title becomes a generic one. URL-encode every value. Continue only if the get reply has the type you expect (header) and status publish: for an id that doesn't exist the update creates a new, empty template, and for any other post it turns that post into a template. After the update, check that data.id in the reply is the id you sent. Use activation yes, type header, condition_a entire_site, and condition_singular and condition_singular_id empty. If I said to replace an older header in step 2, switch that one off the same way.
7. Then clear any page cache on my site, and if my host keeps an object cache (Redis or Memcached), flush it with run_wp_cli (cache flush): ElementsKit caches which header is on and which menus use mega menu. Fetch the same page with get_page_html and check two things. (a) The new header is on it (selector .ekit-template-content-header returns it) and my theme's own header is gone. (b) Every body class and stylesheet link from step 6 is still there: on many themes ElementsKit's header replaces my theme's header.php, and anything the theme writes there itself is lost, which can take away the font or background. If either check fails, check once more. If it still fails, switch the header off (activation no), switch back on any older header you switched off, clear the caches again, fetch the page to confirm my old header is back, and tell me what you saw.
8. Give me the header's Elementor edit link, and ask me to open my site on a phone and check the menu button and the menu. Tell me how to undo: switch the header off with the same route, switch back on any older header you switched off, and clear the caches. Pages on Elementor's Canvas template never show it.
Skip pasting the full prompt. Drop this into your AI on a site that already has WPVibe:
Run the “Build a Site-Wide Elementor Header with ElementsKit and AI” recipe from the WPVibe cookbook on my connected site.
Free Elementor builds pages, not the header around them; that is the Theme Builder in Elementor Pro. The free ElementsKit Elementor Addons plugin has its own header builder, and it still takes a template, its Nav Menu widget, the right display condition and a theme that cooperates.
The AI builds the header from your own menu and colors and creates it switched off. It gives you the preview link and describes what is in it, turns it on only on your yes, then checks a real page to confirm it replaced your theme’s header and left the rest of the page alone.
ElementsKit shows the oldest header that is switched on, so the AI checks for one first and asks before replacing it. The recipe builds from your menu rather than ElementsKit’s template library, whose headers bring demo logos, menus and contact details. Switching the header off brings your theme’s back. Want a mega menu in it? Add one next.
Outcome
A header with your site name and menu, in place of your theme's on every page except Elementor Canvas pages.