Skip to content
pagecraft

Global Header & Footer

Audience: Editor (super admin) and Site Builder.

PageCraft lets a super admin "lock" any section as a sitewide global header or global footer. The locked section then renders on every page that includes the appropriate template tag — so updates happen in one place and ripple across the site immediately.

Permissions

Lock and unlock buttons appear only for super admin members. Regular editors see the section as ordinary content and can edit normally on whichever page they're on, but their edits won't propagate.

Locking a section as global

  1. Build the section (or pick one from the picker).
  2. Hover the section to reveal its toolbar.
  3. Click 🔒 Lock in the toolbar. PageCraft asks which slot — header or footer.
  4. Save.

PageCraft strips ContentBox's editor-only UI before storing — toolbars, drag handles, click hooks, the data-cb-original-content snapshot, and any legacy data-pc-manual-html attributes are all removed so the saved markup is clean. See Actions/SaveGlobalComponent.php if you want to audit exactly what's stripped.

Storage

Locked components live in the exp_pagecraft_global_components table, one row per site_id × component_key (header or footer). Columns:

  • id — primary key
  • site_id — MSM site
  • component_key — header or footer
  • html — cleaned markup
  • css — accumulated section CSS
  • is_locked — flag (1 when active)
  • updated_by, created_at, updated_at

You can copy these rows between environments via a normal SQL dump.

Rendering the global header / footer

In any front-end template:

{exp:page_craft:global_header}
{exp:page_craft:global_footer}

Accepted parameters:

  • wrapper="yes" (default) — wrap the rendered HTML in a <div class="is-wrapper"> element (the class the front-end runtime expects). Set no to omit it when you're supplying your own wrapper.
  • class="..." — extra classes on the wrapper.
  • runtime="yes" — also enqueue the runtime stylesheet+script. Useful when the global header includes ContentBox plugins that need front-end JS (sliders, accordions, etc.).

Both tags are safe to drop on every page even before any header/footer has been locked — they return an empty string when no row exists.

Where to place them — the sitewide wrapper

Because the locked header/footer are entry-independent (they're keyed only on the site, not on the page being viewed), the tags belong in your layout/wrapper template, not in individual page templates — and they should be called unconditionally so the header and footer appear on every page.

A minimal PageCraft wrapper (global/_wrapper):

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    {pagecraft_css}
    {pagecraft_styles}
</head>
<body>

    <div class="pc-global-header-wrap is-wrapper">{exp:page_craft:global_header wrapper="no"}</div>

    {layout:contents}

    <div class="pc-global-footer-wrap is-wrapper">{exp:page_craft:global_footer wrapper="no"}</div>

    {pagecraft_js}
    {pagecraft_scripts}

</body>
</html>

Notes on this pattern:

  • Call them unconditionally. A common mistake is wrapping the header in {if segment_1 != "" AND segment_1 != "home"}…{/if} — that hides it on the home page. The locked header is meant to be sitewide; if home appears to "already have a nav," that nav is almost certainly built into the home entry's content, not the global header. Pick one source of truth: either use the global header everywhere (and remove any nav baked into the home entry), or keep the home entry's own nav and condition the global header off for home. Don't run both, or home shows two navs.
  • wrapper="no" + your own .is-wrapper div. The runtime's prepareContent() looks for an element with class is-wrapper; giving the header/footer their own .is-wrapper wrapper (as above) satisfies that and lets you style/position the bar via .pc-global-header-wrap. (wrapper="yes", the default, wraps the output in <div class="is-wrapper"> for you — use no only when you supply your own wrapper, as here.)
  • runtime="yes" is the default, so plugin-driven headers (a nav-menu, social links, etc.) get their front-end JS/CSS automatically.

Editing locked content

Open any entry that's editable, click the locked section's 🔓 Unlock toolbar button. The section becomes editable on that page. When you're done, click 🔒 Lock again to push the changes back to the global slot. The version on every other page updates next request.

Scoping note

Each MSM site has its own header and footer slot. Switching site (the site-picker in CP) shows the section row for that site only.