Skip to content

Instantly share code, notes, and snippets.

@SiGaCode
Created March 19, 2018 11:25
Show Gist options
  • Save SiGaCode/e5c34cc61e9815715e53d9c7e37dbcf6 to your computer and use it in GitHub Desktop.
Save SiGaCode/e5c34cc61e9815715e53d9c7e37dbcf6 to your computer and use it in GitHub Desktop.
A sticky footer which will stick to the bottom when the content isn´t long enough and just scroll like a normal footer otherwise.
//* For testing purpose, I added this script to a GP hook (wp_head) and had it run for only the test page named "Stickytest"
<?php if ( is_page( 'stickytest' ) ) : ?>
<script>
jQuery(document).ready(function($) {
$(window).resize(function(){
var footerHeight = $('.site-info').outerHeight();
var stickFooterPush = $('.push').height(footerHeight);
$('.contentwrapper').css({'marginBottom':'-' + footerHeight + 'px'});
});
$(window).resize();
});
</script>
<?php endif; ?>
/* Add to childtheme CSS file or CSS snippets plugin of your choice */
html, body {
height: 100%;
}
.contentwrapper {
min-height: 100%;
height: auto !important;
height: 100%;
}
//* Add to childtheme functions or PHP plugin of your choice
//* Add custom opening div tag
add_action( 'generate_before_header', 'opening_div' );
function opening_div() {
echo '<div class="contentwrapper">';
}
//* Add custom closing div tag including push container
add_action( 'generate_before_footer', 'closing_div' );
function closing_div() {
echo '<div class="push"></div></div>';
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment