Ariade Header and Menu

Description

Ariade Header and Menu gives the free Ariade block theme its header. WordPress.org theme rules keep this kind of functionality out of themes, so it lives here, in a small plugin you install once and forget. Activate it and the Ariade header is in place – there is nothing to switch on.

What you get

  • One header, set up from its own settings. Select the Ariade Site Header block in the Site Editor and everything is in its settings panel: brand style, colours, the menu it shows, the header buttons and letter case. No code and no CSS needed.
  • Brand style. Logo only, logo with site name and tagline, or name and tagline only.
  • Header colours with a contrast check. Background, menu links, hover, current page, button, drop-down panel and the mobile menu. Each pair is checked against WCAG as you choose, and hover and the current page are also underlined, so they never rely on colour alone.
  • A logo that works on a dark header. Show the logo in white, or choose a separate logo for dark backgrounds.
  • You can see where the menu comes from. The settings panel names the menu shown in the header and links straight to it.
  • A drop-down menu that works for everyone. Arrow keys move between items, Escape closes a sub-menu, focus is always visible, and screen readers hear each item once, with no stray numbers or icons.
  • A mobile drawer with the same buttons. The menu drawer on small screens shows the same header button as the desktop header, with the text and link you set once.
  • An auto-built sitemap block. Drop it on a page and it lists every page, post and category on the site, grouped and paginated, kept up to date on its own.
  • Valid HTML, kept that way. Under Settings, Ariade Header and Menu: one title tag per page when an SEO plugin prints its own, no invalid “auto” in image sizes, stray style code moved out of the body, and anything injected between the head and the body removed. All four are on by default and can be switched off.
  • Text exactly as you wrote it. Made to match Ariade’s house style: plain hyphens, no automatic dashes.

Built accessibility-first

Every part of this plugin was tested by hand with JAWS, NVDA, VoiceOver and TalkBack, on the keyboard alone, and at 200 and 400 percent zoom. It meets WCAG 2.2 Level AA.

For developers

The filter ariade_brand_markup still replaces the brand lockup completely (it now also receives the chosen brand style). ariadec_use_ariade_header set to false keeps the theme’s core Navigation header.

Live demo: showcase.ananyoo.com

Blocks

This plugin provides 4 blocks.

  • Ariade Header Actions Header action buttons – search, account, cart, the "Get the theme" button, and the mobile menu button. Show or hide account, cart and the CTA, and edit the CTA, from the block settings.
  • Ariade Primary Menu The accessible primary navigation – desktop mega-menu plus mobile drawer. Menu items are managed in Appearance → Menus (assign a menu to the "Primary" location).
  • Ariade Sitemap A dynamic, WCAG-friendly HTML sitemap that auto-populates from your content. Choose which content types to list, the marker style, columns, and how large catalogues are handled (link to archives or numbered pages).
  • Ariade Site Header The one Ariade accessible header – brand, drop-down menu, mobile drawer and header buttons. Brand style, header colours, letter case and the buttons are all set in the block settings.

Installation

  1. Install and activate the free Ariade theme from Appearance, Themes, Add New.
  2. Install and activate Ariade Header and Menu from Plugins, Add New. The Ariade header is used straight away.
  3. Open Appearance, Menus, and assign a menu to the Primary location. Until you do, the header lists your published top-level pages.
  4. To change the brand, colours or header button, open Appearance, Editor, edit the Header, select the Ariade Site Header block and use its settings panel.

FAQ

My page had two title tags. Is that fixed?

Yes. With Rank Math, Yoast, All in One SEO or SEOPress active, WordPress no longer prints its own block-theme title, so each page has exactly one. It is on by default under Settings, Ariade Header and Menu.

Do I need the Ariade theme?

The blocks work on any block theme, but they are designed for Ariade and match its header without any extra styling.

Where do I set the header button, brand and colours?

In the Site Editor, edit the Header template part, select the Ariade Site Header block, and use its settings panel. The mobile drawer button follows the same button setting.

