Your header and footer appear on every page, so they are the best place to start with the Theme Builder. In this guide you will build a sticky header with a mobile menu and a four-column footer, and show both across the whole site. It takes about fifteen minutes.
Before you start
- Set your site logo in WordPress — under Appearance → Customize → Site Identity in classic themes, or with the Site Logo block in the Site Editor of block themes. The Site Logo widget uses it automatically, or you can pick an image in the widget itself.
- Create a menu under Appearance → Menus with the pages you want in the header. In block themes that hide the Menus screen, an AI app connected through MCP can create the menu for you.
- Set your colors and fonts in Urmi → Design System, so both templates pick them up.
Build the header
1. Create the template
Go to Urmi → Theme Builder, click New template, choose Header, give it a name and click Create and open editor. The template opens in the builder as a draft.
2. Start from a pattern
Open Insert → Sections and pick the Header: logo, menu and button pattern. It adds a row with the Site Logo on the left, a Nav Menu in the middle and a button on the right. Prefer to build it yourself? Add a Container, set its direction to row, justify to space between and align to center, then drop in the three widgets.
3. Set up the menu
Select the Nav Menu and choose your menu. Under Mobile menu, pick when it collapses (tablet is a good default) and how it opens: a dropdown, an off-canvas panel or full screen. An off-canvas panel sliding in from the right works well on phones.
4. Make it sticky
Open the Header tab of the template (next to Insert, Layers and Styles). Set Sticky to “Always visible”, or to “Show when scrolling up” for a header that gets out of the way while reading. You can add a shadow and a background once the page scrolls, and shrink the header to a smaller height.
5. Check tablet and mobile
Switch the device at the top of the editor. On phones, a common layout is logo on the left and the menu button on the far right; hide the call-to-action button on the smallest screens if it crowds the row.
6. Choose where it appears and publish
Open Display conditions from the arrow next to the Publish button and add Include → Entire site. Publish. Your header now replaces the theme’s header on every page.
Build the footer
- Back in the Theme Builder, create a new template of type Footer.
- Insert the Footer: four columns, dark pattern, or build a dark container with a grid of four columns.
- Use an Icon List with the icon turned off for each column of links — it is lighter than a menu and easy to edit.
- Replace the bracketed placeholders with your own details and add a copyright line at the bottom.
- Set the display condition to Entire site and publish.
Exceptions and previews
Need a page without the usual header, such as a landing page? Add an Exclude rule for that page, or give the page the blank canvas template. When several templates could apply, the most specific include wins, and an exclude always does.
Before publishing changes to a live header, keep the template as a draft and use Preview in the Theme Builder to see it on a real page.
Next steps
The same workflow builds your single post layout, blog archive, search results and 404 page. The Theme Builder overview lists every template type, and the documentation covers each one in detail.
