Genesis Sticky Footer

Genesis Sticky Footer: eine umfassende Sticky-Footer-Lösung für das Genesis Framework für WordPress.

Auf Pages mit wenig Inhalt positioniert das folgende Modul den Footer am unteren Rand des Browser-Viewports. Auf längeren, scrollbaren Pages verhält sich der Footer jedoch ganz normal und schließt erst am Dokumentende ab.

Ob für eingeloggte User der Admin Bar im Frontend aktiviert ist oder nicht, wird erkannt und in die Berechnung der Footer-Position miteinbezogen.

Genesis Sticky Footer: der Code

/** Intro:
The module sticks the Genesis site footer to the bottom of 
the page and viewport, even if the page content is too short 
to push it there. But it behaves normally on pages, that have
enough content to push it out of sight.

Note: To add space above the footer vis CSS use the
'.sticky-footer-spacer' class with the height property.

Based on: https://9seeds.com/2013/11/29/sticky-footer-genesis
*/


/*
PHP: Add Sticky Footer Page Wrapper
---------------------------------------------------------------------------------------------------- */

/**
 * Add Page Wrapper
 */
add_action( 'genesis_before_header', 'bubdev_stickyfooter_pagewrap_open');
function bubdev_stickyfooter_pagewrap_open() {

  echo '<div class="sticky-footer-page-wrapper">';
}

add_action( 'genesis_before_footer', 'bubdev_stickyfooter_pagewrap_close');
function bubdev_stickyfooter_pagewrap_close() {

  echo '<div class="sticky-footer-spacer"></div></div>';
}


/*
CSS / JS
---------------------------------------------------------------------------------------------------- */

add_action( 'wp_head', 'bubdev_stickyfooter_script_and_styles' );
/**
 * Add sticky footer CSS and JS to page head.
 */
function bubdev_stickyfooter_script_and_styles() {


  /* Sticky Footer CSS
  --------------------------------------------- */ ?>
  
  <style>

    html,
    body, 
    .site-container {
      height: 100% !important;
    }

    .sticky-footer-page-wrapper {
      height: auto !important;
      margin-top: 0 !important;
      min-height: 100% !important;
    }
     
    .site-footer {
      margin-top: 0 !important;
      padding-top: 0 !important;
    }

  </style>
  <?php


  /* Sticky Footer JS
  --------------------------------------------- */ ?>

  <script>

    jQuery( function( $ ) {

      /**
       * Sticky Footer JS
       */
      var stickyFooterFunction = function() {

        var viewportHeight = $( window ).height();
        var adminBarHeight = $( '#wpadminbar' ).outerHeight();
        var footerHeight = $( '.site-footer' ).outerHeight();
        var theHeight;

        // Set html height depending on whether the admin bar 
        // is active or not. We only trust the body class and
        // have to cross-check, in case a browser plugin, that 
        // controls the visibility of the admin bar, is in use.
        if ( $( 'body' ).hasClass( 'admin-bar' ) ) {
          theHeight = viewportHeight - adminBarHeight;
        } else {
          theHeight = viewportHeight;
        }

        // Set proper height of the html element.
        document.documentElement.style.setProperty( 
          'height', theHeight + 'px', 'important'
        );

        // Substract the footer height from the page.    
        $( '.sticky-footer-page-wrapper' ).css({ 
          'marginBottom': '-' + footerHeight + 'px'
        });
      }

      // Trigger the function on window load and resize.
      $( window ).on( 'load resize', stickyFooterFunction );
      
      // Account for brower plugins, that control the
      // visibility of the admin bar, and invoke the 
      // function a second time (after some waiting).
      setTimeout( stickyFooterFunction, 1000 );
    });

  </script>
<?php
}

Der Abstand oberhalb des Footers kann mit Hilfe der CSS-Klasse .sticky-footer-spacer eingerichtet werden. Beispiel:

.sticky-footer-spacer {
  height: 50px;
}

Reine CSS-Lösung mit Flexbox

/* Sticky Footer
--------------------------------------------- */

.site-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.site-inner {
  flex-grow: 1;
  width: 100%;
}

.site-header,
.site-footer {
  /* ie11 */
  flex-shrink: 0;
}