Community Forums › Forums › Archived Forums › Design Tips and Tricks › creating back to top link in Frameworks
Tagged: backtotop
- This topic has 9 replies, 3 voices, and was last updated 10 years, 3 months ago by Kitty.
-
AuthorPosts
-
January 20, 2014 at 1:45 pm #86138janburgMember
The more I look at all the options for creating a link to the top for the footer in Frameworks the more confused I get as none of the options seem to work. I've tried the Simple Edits plugin, copied snippets of code and put it in the functions.php, and I'm not getting the link.
Right now this is in my functions.php file in the child theme:
http://192.185.150.46/~designsb/
//* Customize the entire footer
remove_action( 'genesis_footer', 'genesis_do_footer' );
add_action( 'genesis_footer', 'sp_custom_footer' );
function sp_custom_footer() {
?>
<p>© Copyright 2014 · Designs by Donna Atlanta · All Rights Reserved ·</p>
<?php
}
What do I need to add to get the back to top link? I'm not real good at coding, so please be patient with me. Thanks!January 20, 2014 at 4:12 pm #86174nutsandboltsMemberTry this one instead:
// Custom Footer add_filter('genesis_footer_output', 'footer_output_filter', 10, 3); function footer_output_filter( $output, $backtotop_text, $creds_text ) { $backtotop_text = '[footer_backtotop text="Return to Top of Page"]'; $creds_text = 'Copyright [footer_copyright] <a href="http://designsbydonnaatlanta.com/" target="_blank" rel="nofollow">Designs by Donna Atlana</a> · All Rights Reserved'; $output = '<div class="gototop">' . $backtotop_text . '</div>' . '<div class="creds">' . $creds_text . '</div>'; return $output; }
You may need to add some CSS to float "gototop" left and "creds" right, but that should get it working.
Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
I provide development and training services for designers • Find me on Twitter and Google+January 20, 2014 at 4:25 pm #86180janburgMemberAlmost. The footer now reads:
<div class="gototop">Return to Top of Page</div><div class="creds">Copyright © 2014 Designs by Donna Atlana · All Rights Reserved</div>And the link doesn't work, so I'm guessing there's an anchor saying where the top is? Just guessing...
January 20, 2014 at 4:27 pm #86181nutsandboltsMemberDid you copy from the notification email? If so, try copying directly from the post here on the forum, since the emails strip out the proper formatting.
Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
I provide development and training services for designers • Find me on Twitter and Google+January 20, 2014 at 4:33 pm #86182janburgMemberYes, that did it, thanks so much!
January 20, 2014 at 4:34 pm #86183nutsandboltsMemberAwesome! I'm going to mark this as resolved but feel free to open a new topic 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 20, 2014 at 4:34 pm #86184janburgMemberoops, wrote too fast, the link still doesn't take me to the top?
January 20, 2014 at 4:41 pm #86187nutsandboltsMemberOkay, this has several steps, but stay with me.
First, remove the function I gave you and replace it with this one:
// Custom Footer add_filter('genesis_footer_output', 'footer_output_filter', 10, 3); function footer_output_filter( $output, $backtotop_text, $creds_text ) { $backtotop_text = '[custom_backtotop]'; $creds_text = 'Copyright [footer_copyright] <a href="http://designsbydonnaatlanta.com/" target="_blank" rel="nofollow">Designs by Donna Atlana</a> · All Rights Reserved'; $output = '<div class="gototop">' . $backtotop_text . '</div>' . '<div class="creds">' . $creds_text . '</div>'; return $output; }
Then add this function right above it to create the custom back to top shortcode I used above:
//* Create a shortcode to display custom back to top link add_shortcode('custom_backtotop', 'set_footer_custombacktotop'); function set_footer_custombacktotop($atts) { return ' <a href="#" class="top">Return to top of page</a> '; }
Then add this one to enable smooth scrolling (props to Sridhar Katakam for this):
//* Add smooth scrolling for any link having the class of "top" add_action('wp_footer', 'go_to_top'); function go_to_top() { ?> <script type="text/javascript"> jQuery(function($) { $('a.top').click(function() { $('html, body').animate({scrollTop:0}, 'slow'); return false; }); }); </script> <?php }
Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
I provide development and training services for designers • Find me on Twitter and Google+January 20, 2014 at 4:59 pm #86191janburgMemberPerfect!
One of these days I need to learn php.
Thanks for your help.
January 24, 2014 at 6:29 am #86784KittyParticipantIs it possible that the back to top link created by Simple Edits refers to #wrap instead of .wrap?
Should it not be updated to HTML5 this plugin?
Just wondering...
<div class="creds"> [footer_copyright first="2007"] W. Vos | [footer_backtotop]</div>searches http://www.keesomlaan.nl/eekhoorn/agio/#wrap ??
Kitty
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.