Push footer to the bottom using jQuery

When your WordPress page or post contains a small amount of content, the footer can sometimes sit halfway up the page leaving a blank space underneath. This looks bad, especially on a large screen. So, if you want to push that footer to the bottom of page following tricks will be perfect for you. In this code snippet, we used jQuery to push footer to the bottom. You can copy paste this code at the top of your theme’s footer.php file.

jQuery(document).ready(function() {
 var contentHeight = jQuery(window).height();
 var footerHeight = jQuery('.footer').height();
 var footerTop = jQuery('.footer').position().top + footerHeight;
 if (footerTop < contentHeight) {
     jQuery('.footer').css('margin-top', 10+ (contentHeight - footerTop) + 'px');

Post Tags

About The Author


  • Profile photo of Nagaraja Gundappa
    Nagaraja Gundappa


    I have a question regarding the theme ‘The Next’. I am posing the question here as the site wpeden.com does not provide any other contact details.

    I find that the theme ‘the next’ is very heavy on graphics and animation (like appearance of the screen elements in an animated way while scrolling down etc.). Is there a way to disable it and make the theme function like any other normal theme? If so, I would like to purchase the theme.


Leave a Reply

Your email address will not be published. Required fields are marked *