Hey
I am wanting to make my footer sticky.
I am using layouts plugin with the Genesis integration plugin.
Usually when I write an html site I use this:
hidden link
Or if I am making a WordPress site with a Genesis theme I use the hooks and css such as this:
hidden link
But with the layouts and genesis integration plugin, my footer is in a container-fluid div inside the main.content so I can't use the genesis hooks to create the divs I need.
Do you have any suggestions how to achieve my sticker footer?
Thanks for your help
Jeff
Thank you for contacting Toolset Support. I am happy to help you with this. Typically this would be a custom coding request which we cannot support here but I can point you in the right direction.
Are you already using a child theme with Genesis? I recommend going that route that way you can add the needed footer code outside of the container-fluid div exactly where you need it to be in footer.php.
Using a "child theme" is the way to modify the original theme without it being overwritten. If you use the bare files needed it will not overwrite your current design.
The bare files are:
- style.css
- footer.php
Here are a few to get you started:
Sample Child Theme
hidden link
And a few tutorials:
Sample Child Theme
hidden link
Creating Your Own Genesis Child Themes
hidden link
Please let me know if this resolves your question.
Hi Tia,
Nice to meet you and thank you for the pointers.
I understand this is outside of general Toolset support, but I figured that a lot of people use layouts and lots of sites, if not most, like a sticky footer... although I just actually realised wp-types.com doesn't use a sticky footer.
I use Genesis with the sample child theme to style and alter the functionality, but have never customised the themes php files, other than functions before.
I will give this a try later.
Adding the div.page-wrap to genesis_before_footer hook results in this:
<div class="page-wrap">
<div class="site-inner">
<div class="content-sidebar-wrap">
<main class="content">
<div class="full-bg site-header"></div>
<div class="container></div>
<div class="container-fluid">
<footer class="site-footer"></footer>
</div>
</main>
<aside></aside>
</div>
</div>
</div>
I can find the </div.site-inner> and </div.site-container> tag inside the footer.php, the problem is that I need the footer to appear outside the div.page-wrap.
Which means I'll need to find the php files to close </main.content>, </div.content-sidebar-wrap> and </div.site-inner> then somehow get the <div.push></div> in there, above the <div> containing the footer.
And remove the extraneous tags
something like this:
<div class="page-wrap">
<div class="site-inner">
<div class="content-sidebar-wrap">
<main class="content">
<div class="full-bg site-header"></div>
<div class="container></div>
</main> <!-- .content -->
</div> <!-- .content-sidebar-wrap -->
</div> <!-- .site-inner -->
<div class="push"></div> <!-- added .push -->
</div> <!-- .page-wrap -->
<div class="container-fluid">
<footer class="site-footer"></footer>
</div>
</main> <!-- needs to be removed -->
<aside></aside> <!-- needs to be removed -->
</div> <!-- needs to be removed -->
</div> <!-- needs to be removed -->
</div> <! -- needs to be removed -- >
Anyway, I'll get back to you.
Thanks Jeff
I found the closing tags I need in the framework.php and footer.php files in the theme.
However since the Genesis Layouts Integration and layouts plugins have moved the contents of my footer inside a full width div.column inside a div.row inside a div.container inside the div.content-sidebar-wrap I'm afraid I don't see how I can hook in above where the footer has been moved, via a php file in the framework.
Yes I can add the new code where it would normally need to be, but the layouts footer will still appear half way up the page as it is contained within the main content, which is above all of this newly added code.
None of the theme files allow me to enter code inside this area inside the layout.
I may be mistaken. I'll test it anyway.
In the meantime... perhaps there are other solutions?
Is it possible to stop the layouts/genesis layouts integration plugin from moving my footer into the div.contents-sidebar-wrap and leave it where it should be?
Alternatively, maybe I could completely remove the layouts footer somehow? Can you advise me how to do this? That would be better than just not displaying it with .css
Then I can re-add an alternative footer via the child theme hooks and framework.
Thanks for your help
Jeff
Being silly, I see I can delete the footer from the 'header and footer' parent layout.
Will then see about using additions to the theme php files to re-add a footer in the right place. If I get it to work, will post solution here.
So got it working.
1. Deleted footer from Layouts
2. added the following code to my functions.php - similar effect could be gained adding custom footer.php to child theme:
//* Sticky Footer Functions
add_action( 'genesis_before_header', 'stickyfoot_wrap_begin');
function stickyfoot_wrap_begin() {
echo '<div class="page-wrap">';
};
add_action( 'genesis_before_footer', 'stickyfoot_wrap_end');
function stickyfoot_wrap_end() {
echo '</div><!-- page-wrap -->';
};
add_action( 'genesis_before_footer', 'add_footer');
function add_footer() {
echo '<footer class="site-footer" itemscope itemtype="<em><u>hidden link</u></em>">Footer Content Here</footer>';
3. added following to child theme .css:
html, body {
height: 100%;
}
.site-container {
height: 100%;
}
.page-wrap {
min-height: 100%;
margin-bottom: -90px;
}
.site-inner {
min-height: 100%;
margin-bottom: -90px;
}
.site-footer, .site-inner:after {
height: 90px;
}
Thanks for your pointers.
Jeff
Smart solution! Thank you for sharing this solution. It will definitely help others looking for something similar.
Got there in the end, after my usual overly complicated convolutions.
Searching these forums have helped me no end in solving problems, so happy to share. Also provides me with somewhere to store my solutions.
Jeff
