Skip to content

DJIA BuilderTemplates and dynamic content · 2 of 7

Header, footer and popup layouts

Headers, footers and popups are layouts: documents that wrap the content of a route. They use the same conditions and priorities as templates, and because each one is a single part of the release, one publish changes it on every page at once.

What this does

Layouts are listed under DJIA Builder → Layouts. For every route the runtime renders, it adds the header and the footer whose conditions match, and after the footer every matching popup as a closed dialog. Pages, templates and layouts are composed at request time from separate parts, so the header is never copied into the pages: a published header change is visible on every route from the next request, without recompiling anything else.

With the DJIA Theme active, routes that WordPress still renders (plugin pages, routes without a template) get the same header, footer and popups, picked by the same conditions, together with your global styles. See Pages rendered by WordPress and the DJIA Theme.

The three layout kinds

Layout kinds
KindWhere it goesPer pageA new one starts with
HeaderAbove the contentThe first matching header, by priorityInclude "Entire site", priority 10
FooterBelow the contentThe first matching footer, by priorityInclude "Entire site", priority 10
PopupA closed dialog after the footerEvery matching popup, by priority, up to fiveNo conditions, priority 10

The rules are the ones of Templates and display conditions: a shop can have its own header with an include such as "Post type archive" or "Product category" at priority 20, while the general header keeps "Entire site" at 10.

Steps

  1. Create the header.

    On DJIA Builder → Layouts click New layout, enter a Name, choose the Type Header and click Create and open the editor.

  2. Build it.

    Typical content: a Logo showing the site logo, a Nav menu that shows one of your WordPress menus, a Button. Keep the header's own CSS on the header; it is loaded wherever the header appears.

  3. Check the conditions and publish.

    With no element selected, the document settings show Template conditions (Include, Entire site) and Priority. Change them if this header is meant for part of the site only, then click Publish. Build and publish the footer the same way.

  4. Add a popup.

    Create a layout of the Type Popup and design its content. Give it conditions; without them it is on no page. In the "Popup" section of its document settings, add triggers under "Open when": "The page has loaded" (with a delay in seconds), "After some time on the page", "The visitor scrolled down" (a scroll depth in %), "The pointer leaves the page (desktop)" or "Elements are clicked" (a CSS selector). Choose "How often": "Every time", "Once per visit (session)" or "Once every N days".

  5. Link to the popup, if you like.

    "Link that opens it" shows the popup's anchor, of the form #djb-popup-…. A Button, Text link or menu item pointing there opens it, and so does the interaction "Open a popup", whatever "How often" says. "Without a trigger the popup opens only from links and interactions."

How a change reaches every page

  • Publishing the layout writes a new release in which only that part is replaced. Every route that resolves to it, on runtime pages and on DJIA Theme pages, shows the new version from the next request.
  • Menus and the site logo need no publish at all. When you save a WordPress menu or its items, assign menu locations or change the site logo, DJIA Builder recompiles every published document whose Nav menu or Logo uses it into a new release. If another publish holds the lock at that moment, a cron job retries.
  • Components inside a layout follow their component: publishing the component recompiles the layout too (see Components).
  • With DJIA Cache, a header or footer publish sends one signal, and DJIA Cache applies its own choice for header and footer changes: a gradual background refresh, or everything at once. See Purging and background refresh after header and footer changes.

What you should see

  • Layouts listType "Header", Conditions "Entire site", Priority 10, Status "published rn"
  • Live pagethe header and footer on every route the runtime renders; the popup's markup after the footer, closed until a trigger fires
  • Go live → Releasesone release per layout publish, and one for each automatic menu or logo rebuild

Limits

  • A page gets one header and one footer: the first match by priority, never two. A route that no header matches has none.
  • At most five popups are added to a page. "How often" applies only to the automatic triggers, and the exit trigger works on desktop only.
  • The Type list of a new layout also offers Section. A Section layout is not placed on pages by its conditions; for a block you reuse, build a component.
  • DJIA Theme pages show the builder header and footer only while a release is active; before the first publish the theme prints its own minimal ones.
  • With "Stage new templates and pages" on, a layout's first publish is staged; switch it Live for everyone under Go live → Templates.

If it doesn't work

  • The old header still shows. Another header with a higher priority also matches the route; compare the Conditions and Priority columns. Then purge any page cache or CDN in front of the site.
  • A plugin page has the old theme's header. The DJIA Theme is not active; use Install & activate or Activate on the Dashboard's "DJIA Theme" card.
  • The popup never opens. Check that it has include conditions for this route, at least one trigger or a link to its anchor, and that "How often" is not holding it back because you have seen it already; test in a private window.
  • The editor warns "Visitors cannot close this popup: turn on the close button or Escape." Turn on "Close button" or "Close with Escape" in the Popup section.

Last verified 2026-10-20 · tested with DJIA Builder 1.0.20.15
To confirm Verified against the plugin code; run the steps on a test site before launch