Shop Menu

WordPress Child Theme – CSS Sticky Footer

1) Followed all of the instructions from CSS Sticky Footer. Then made the extra change, shown below, to my child theme’s footer.php file.

For my WordPress TwentyTen child theme, in the footer.php file, I had to move the closing #wrapper DIV to just ABOVE the opening #footer DIV. Like so:

</div><!-- #main -->
</div><!-- #wrapper -->
<div id="footer" role="contentinfo">

2) Add CSS for footer to the child theme style.css file. A slight edit to the #colophon padding had to be made to accommodate for the Sticky Footer code.

#footer {
	margin-bottom: 0;
    
}    
#copyright {
    margin-left: 18px;
    font-size: 8px;
	font-weight: bold;
    text-transform: uppercase;
    position: absolute; /* ADDED to get text to move ABOVE purple footer, since the #copyright DIV is now INSIDE the #footer block. */
    bottom: 20px; /* ADDED to get text to move ABOVE purple footer, since the #copyright DIV is now INSIDE the #footer block. */
}

#colophon { /* Remove top & bottom black border lines. Add back ground color. */
	border-top: none;
	margin-top: none;
	overflow: hidden;
	/* padding: 5px 0; ORIG */
    padding: 0;
    height: 1.5em;
    background-color: #7C54CA;
}

#site-info { /* Add padding to left side of site name */
	float: left;
	font-size: 14px;
	font-weight: bold;
    width: 220px;
    padding-left: 18px;
    color: white;
    text-decoration: none;
}

#site-info a {
	color: #FFFFFF;
	text-decoration: none;
}

#site-info a:hover {
	text-decoration: underline;
}

#site-info a {
	color: #FFFFFF;
	text-decoration: none;
}

#site-tagline { /* Center text */
    color: #FFFFFF;
	text-align: center;
    font-size: 14px;
	font-weight: bold;
    margin: 0 auto;
    width: 400px;
}

#site-contact {
	font-style: normal;
	font-size: 14px;
	font-weight: bold;
    text-align: right;
    color: #FFFFFF;
    padding-right: 18px;
    float: right;
	width: 220px;
}

3) For the copyright text of the site, add the following to files in the child theme folder:

Add to style.css file:

#copyright {
margin-left: 18px;
font-size: 8px;
font-weight: bold;
text-transform: uppercase;
position: absolute; /* ADDED to get text to move ABOVE purple footer, since the #copyright DIV is now INSIDE the #footer block. */
bottom: 20px; /* ADDED to get text to move ABOVE purple footer, since the #copyright DIV is now INSIDE the #footer block. */
}

Add to footer.php file:

#copyright DIV must go inside the #colophon block, and above the get_sidebar PHP code.

<div id="colophon">

        <div id="copyright">
		&copy 2011 2020 Euro Lens Bath&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;800.206.8110
		</div><!-- #Euro Lens Bath copyright info, just above the purple footer block. -->

<?php
	/* A sidebar in the footer? Yep. You can can customize
	 * your footer with four columns of widgets.
	 */
	get_sidebar( 'footer' );
?>

, , ,

4 Responses to WordPress Child Theme – CSS Sticky Footer

  1. Reid Walley January 3, 2012 at 4:29 pm #

    The above Sticky Footer post is only good for a child theme of WordPress Twenty Ten, version 1.2. It probably won’t be applicable to any other theme, as all themes are created a little differently.

    • ghali March 7, 2014 at 10:11 am #

      hi reid i have a i probleme with my theme can you take a look
      http://www.clisho.com/dante/
      im looking to fix the header footer and sidebars like this the juste the content gonna be scrolable so if you can check the code and give me some trick gonna be amazing from your part
      thank you very much im young a developer hoping some help
      thank you

      • designparc March 8, 2014 at 12:02 am #

        Ghali,

        Sorry, it’s been so long since I dug into a Sticky Footer, I don’t really know any more. These instructions were specifically for a WordPress Twenty Ten Child Theme – which is pretty old now. And each theme has its own distinct Sticky Footer code and CSS combination.

        See if WPBeginner, Smashing Magazine and CSS-Tricks have any useful articles on Sticky Footer.

        Also, do a Google search for “wordpress sticky footer” and see if there are any newer tutorials. There may even be a WordPress plugin for a Sticky Footer.

        Best of luck!

Trackbacks/Pingbacks

  1. Sticky Footer Php Help - January 3, 2012

    [...] Footer Php Help I know CSS well enough but not Php. I'm using this tutorial to make my footer stick to the bottom of my page, but can't figure out what the Php file [...]

Leave a Reply

css.php