Get the free theme
View Categories

Setting a Global Header and Footer

3 min read

Table of Contents

Repeating the same navigation and footer on every page by hand gets old fast. Canvas lets you set them once and wrap every page automatically. Go to Appearance, Loupely Canvas. You will find a header box and a footer box. Paste raw HTML into each, including any style and script they need. From then on, the header prints above your page content and the footer prints below it, on every page that uses the global pair.

These are passthrough boxes like everything else in Canvas. There is no nav builder in the way. You write the header markup you want, and that is what renders. If a single page needs a different header or footer, or none at all, see per page header and footer overrides.

Optional tokens

The header and footer boxes also accept a few tokens for the parts that change, so you do not have to hardcode them. {site_title}, {tagline}, {home_url}, and {year} fill in site values, which is handy for a footer line like the current year next to your site title. {logo} drops in the site logo, and {menu:header} or {menu:footer} drops in a menu you have assigned under Appearance, Menus. You do not have to use any of them; hand coding the whole header still works exactly as before. For the full list and examples, see using tokens in the header and footer.

<lc-toy:global-frame>
Trestle Coffee Co.   Menu   Hours   Journal
Open by the freight houseSet the clock to the 8:14.
MenuEspresso, drip, and whatever Number Nine is roasting.
JournalBeatrice is down again. We are coaxing her back.
Milepost 47   Closed Mondays
set once. the header and footer wrap every page.