• Skip to primary navigation
  • Skip to main content
  • Skip to footer
  • Store
  • Support
  • My Account
  • Cart

9seeds

Building Custom WordPress Solutions | Plugin Development

 
  • Custom Development
  • Themes
  • Plugins
  • About
  • Contact
  • Blog

Genesis

Sticky Footer for Genesis

Posted on November 29, 2013

glue-bottleWe had a client request that their site’s footer be fixed to the bottom of the browser window for “short pages” or pages with little content. A good example of how to accomplish this with HTML and CSS is available at: http://css-tricks.com/snippets/css/sticky-footer/. If you’re using the Genesis framework for WordPress however, a couple more steps are required to get the sticky footer working.

For this example, we’re using the Genesis sample theme, but it should work for any theme available from StudioPress with minor CSS adjustments to .site-footer height and .page-wrap margin-bottom.

You’ll only need to work with two files: functions.php and style.css. The code for each section is listed below. Note that this solution will likely not work in IE8 or Opera, where a javascript solution may be needed (see Ryan Fait’s sticky footer example for an alternative method that is not Genesis-specific).

Your mileage may vary. Feel free to leave your modifications and suggestions in the comments.

Sticky footer for genesis screenshot

Functions.php

//* Sticky Footer Functions
add_action( 'genesis_before_header', 'stickyfoot_wrap_begin');
function stickyfoot_wrap_begin() {
	echo '
'; } add_action( 'genesis_before_footer', 'stickyfoot_wrap_end'); function stickyfoot_wrap_end() { echo '
'; }

style.css

html, body {
	height: 100%;
}

.site-container {
	height: 100%;
}

.page-wrap {
	min-height: 100%;
	/* equal to footer height */
	margin-bottom: -90px; 

}

.site-inner {
	min-height: 100%;
	/* equal to footer height */
	margin-bottom: -90px; 
}

.site-footer, .site-inner:after {
	/* .site-footer and .site-inner:after must be same height as .site-inner */
	height: 90px; 

}

.site-footer {
	background: orange;
	/* Use this for testing */
}
Continue Reading

Corey Scribner

    More by Corey Scribner

    New Plugin: Genesis Simple Headers

    Posted on March 18, 2011

    Earlier this week I was installing some of the Genesis child themes (aff link) on a WordPress multi-site network. I quickly realized that I had a problem on my hands. If more than one site wanted to use the same theme, they wouldn’t be able to use a custom logo because uploading the logo to the theme directory would make it the only logo available for all network sites using the same theme. So, I spent spent some time retrofitting half a dozen themes to use the WordPress headers functionality to replace the logo on each individual site.

    Then it dawned on me… Why not just build this as a plugin? That was, of course, followed immediately with “why didn’t I think of that first?”

    Obviously, if you are running a single site you can simply FTP in and upload the file to your server. But, if you have clients who you’d like to keep away from FTP and make it simple for them to upload a new header once a day (if they so choose), then the Genesis Simple Headers plugin will do the trick.

    You can Download Genesis Simple Headers here.

    To install, download the plugin, unzip it and upload the entire ‘genesis-simple-headers’ folder to your /wp-content/plugins/ folder. Then activate it from the WordPress plugins menu. It requires that you have Genesis 1.5 installed and if you aren’t currently using a Genesis child theme, this plugin is totally useless.

    Once it’s installed, go to the Appearance tab and click the Headers menu option. You will be given the opportunity to upload a file to replace the logo. The page will also tell the size of the image to upload (if you upload a different sized image, you’ll be asked to crop the image prior to saving).

    All current Genesis Child Themes are handled in this plugin with the following two exceptions
    – Prose: The functionality is built in to that child theme already.
    – Family Tree: I’ll add this one when I can figure out how best to go about it.

    Let me know what you think of the plugin!

    Cheers!

    Continue Reading

    john

      More by john

      Footer

      Get in Touch

      • New Project Inquiry
      • Product Support and General Inquiry
      • Store Purchase Terms and Conditions
      • Store FAQ
      • Cookie Policy
      • Privacy Policy

      Our Services

      • Custom WP Development
      • Theme Store
      • Plugin Store

      WordPress Plugins for Sale

      • Time Tracker
      • Authorize.net SIM Gateway

      WordPress Plugins for Free

      • Simple Calendar
      • WP Chargify
      • Facebook
      • Twitter
      • LinkedIn
      • WordPress
      • GitHub

      Copyright 2023 | 9seeds, LLC

      Like nearly all websites this one uses cookies too. Like most users we think consent banners like these are a dumb solution, but it's what we've got until new laws are passed. We use cookies on our website for remembering your preferences, for example if you're logged in or what is in your cart. We also use 3rd party cookies for analytics so we know what pages on the site are most popular. By clicking “Accept”, you consent to the use of ALL the cookies.
      Do not sell my personal information.
      Cookie SettingsAccept
      Manage consent

      Privacy Overview

      This website uses cookies to improve your experience while you navigate through the website. Out of these, the cookies that are categorized as necessary are stored on your browser as they are essential for the working of basic functionalities of the website. We also use third-party cookies that help us analyze and understand how you use this website. These cookies will be stored in your browser only with your consent. You also have the option to opt-out of these cookies. But opting out of some of these cookies may affect your browsing experience and may even preclude you being able to login to the website.
      Necessary
      Always Enabled
      Necessary cookies are absolutely essential for the website to function properly. These cookies ensure basic functionalities and security features of the website, anonymously.
      CookieDurationDescription
      __stripe_mid1 yearThis cookie is set by Stripe payment gateway. This cookie is used to enable payment on the website without storing any patment information on a server.
      __stripe_sid30 minutesThis cookie is set by Stripe payment gateway. This cookie is used to enable payment on the website without storing any patment information on a server.
      cookielawinfo-checkbox-advertisement1 yearSet by the GDPR Cookie Consent plugin, this cookie is used to record the user consent for the cookies in the "Advertisement" category .
      cookielawinfo-checkbox-analytics1 yearSet by the GDPR Cookie Consent plugin, this cookie is used to record the user consent for the cookies in the "Analytics" category .
      cookielawinfo-checkbox-necessary1 yearSet by the GDPR Cookie Consent plugin, this cookie is used to record the user consent for the cookies in the "Necessary" category .
      cookielawinfo-checkbox-others1 yearSet by the GDPR Cookie Consent plugin, this cookie is used to store the user consent for cookies in the category "Others".
      cookielawinfo-checkbox-performance1 yearSet by the GDPR Cookie Consent plugin, this cookie is used to store the user consent for cookies in the category "Performance".
      Functional
      Functional cookies help to perform certain functionalities like sharing the content of the website on social media platforms, collect feedbacks, and other third-party features.
      Performance
      Performance cookies are used to understand and analyze the key performance indexes of the website which helps in delivering a better user experience for the visitors.
      Analytics
      Analytical cookies are used to understand how visitors interact with the website. These cookies help provide information on metrics the number of visitors, bounce rate, traffic source, etc.
      CookieDurationDescription
      _ga2 yearsThe _ga cookie, installed by Google Analytics, calculates visitor, session and campaign data and also keeps track of site usage for the site's analytics report. The cookie stores information anonymously and assigns a randomly generated number to recognize unique visitors.
      _gid1 dayInstalled by Google Analytics, _gid cookie stores information on how visitors use a website, while also creating an analytics report of the website's performance. Some of the data that are collected include the number of visitors, their source, and the pages they visit anonymously.
      CONSENT2 yearsYouTube sets this cookie via embedded youtube-videos and registers anonymous statistical data.
      Advertisement
      Advertisement cookies are used to provide visitors with relevant ads and marketing campaigns. These cookies track visitors across websites and collect information to provide customized ads.
      CookieDurationDescription
      VISITOR_INFO1_LIVE5 months 27 daysA cookie set by YouTube to measure bandwidth that determines whether the user gets the new or old player interface.
      YSCsessionYSC cookie is set by Youtube and is used to track the views of embedded videos on Youtube pages.
      yt-remote-connected-devicesneverYouTube sets this cookie to store the video preferences of the user using embedded YouTube video.
      yt-remote-device-idneverYouTube sets this cookie to store the video preferences of the user using embedded YouTube video.
      Others
      Other uncategorized cookies are those that are being analyzed and have not been classified into a category as yet.
      CookieDurationDescription
      cookielawinfo-checkbox-functional1 yearThe cookie is set by GDPR cookie consent to record the user consent for the cookies in the category "Functional".
      SAVE & ACCEPT
      Powered by CookieYes Logo