How can I add a bottom section, that stays fixed, just like I see on SP Demos.

[garymgordon]

How can I add a bottom section, that stays fixed, just like I see on the StudioPress demo pages .. such as on:
http://my.studiopress.com/themes/genesis/#demo-full

I want to be able to create a website, and have a fixed area on the bottom of the entire site, just like this.

Is it possible? What is needed to recreate this effect.

Thanks,
Gary

---

Gary M. Gordon
http://www.wpbns.com/ – Web, Podcasting, Broadcasting, New Media and Internet Marketing Services

http://my.studiopress.com/themes/genesis/#demo-full

[nutsandbolts]

Hi Gary,

Are you talking about the blue bar across the bottom of all the demos? You can recreate that effect pretty easily with a little PHP and CSS - here's an example from a client site I did (though obviously you'd want to alter it to fit your use case).

First, you would need to add a function to call your area after the footer:

add_action('genesis_after_footer', 'buy_now_button_fixed', 10); 
function buy_now_button_fixed() {
<div id="fixed-footer">
	Whatever you want to show in the area would go here - I used a widget area but you could use HTML.
</div><!-- end #fixed-footer -->
 <?php
	}
}

Then you'd want to add CSS to style the div:

#fixed-footer {
	position: fixed; // keeps the area glued in place
	bottom: 0; // displays at the very bottom of the screen
	width: 100%; // keeps the bar the width of the screen
}

Of course you might want to add other rules for background color, box shadow, etc. depending on how you want it to look.

You'd also need to put a margin-bottom on .site-footer the same height as the fixed area to allow room for the area to display.

I hope that gives you an idea of what you'd need to do - I definitely wouldn't recommend copying any of the above into your theme unless it makes sense and you know how to change it to fit your needs. As always, any time you alter your child theme's files, make sure you have access to the files via FTP and/or your host's file manager in case something goes wrong.

---

Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
I provide development and training services for designers • Find me on Twitter and Google+

[Sridhar Katakam]

http://sridharkatakam.com/add-fixed-bottom-section-genesis/

---

Genesis Tutorials | Follow me on Twitter

[Sabine]

Is the provided code for HTML5 as well? I'm a little bit confused about the # in the style.css;-)

[Tom88]

Sabine

The # is the ID selector in CSS,
In the CSS #fixed-footer { }
In the HTML <div id="fixed-footer"> this works in HTML5 & below.

Reference: CSS Id and Class Selectors - http://www.w3schools.com/css/css_id_class.asp

[garymgordon]

Thanks all. 🙂 This is perfect.

---

Gary M. Gordon
http://www.wpbns.com/ – Web, Podcasting, Broadcasting, New Media and Internet Marketing Services

[garymgordon]

nutsandbolts,

I tried placing your php code, and the site then wouldn't display.

Question.

You provided the php of

add_action('genesis_after_footer', 'buy_now_button_fixed', 10);
function buy_now_button_fixed() {
<div id="fixed-footer">
Whatever you want to show in the area would go here - I used a widget area but you could use HTML.
</div><!-- end #fixed-footer -->
<?php
}
}

1. I see you havea reopening of the php tag, but in your code, I don't see a closing of the php tag. So, why is it reopening (without a prior closing)? Can you explain why?

2. I also see two closing brackets " } " at the end, but I only see one opening " { " bracket in your php code. Can you explain why there's two closing brackets at the end, but only one interior opening bracket?

Just not sure why the current code breaks my site. Can you confirm the code you provided?

Thanks,
Gary

---

Gary M. Gordon
http://www.wpbns.com/ – Web, Podcasting, Broadcasting, New Media and Internet Marketing Services

[nutsandbolts]

That's why I provided the disclaimer that you shouldn't copy and paste my code - I was providing an example with my client's specifics removed, not something that would work without being altered. I was just trying to show you a very basic example of how it would work.

---

Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
I provide development and training services for designers • Find me on Twitter and Google+

[garymgordon]

nutsandbolts,

I understand, but can you explain "what parts" (specifically) of the php code you provided will need to be changed, how and why, so I can make the required modifications?

Gary

---

Gary M. Gordon
http://www.wpbns.com/ – Web, Podcasting, Broadcasting, New Media and Internet Marketing Services

[nutsandbolts]

What are you planning to put on your footer bar? Once I know that, I can try to walk you through what you'll need to make it show up correctly.

---

Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
I provide development and training services for designers • Find me on Twitter and Google+

[garymgordon]

nutsandbolts,

I got it working. 😉

Just changed it to:

add_action('genesis_after_footer', 'buy_now_button_fixed', 10);
function buy_now_button_fixed() { ?>
<div id="fixed-footer">
Whatever you want to show in the area would go here - I used a widget area but you could use HTML.
</div>

<?php
}

QUESTION: What is the reason for the number 10 being passed into the function?

I see if I remove the " , 10 " from the add_action('genesis_after_footer', 'buy_now_button_fixed', 10);

that everything still works fine. But I was curious why you had this. Is there something that the 10 does or did in your case?

And just a comment, the lines in your CSS similar to " // keeps the area glued in place " (that you displayed to indicate a comment in the CSS, was breaking the CSS) So I removed these and now all is good.

Gary

---

Gary M. Gordon
http://www.wpbns.com/ – Web, Podcasting, Broadcasting, New Media and Internet Marketing Services

[nutsandbolts]

The "10" was used in that particular case to prioritize something else in the footer so the fixed bar would display last.

Sorry about the CSS comments - those aren't present on the site, but I put them in to give you an idea of what each rule would do.

Since it's working, I'm going to mark this topic as resolved, but feel free to open a new one if needed. 🙂

---

Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
I provide development and training services for designers • Find me on Twitter and Google+

[garymgordon]

Yes. Thanks! All good.

---

Gary M. Gordon
http://www.wpbns.com/ – Web, Podcasting, Broadcasting, New Media and Internet Marketing Services

[garymgordon]

Sridhar Katakam

Since you are also familiar with Builder (from iThemes) can you answer this.

Since I am using:

Just changed it to:

add_action(‘genesis_after_footer’, ‘buy_now_button_fixed’, 10);
function buy_now_button_fixed() { ?>
<div id=”fixed-footer”>
Whatever you want to show in the area would go here – I used a widget area but you could use HTML.
</div>

<?php
}

with the Genesis theme, ...

what changes would I need to make to simply target the appropriate function (similar to genesis_after_footer) in Builder.

Is this possible? If so, can you explain what change I'd need to make for use with Builder themes?

Thanks,
Gary

---

Gary M. Gordon
http://www.wpbns.com/ – Web, Podcasting, Broadcasting, New Media and Internet Marketing Services

[Sridhar Katakam]

http://ithemes.com/codex/page/Builder_Tips_and_Tricks#How_to_add_code_just_after_.3Cbody.3E_and_just_before_.3C.2Fbody.3E

I think "builder_finish" is the equivalent hook. You might want to post in iThemes Builder support forum for further clarification on this.

---

Genesis Tutorials | Follow me on Twitter

[garymgordon]

Sridhar,

Thanks!!
Gary

---

Gary M. Gordon
http://www.wpbns.com/ – Web, Podcasting, Broadcasting, New Media and Internet Marketing Services

[Author]

Posts