Sticky Footer Php Help

jodybethw · 01-03-2012, 08:47 PM

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 needs to look like. Php and applicable CSS are pasted below as the site is currently hosted on a local machine. Many, many thanks to anyone who can help!

Here is my footer.php file:

PHP Code:


			
<?php global $woo_options; ?>

    <?php

        $total = $woo_options['woo_footer_sidebars']; if ( ! isset( $total ) ) { $total = 4; }

        if ( ( woo_active_sidebar( 'footer-1' ) ||

               woo_active_sidebar( 'footer-2' ) ||

               woo_active_sidebar( 'footer-3' ) ||

               woo_active_sidebar( 'footer-4' ) ) && $total > 0 ) {



      ?>



    <div id="footer-widgets">

        <div class="col-full col-<?php echo $total; ?>">



        <?php $i = 0; while ( $i < $total ) { $i++; ?>

            <?php if ( woo_active_sidebar( 'footer-' . $i ) ) { ?>



        <div class="block footer-widget-<?php echo $i; ?>">

            <?php woo_sidebar( 'footer-' . $i ); ?>

        </div>



            <?php } ?>

        <?php } ?>



        <div class="fix"></div>

        </div>

    </div><!-- /#footer-widgets  -->

    <?php } ?>



    <div id="footer">

        <div class="col-full">



        <div id="copyright" class="col-left">

        <?php if( isset( $woo_options['woo_footer_left'] ) && $woo_options['woo_footer_left'] == 'true' ) {



                echo stripslashes( $woo_options['woo_footer_left_text'] );



        } else { ?>

            <p><?php bloginfo(); ?> &copy; <?php echo date( 'Y' ); ?>. <?php _e( 'All Rights Reserved.', 'woothemes' ); ?></p>

        <?php } ?>

        </div>



        <div id="credit" class="col-right">

        <?php if( isset( $woo_options['woo_footer_right'] ) && $woo_options['woo_footer_right'] == 'true' ) {



            echo stripslashes( $woo_options['woo_footer_right_text'] );



        } else { ?>

            











        <?php } ?>

        </div></div>

    </div><!-- /#footer  -->

</div><!-- /#wrapper -->

<?php wp_footer(); ?>

<?php woo_foot(); ?>

</body>

</html>

And the related CSS:

Code:

/*-------------------------------------------------------------------------------------------*/
/* RESET - http://meyerweb.com/eric/tools/css/reset/ | v1.0 | 20080212 */
/*-------------------------------------------------------------------------------------------*/

body,html{height:100%;}
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,acronym,address,big,cite,c

ode,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul

,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{border:0;outline:0;font-

size:100%;vertical-align:top;background:transparent;margin:0;padding:0;}
body{line-height:1;}
ol,ul{list-style:none;}
blockquote,q{quotes:none;}
blockquote:before,blockquote:after,q:before,q:after{content:none;}
:focus{outline:0;}
del{text-decoration:line-through;}
table{border-collapse:collapse;border-spacing:0;}

/* Floating & Alignment  */
.fl{float:left;}
.fr{float:right;}
.ac{text-align:center;}
.ar{text-align:right;}

/* Clear Floats  */
.col-full:after{content:".";display:block;height:0;clear:both;visibility:hidden;}
.fix{clear:both;height:1px;overflow:hidden;margin:-1px 0 0;}
html body * span.clear,html body * div.clear,html body * li.clear,html body * dd.clear

{background:none;border:0;clear:both;display:block;float:none;font-size:0;list-

style:none;overflow:hidden;visibility:hidden;width:0;height:0;margin:0;padding:0;}

/*-------------------------------------------------------------------------------------------*/
/* 1. SETUP */
/*-------------------------------------------------------------------------------------------*/

/* 1.1 Defaults */

body { font: 12px/1.5em sans-serif; color: #444; background-color: #FFFFFF; background-image: url

(images/bg-body-tile.png); background-repeat: repeat; background-position: left top; }

h1, h2, h3, h4, h5, h6  { margin: 0; font-family: 'Old Standard TT', arial, sans-serif; color: #222; 

font-weight:normal; }
h1  {font-size: 2em } h2  {font-size: 1.8em;} h3  {font-size: 1.6em;} h4  {font-size: 1.2em;} h5  

{font-size: 1em;} h6  {font-size: 0.8em;}


