Build a custom header, footer and 404 page with the Akram theme builder

Every WordPress theme ships with its own header and footer. They’re fine until you want something specific: a different menu layout, a call-to-action button, a footer with four columns and a newsletter form.

Akram’s theme builder lets you design those parts with the same editor you use for pages, then choose exactly where they appear.

How templates work

A template is a design for one part of the site: header, footer, single post, archive, search results or 404 page. Each template has display conditions:

• Include rules say where it shows: the entire site, all posts, a post type, specific categories or individual pages.
• Exclude rules carve out exceptions, such as “everywhere except the checkout”.

If a template matches the current page, it replaces your theme’s version. If nothing matches, your theme takes over as usual. That makes it safe to start small.

Part 1: a sticky header

1. Go to Akram → Theme Builder and click Add under Header.
2. Insert the Header — sticky glass section from the Templates panel, or start blank with a container.
3. Add a Site Logo widget on the left and a Menu widget in the middle. Choose your main menu.
4. Add a Button on the right for your main call to action.
5. Select the container, open Advanced → Sticky and set it to Top. To make the header slimmer once the visitor scrolls, switch the Style tab to the Sticky state and reduce the padding. Turn on Hide on scroll down if you want it to slide away while people read.
6. Switch to mobile. The Menu widget collapses into a menu button automatically; adjust the logo size here if needed.
7. Set the display condition to Entire site and publish.

Tip: keep the header under 80 pixels tall on desktop and about 64 on mobile. Sticky headers that are too tall eat into the screen on phones.

Part 2: a footer that does real work

A good footer answers the questions visitors scroll down for: how to contact you, where things are, and what the legal pages say.

1. Add a Footer template and insert Footer — 4 columns.
2. Column one: your logo and one sentence about the business.
3. Columns two and three: Icon List widgets with links to key pages.
4. Column four: a Form widget set to inline layout with a single email field, for newsletter signups.
5. Add a thin bottom row with the copyright and links to Privacy and Terms.
6. Use dynamic content for the year in the copyright line so it never goes out of date.
7. Set it to Entire site and publish.

Part 3: a 404 page that helps

Most 404 pages are dead ends. A useful one gets people back on track.

1. Add a 404 page template.
2. Write a short, friendly heading. “This page has moved or never existed” works better than a joke.
3. Add a Search widget with live results, so visitors can find what they wanted without another click.
4. Add a Posts Grid showing your three most recent or popular posts.
5. Add buttons to your home page and your contact page.

Different headers for different pages

Display conditions really pay off here. For example:

• A transparent header over the hero on your home page, included only on the front page.
• A minimal header without navigation on landing pages, included on a “Landing” category.
• The standard header on everything else, with the other two excluded.

Akram picks the most specific matching template, so you don’t have to juggle priorities.

Common questions

Does this work with block themes? Yes. Akram’s templates replace the header and footer for both classic and block themes.

Will it slow the site down? No. Templates are rendered on save like any other Akram page and share the same cached stylesheet approach.

What if I switch themes later? Your Akram templates keep working, because they don’t depend on the theme’s markup.