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' );
?>