• Skip to main content
  • Skip to forum navigation

StudioPress

  • Shop for Themes
  • My StudioPress

Forum navigation

  • Home
  • General Genesis Discussions
  • StudioPress Themes
  • Genesis Blocks
    • Genesis Blocks
    • Genesis Custom Blocks
  • Retired Themes
  • FAQs
  • Forum Rules
  • Internationalization and Translations
  • Forum Bugs and Suggestions
  • Forum Log In

Are You Using The WordPress Block Editor?

Genesis now offers plugins that help you build better sites faster with the WordPress block editor (Gutenberg). Try the feature-rich free versions of each plugin for yourself!

Genesis Blocks Genesis Custom Blocks

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

Welcome!

These forums are for general discussion on WordPress and Genesis. Official support for StudioPress themes is offered exclusively at My StudioPress. Responses in this forum are not guaranteed. Please note that this forum will require a new username, separate from the one used for My.StudioPress.

Log In
Register Lost Password

Community Forums › Forums › Archived Forums › General Discussion › How can I add a bottom section, that stays fixed, just like I see on SP Demos.

This topic is: resolved
  • This topic has 15 replies, 5 voices, and was last updated 9 years, 5 months ago by garymgordon.
Viewing 16 posts - 1 through 16 (of 16 total)
  • Author
    Posts
  • December 31, 2013 at 12:36 pm #82353
    garymgordon
    Member

    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
    January 1, 2014 at 1:51 am #82447
    nutsandbolts
    Member

    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+

    January 1, 2014 at 6:28 am #82462
    Sridhar Katakam
    Participant

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


    Genesis Tutorials | Follow me on Twitter

    January 1, 2014 at 8:29 am #82477
    Sabine
    Member

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

    January 1, 2014 at 10:31 am #82492
    Tom88
    Member

    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

    January 1, 2014 at 11:25 am #82497
    garymgordon
    Member

    Thanks all. 🙂 This is perfect.


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

    January 1, 2014 at 12:12 pm #82504
    garymgordon
    Member

    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

    January 1, 2014 at 12:14 pm #82506
    nutsandbolts
    Member

    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+

    January 1, 2014 at 12:19 pm #82510
    garymgordon
    Member

    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

    January 1, 2014 at 12:20 pm #82511
    nutsandbolts
    Member

    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+

    January 1, 2014 at 12:38 pm #82516
    garymgordon
    Member

    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

    January 1, 2014 at 12:41 pm #82518
    nutsandbolts
    Member

    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+

    January 1, 2014 at 12:43 pm #82520
    garymgordon
    Member

    Yes. Thanks! All good.


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

    January 1, 2014 at 1:03 pm #82527
    garymgordon
    Member

    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

    January 1, 2014 at 6:52 pm #82583
    Sridhar Katakam
    Participant

    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

    January 1, 2014 at 7:05 pm #82585
    garymgordon
    Member

    Sridhar,

    Thanks!!
    Gary


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

  • Author
    Posts
Viewing 16 posts - 1 through 16 (of 16 total)
  • The forum ‘General Discussion’ is closed to new topics and replies.

CTA

Ready to get started? Create a site or shop for themes.

Create a site with WP EngineShop for Themes

Footer

StudioPress

© 2023 WPEngine, Inc.

Products
  • Create a Site with WP Engine
  • Shop for Themes
  • Theme Features
  • Get Started
  • Showcase
Company
  • Brand Assets
  • Terms of Service
  • Accptable Usse Policy
  • Privacy Policy
  • Refund Policy
  • Contact Us
Community
  • Find Developers
  • Forums
  • Facebook Group
  • #GenesisWP
  • Showcase
Resources
  • StudioPress Blog
  • Help & Documentation
  • FAQs
  • Code Snippets
  • Affiliates
Connect
  • StudioPress Live
  • StudioPress FM
  • Facebook
  • Twitter
  • Dribbble