Why was the plugin renamed?

It was called Ariade Companion. The new name says what it does. The plugin folder and all settings are unchanged, so updating keeps everything as it was.

How do I add the sitemap?

Add the Ariade Sitemap block to any page. It lists your pages, posts and categories automatically and keeps itself current.

Does it load anything from outside my site?

No. The plugin makes no external requests and collects no data.

Reviews

There are no reviews for this plugin.

Contributors & Developers

“Ariade Header and Menu” is open source software. The following people have contributed to this plugin.

Contributors

Changelog

1.5.2

  • Security: all block output is now escaped late, on output. The header,
    menu and header-actions blocks pass their markup through wp_kses()
    with an allow-list of the elements the header uses (new filter
    ariadec_header_allowed_html); the Sitemap block escapes its lists,
    pager and wrapper attributes; the cart badge uses wp_kses_post().

1.5.1

  • Mobile menu colours now also reach third-level rows (a sub-menu inside
    a sub-menu), which kept the theme blue in 1.5.0.

1.5.0

  • New colours on the Ariade Site Header block: menu link on hover and
    focus, current page, drop-down background and text, and a Mobile menu
    colours panel (background, text, accent). Every pair has a WCAG
    contrast check in the editor; hover and the current page are also
    underlined, so they never rely on colour alone.
  • The mobile menu button follows the header button colours.
  • New: logo on a dark header. “White logo” shows the logo in white (the
    bundled Ariade logo switches to its white version), or choose a
    separate logo image for dark backgrounds.
  • Each new setting only acts when it is chosen, so existing headers look
    exactly as before.

1.4.2

  • The “No site logo is set yet” hint in the Brand panel no longer shows
    on sites that display the bundled Ariade logo.

1.4.1

  • Fix: on a site with no logo of its own but the Ariade branding switch
    on (theme demos), the logo brand styles now show the bundled Ariade
    logo, as the theme’s Site Logo block does, instead of the site name.

1.4.0

  • Renamed from Ariade Companion to Ariade Header and Menu. The slug
    (ariade-companion) and all saved settings are unchanged.
  • New: Brand style on the Ariade Site Header block – logo only, logo with
    site name and tagline, or name and tagline only. Replaces the need for
    the ariade_brand_markup filter on client sites; the filter stays for
    developers and now also receives the chosen style.
  • New: header colours on the block – background, menu links and icons,
    button background and button text – each with a WCAG contrast check in
    the editor. Drop-down panels and the mobile menu keep their own colours.
  • New: capital letters in the menu and buttons can be switched off.
  • New: the block settings name the menu shown in the header, with links
    to edit it or choose another.
  • One header only: with the plugin active, Ariade’s stock core Navigation
    header is replaced by the Ariade header in memory. The “Use the Ariade
    header / No thanks” notice is gone. Headers customised in the Site
    Editor and child themes with their own header file are left alone.
    Filter ariadec_use_ariade_header (default true).
  • With no menu assigned, the header now lists the site’s published
    top-level pages instead of sample links.
  • Fix: the default browser icon on fresh installs pointed at image files
    the plugin never shipped. It now uses the icon bundled with Ariade.

1.3.5

  • New filter ariade_brand_markup on the header brand block, so a child theme
    or plugin can supply its own brand lockup (for example a client logo mark
    beside the site name and tagline). The default output is unchanged.

1.3.4

  • All four Valid HTML corrections are now on by default, so a fresh
    install validates out of the box. Saved settings are kept as they are.
  • The settings row is created on activation and checked on each admin
    load, so a reinstall or a stale cache can no longer lose the settings.

1.3.3

  • Fix: the page-rewriting corrections now wrap every other plugin’s
    output buffer, so they also catch markup that another plugin adds at
    the very end of the page, such as an element injected before the body.

1.3.2

  • New Valid HTML option: remove anything placed between the head and the
    body. Some hosting page-speed layers inject an element there, which
    makes the W3C validator stop reading the page. Off until switched on.