@font-face {
    font-family: 'EuphorigenicRegular';
    src: url('euphorig-webfont.eot');
    src: url

('euphorig-webfont.eot?#iefix') format('embedded-opentype'),
         url('euphorig-webfont.woff') 

format('woff'),
         url('euphorig-webfont.ttf') format('truetype'),
         url('euphorig-

webfont.svg#EuphorigenicRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}



p {margin: 0; }

hr { background-color: #e6e6e6;	border:0; height: 1px; margin-bottom: 20px; }

input, textarea { padding: 5px; border-color: #CCCCCC #EFEFEF #EFEFEF #CCCCCC; border-width:1px; 

border-style:solid; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius:3px; color: 

#777; }

/* 1.2 Hyperlinks */

a { color: #C1321D; text-decoration:none;}
a:hover { color: #C1321D; text-decoration:none;}

h1 a:link, h1 a:visited, h2 a:link, h2 a:visited, h3 a:link, h3 a:visited,
h4 a:link, h4 a:visited, h5 a:link, h5 a:visited, h6 a:link, h6 a:visited  { text-decoration: none; }
h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover  {text-decoration: none;}


/*-------------------------------------------------------------------------------------------*/
/* 2. SITE STRUCTURE & APPEARANCE */
/*-------------------------------------------------------------------------------------------*/

/* 2.1 Containers & Columns */
#wrapper  {overflow:auto; padding-bottom: 150px; min-height: 100%; height: auto; height: 100%; margin: 

0 auto -4em; background: transparent url(images/wrapper-bg-colourstrip.jpg) repeat-x left top; 

padding-top: 5px; } /* Top padding is the height of the colour strip image. */

#main{width:900px; min-height: 100%; }
#main.fullwidth, .layout-full #main, .col-full {width: 900px; margin:0 auto; }

#sidebar{width:250px;}
#sidebar .secondary { width:140px; } 

.entry img { max-width:565px; }
.layout-full .entry img { max-width:890px; }

.col-left { float: left; }
.col-right { float: right; }

.two-col-right #main { float:right; }
.two-col-right #sidebar { float:left; }

/* 2.6 Footer */
#footer{position: relative; margin-top: -150px; height: 150px; clear: both; padding: 30px 0 20px 0; 

background: url(images/bg-minifeatures.png) repeat top; color:#999; }
#footer p {}
#footer a { color: #ffffff; }
#footer #credit img{vertical-align:middle;}
#footer #credit span{display:none;}

conor · 01-04-2012, 11:56 AM

PHP does not really interact with CSS. What's happening in the link you gave is the html and css of the template is being changed in order to create a sticky footer. You can do the same with this code though it wont be along the exact same lines as the tutorial - it's kind of specific to one theme and also to an old version of wordpress.

Steps to create sticky footer:
1 . Create backup of file, remove all php in the non-backed up version. This will help give you a better idea of whats going on since you admit your not good at PHP.
2. See CSS position fixed for creating the sticky footer. You might need to change the HTML around a bit to achieve the look you want. In the link you gave he removed the footer from the wrapper div - that would make it span the width of the page i think, you can do that if thats the effect you want.
3. Once you have a working footer that you like, re-add the PHP from the backup

Let me know if you have any questions

conor · 01-04-2012, 11:58 AM

Link to CSS position property: http://www.w3schools.com/cssref/pr_class_position.asp

jodybethw · 01-04-2012, 06:37 PM

Conor, thanks for your help!!!

01-04-2012, 11:58 AM	#3
conor Gold Member Join Date: Oct 2008 Location: Ireland Posts: 349	Link to CSS position property: http://www.w3schools.com/cssref/pr_class_position.asp __________________ Conor

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

01-04-2012, 11:56 AM	#2
conor Gold Member Join Date: Oct 2008 Location: Ireland Posts: 349	PHP does not really interact with CSS. What's happening in the link you gave is the html and css of the template is being changed in order to create a sticky footer. You can do the same with this code though it wont be along the exact same lines as the tutorial - it's kind of specific to one theme and also to an old version of wordpress. Steps to create sticky footer: 1 . Create backup of file, remove all php in the non-backed up version. This will help give you a better idea of whats going on since you admit your not good at PHP. 2. See CSS position fixed for creating the sticky footer. You might need to change the HTML around a bit to achieve the look you want. In the link you gave he removed the footer from the wrapper div - that would make it span the width of the page i think, you can do that if thats the effect you want. 3. Once you have a working footer that you like, re-add the PHP from the backup Let me know if you have any questions __________________ Conor

01-04-2012, 06:37 PM	#4
jodybethw New Member Join Date: Jan 2012 Posts: 4	Conor, thanks for your help!!! Last edited by jodybethw; 01-04-2012 at 06:51 PM.