Header and Footer Builder

Use classic widgets to create Header and Footer. Much easier and simpler than using the new Full Site Editor.

⚠️ Requires: ACF Pro and Theme Support h-widget-builder-v2

Features

Eight widget areas:

• Header
• Subheader
• Header (Mobile)
• Subheader (Mobile)
• Footer Top
• Footer Mid
• Footer Bottom
• Offcanvas - Area outside the body that will appear when you click "Offcanvas Toggle" widget

Custom widgets that when combined with the native widgets, should cover most use cases:

• Buttons - create one or more buttons
• Logo - insert the logo and link it to the Homepage.
• Offcanvas Toggle - create a link that opens the Offcanvas area.
• Recent Posts - show the latest X posts.
• Socials - create social media or address links.
• Separator (named -----) - split the area.
• Dark Mode Toggle - toggle between light or dark mode. Requires theme support 'h-dark-mode'. More Detail »

How to Render

For Footer and Offcanvas, use the native dynamic_sidebar():

<div class="offcanvas">
  <a href="#menu">Close</a>

  <?php dynamic_sidebar('offcanvas'); ?>
</div>

<footer class="main-footer">
  <?php dynamic_sidebar('footer-top'); ?>
  <?php dynamic_sidebar('footer-mid'); ?>
  <?php dynamic_sidebar('footer-bottom'); ?>
</footer>

Header is a special case where we need to count the columns, so use this special function:

<?php H::dynamic_header('subheader'); ?>
<?php H::dynamic_header('header'); ?>
<?php H::dynamic_header('subheader-mobile'); ?>
<?php H::dynamic_header('header-mobile'); ?>

Widget Styles

For a sample styling, refers to these CSS files in Edje Theme:

• _header-footer.sass
• _widgets.sass

Widget Scripts

We only need script to toggle Offcanvas.

const myOffcanvas= {
  init() {
    this.toggle();
    this.close();
    this.preventClose();
  },

  /**
   * Open or close the offcanvas menu
   */
  toggle() {
    const $menuLinks = document.querySelectorAll('[href="#menu"]');
    $menuLinks.forEach(($link) => {
      $link.addEventListener('click', (e) => {
        e.preventDefault();
        e.stopPropagation();
        document.querySelector('body').classList.toggle('has-active-offcanvas');
      });
    });
  },

  /**
   * Close offcanvas when clicking outside it
   */
  close() {
    document.addEventListener('click', () => {
      document.querySelector('body').classList.remove('has-active-offcanvas');
    });
  },

  preventClose() {
    const $offcanvas = document.querySelector('.offcanvas');

    if ($offcanvas) {
      $offcanvas.addEventListener('click', (e) => {
        e.stopPropagation();
      });
    }
  },
};

document.addEventListener('DOMContentLoaded', () => {
  myOffcanvas.init();
});