1.3.1

  • Fix: the single title tag correction now runs just before the title
    prints, so it also works when WordPress adds its block-theme title while
    the template loads. 1.3.0 could leave two title tags with Rank Math.

1.3.0

  • New: Valid HTML module, under Settings, Ariade Companion. One title tag
    per page when an SEO plugin prints its own; no invalid “auto” value in
    image sizes; and an optional fix that moves style code printed inside
    the body into the head. The first two act at the source and rewrite
    nothing; the third is off until you switch it on.

1.2.0

  • First release on WordPress.org.
  • The header button now defaults to “Contact us”, linking to your contact
    page. Set your own text and link on the Header actions block.
  • Passes WordPress Plugin Check with no findings: every header link is
    escaped at output, sitemap template variables carry the plugin prefix.

1.1.5

  • House style: every en dash and em dash in the plugin’s own text and
    readme is now a plain hyphen.

1.1.4

  • The mobile menu button now shows the same text and link as the header
    button. It reads the Header actions block’s settings from the header
    template part, so setting the button once in the Site Editor changes
    both. Before, the mobile menu always fell back to the contact page.

1.1.3

  • The mobile drawer button now follows the header block’s own call to action settings. It is hidden when the header call to action is switched off, and it uses the header’s button text and link when they are set. Before, the drawer ignored both and always showed the default “Get the theme”. Without header settings it keeps the theme default, and the ariade_drawer_cta filter still has the final say; it now also receives the header options as a second argument.
  • The desktop header button now falls back to the contact page this site actually uses, the same lookup the drawer button already had, instead of a hard coded /contact/.
  • Menu numbers in the mobile drawer (01, 02 and so on) are hidden from screen readers with aria-hidden. They sat inside the link text, so links were announced as “Home zero one” and “Contact zero seven”. The accessible name is now just the menu label.

1.1.2

  • The mobile drawer button now links to the contact page this site actually uses. It was hard coded to /contact/, so on any install that names the page differently the button spent a redirect before arriving. The lookup is cached for a day and the ariade_drawer_cta filter still overrides it.

1.1.1

  • Fix: the auto-populated sitemap is back on the Sitemap page. Since Ariade 1.5.0 the theme’s “ariade/sitemap” pattern is a core-blocks list, and although this plugin carried the Ariade Sitemap block, nothing inserted it into the page – so the Sitemap page (and child-theme pages such as ananyoo.com’s /table-of-contents/ that reuse the pattern) lost the patterned hero, the card grid and the per-section pagination. The companion now swaps the pattern’s content for the block on init (priority 30, after theme patterns and block registration), in memory only; theme files and the database are untouched. Skipped automatically when the block or the pattern is missing, or when the pattern already contains the block (classic full Ariade theme). New filter ariadec_restore_sitemap_pattern (default true) to keep the core-blocks version.

1.1.0

  • New: LinkedIn-friendly link previews. The plugin removes the two WordPress oEmbed discovery <link> tags from the page head (filter ariadec_remove_oembed_discovery, default on). LinkedIn’s crawler reads oEmbed before Open Graph and the WordPress oEmbed “rich” response has only the post title and author, so every post preview on LinkedIn showed the wrong title, “Rich media” and “No image found”. With the links gone LinkedIn uses the Open Graph title, description and image, like Facebook and X. The oEmbed endpoint itself is unchanged. Placed in the companion rather than the theme because the WordPress.org theme requirements list wp_oembed_add_discovery_links as a hook a theme must not remove. Verified with the LinkedIn Post Inspector on 81 ananyoo.com URLs, 4 September 2026.

1.0.0

  • First release. Carries the four Ariade blocks (site-header, primary-nav, header-actions, sitemap) moved out of the theme for WordPress.org compliance, the front-end navigation script, the header inserter pattern, the one-click header switch, and the default-favicon fallback. Safe alongside the classic full Ariade theme (all registrations and definitions are guarded).