The site header: logo, menu and phone

What you get

<!-- theme-options.html: what the client edits once -->
<body wp-fields-group="Site settings">
  <img src="images/logo.png" alt="Warm Corner" opt-image="Logo">
  <a href="tel:+15550100199" opt-link="Phone link">
    <span opt-text="Phone">+1 (555) 010-0199</span></a>
</body>

<!-- the header of every page -->
<header class="header">
  <a class="header__logo" href="/"><img src="images/logo.png" alt="Warm Corner" opt-image="Logo"></a>
  <nav class="header__nav" wp-menu="Header Menu">
    <a href="/" class="header__link">Home</a>
    <a href="/menu" class="header__link">Menu</a>
    <a href="/contacts" class="header__link">Contacts</a>
  </nav>
  <a class="header__phone" href="tel:+15550100199" opt-link="Phone link">
    <span opt-text="Phone">+1 (555) 010-0199</span></a>
</header>

Step by step

1. The site settings page

   The theme-options.html file with a wp-fields-group group is the settings screen in the admin. Everything marked in it with opt- is shared by the whole site.

   <body wp-fields-group="Site settings">

2. The logo

   opt-image on the <img>, both in the settings and in the header of every page. The client changes the logo once.

   <img src="images/logo.png" alt="Warm Corner" opt-image="Logo">

3. The menu

   wp-menu on the block of links. “Load data” creates the “Header Menu” menu from your links; after that the client edits it in Appearance → Menus.

   <nav class="header__nav" wp-menu="Header Menu">
     <a href="/" class="header__link">Home</a>
     <a href="/menu" class="header__link">Menu</a>
     <a href="/contacts" class="header__link">Contacts</a>
   </nav>

4. The phone

   The tel: link is opt-link, the number inside it opt-text, with different names. The number changes across the whole header at once.

   <a class="header__phone" href="tel:+15550100199" opt-link="Phone link">
     <span opt-text="Phone">+1 (555) 010-0199</span></a>

What matters

• Menu items take the classes of the first link; the current page gets the w--current class, as in Webflow, so style that.
• “Load data” rebuilds the menu from the markup and replaces the client’s edits: run it for menus once, at the start.

Common mistakes

The build log is the “Logs” tab of your project on themeforge.pro; the free markup check shows the same notes.

<nav class="header__nav" wp-menu="Header Menu">
  <a href="/" class="header__link is-active">Home</a>
  <a href="/menu" class="header__link">Menu</a>
</nav>

<nav class="header__nav" wp-menu="Header Menu">
  <a href="/" class="header__link">Home</a>
  <a href="/menu" class="header__link">Menu</a>
</nav>

Attributes in this recipe

More recipes