Dev: How to Modify a Header or Footer

If you are not familiar with them, first read the implementation strategy for the headers and the footer in the LLIR website.

The Public Header and Member Header defined for the LLIR website are conditional headers. The Kadence theme lets developers define additional headers that can appear in a website only when predefined conditions are met and includes a default header called Default. The default header has been customized to serve as a header for these developer notes. The Public Header and Member Header are conditional headers. The condition for displaying the Member Header is that the user is logged in. The condition for displaying the Member Header is that the user is logged out. Therefore, a member sees the Member Header from the time they log in until they leave the website, explicitly log out or open the Developer Notes. Open the note below for more on how three headers are configured.

As webmaster, you are unlikely to modify the header conditions or add another header, because because doing so would become a major redesign of the website. However, you can modify the layout of components that appear in the headers and in the footer and make adjustments to how they are displayed.

Selecting a Header for Editing

Unlike the website in Kadence tutorials, the LLIR website has more than one header. The theme remembers which header was modified last and calls that the Previewing Header. The first step in modifying a headers is to make sure you work on the correct header. Then proceed with caution because changing the headers can affect the look of the entire website.

  1. In the WordPress dashboard, click Appearance and then Customize.
  2. The theme customizer panel appears on the left of the screen. Click Header.
  3. Look for a box labelled Previewing Header near the top of the theme customizer panel. If it does not appear, skip to step 6.
  4. Because the LLIR website has conditional headers, the Previewing Header box shows which header that is currently open for editing.
    Note that the top of the panel on the right displays a webpage, complete with a header in which components such as menus and buttons work.
    The bottom of the panel on the right is a work area for modifying the layout and components on the current previewing header.
  5. If the label displayed in the Previewing Header box is the one you want to edit, you can skip forward to the next section:
    Changing the Header Settings.
  6. To select a header to work with, scroll to the bottom of the panel on the left and click Conditional Header.
  7. Use the dropbox under the label Current Previewing Header to select the header you want to edit. At the time of this writing you have four possible choices:
    • Default this header is used by the Developer Notes.
    • Member Header is a conditional header that displays when the used logged in.
    • Public Header is a conditional header that displays when the user is logged out.
    • Practice and Experimentation is a conditional header that never displays, so it is a good one to play with while you are learning how to use the header editor.
  8. Click the button Confirm, Exit Preview Mode.
    It may take a few seconds to redisplay a page similar to what you saw in steps 3 and 4, except that display on the right shows the header you want to work with. Note: Do not worry if the webpage displayed below the header does not go with that header in the live website.
  9. The header you selected is now the previewing header.
    To continue, skip forward to the next section: Changing the Header Settings.
    To exit, click the X or Back arrow on the upper right.

Changing the Header Settings

  1. Make sure the header displayed on the upper right of your screen is the header that you want to modify.
  2. Note that the two tabs above the header-settings panel labelled Desktop and Tablet/Mobile. Usually, you must make the same changes to both versions of the header so that they look as similar as possible on large screens and smart phones. The two versions of the public and member headers vary in the following ways:
    • Only the Tablet/Mobile version displays the sentence Hold your phone horizontally for best viewing. at the top of the header.
    • Some of the spacing/margins/padding is adjusted to for legibility on a mobile device. These differences are subtle and hard to see.
    • You can add fewer items to the header on a mobile device.
  3. Do not proceed until you have followed and practiced the techniques shown in the section on headers of the Deep Dive into Kadence Theme tutorial.
  4. If you want to practice, you can use either of two headers not used in this website: Default or Default Header. The Default Headers was deliberately set up to display both the public and private menus.
  5. As you make changes, you can see the effect immediately in header displayed on the upper right. Whenever there are unpublished changes, the Publish button on the upper left becomes active.
  6. Click Publish when you are ready to apply your changes to the live website. You publishing, you can continue to work so you can complete a set of modifications a bit at a time. If you leave the dashboard or click the X on the upper left, all changes not published are lost.

Test Thoroughly

After making any changes, test all headers on both a large screen and a smart phone.

See Also

The Kadence website contains an excellent tutorial on creating conditional headers.