Tutorial: Create a header layout (Themer)

This is a quick tutorial to show you the basics of creating a layout in Theme Builder and choosing where to display it on your site. Once you finish this tutorial you'll have all the basics of using Theme Builder.

In this tutorial, you'll create a header that will replace the header on all Pages of your site, but not Posts or custom post types. Then we'll set an exclusion rule so the header occurs on every Page except for a landing page. You'll need a test site to try it out, but if you don't have a test site for some reason, we've tried to include enough screenshots to give you an idea of how it works.

It's assumed you've already installed Woo360 Themer into the appropriate environment. See the Related Article about Woo360 Themer installation if you haven't.


Set up what you're going to connect to

We're going to connect to a site tagline, select an image for a header logo, and set up a menu. You need to have those things ready to go first, so do the following if you haven't already.

  • Have an image ready to use as a logo.
  • Create a site tagline in Settings > General.
    In this tutorial, we're using the phrase "We keep it simple".
  • Create a menu at Appearance > Menu or Customize > Menu.

Create a new theme layout

  1. In the WordPress admin panel, click Builder > Add new.
    The  Add new screen is used for layouts, templates, saved rows, and saved modules.
    See the screenshot below to enter the settings, or follow these steps.
  2. Enter a title. We'll use All page header as the layout title in this tutorial.
  3. In the Type field, select Theme layout.
  4. In the Layout field, select Header.
  5. Click Add theme layout.
    The Edit Theme layout screen will open automatically

Here's the screen with these choices:

These settings determine the configuration options that you see in the following steps.


Configure the theme layout

Configure the layout settings on the  Edit theme layout screen as in the screenshot below, or read the following points for details.

  • Verify that Type is Header.
  • Set Sticky to No.
    The header will scroll up along with the rest of the page.
  • For Location, choose Page in the left field and All Pages in the right field.
  • Leave the Users field set to Choose, which will allow all users to see the layout.
  • Click Publish.

Here's the screen with these choices:

Note: If you set the WordPress edit page's Page Template to No Header/Footer for a particular post or page, it will not remove this header produced by a theme layout. You must control where the header occurs through the theme layout settings.


    Add an exclusion rule for one page

    Now suppose you want a landing page that you've created to have no header. You can create an exclusion rule for that single page.

    1. On the Edit Theme Layout screen, in the Location section click Add exclusion rule.
      An Exclude section opens.
    2. Click the Choose field and choose Page.
    3. In the second field on the right that appears, choose Landing (or whatever single page title on your site you want to exclude).
    4. Click Publish or Update to save the theme layout.
      If you want to add another exclusion rule click Add exclusion rule.

Create the theme layout in Page Builder

Page Builder is used to build theme layouts. When this header theme layout opens for editing in Page Builder, it has a default layout, as shown in the following screenshot.

There are two rows, one for the top bar and one for the main header area. The top bar contains an HTML module on the left and an Icon Group module on the right. In the main header area, the site title is connected to a Heading module, and there's a Menu module on the right.

How does the site title get into the Heading module? In the following screenshot of the Heading module settings, you can see the Heading field has a field connection to the Site Title. The site title value comes from Settings > General > Site title.

You can modify the layout as you normally would in Page Builder. For this tutorial, we're going to remove the top bar, replace the site title with the site tagline, and add the business logo above that. 

  1. If you still have the Edit Theme Layout page open, click Edit theme layout to open Page Builder. Otherwise, on the WordPress admin panel, click Builder > Theme layouts, then mouse over the All page header layout in the list and click Page Builder.
  2. Mouse over the top-bar row and click the X tool to remove it.
  3. Open the heading module for editing and make the following changes, then save the module.
    • Click the plus sign to the right of the Heading field.
    • Scroll to the bottom of the list and choose Site tagline.
    • Click the Style tab and change the Font size to 20 px.
  4. Open the Menu module for editing and select the menu you set up. 
  5. Drag a Photo module over the Heading module in the left column. Add a photo to serve as the business logo.
  6. Publish the page.

Tip: When you're editing a theme layout in Page Builder, you can preview specific pages and posts in your site by selecting them in the Preview list at the top of the editing screen. This preview will only work when editing themer layouts that are set up as archives, or singular layout, and not on header and footers just fyi.

 Here's a screenshot of what we ended up with:

This isn't beautiful yet, but feel free to tinker with any other parts of the layout. Try it out for responsiveness to see how it behaves.


View the header layout on a page

Now it's time to view your handiwork. Because we set this header to apply to the entire site, you can view any page on your site, and you will see the header has replaced the standard theme header.


Extra credit

You added a field connection to the site tagline in the header layout. When the field is text-based, you can use a shortcode instead to mix and match field connections or add your own text. For example, instead of just the site tagline in the header, you could add the site name and the site tagline. To see how to add field connections as shortcode, see the field connections article in the Related Articles below.



Now you've got the essence of how easy it is to build a theme layout in the Woo360 Themer Theme Builder! 

What next?

For more information about how field connections work, start with the  field connection basics article.