Not sure if it's just me or not, but I have noticed that [[footer_backtotop]] shortcode added in the footer via genesis_footer_creds_text filter does not work. Clicking on the "Return to top of page" footer link does not lead anywhere. My guess (being new to Genesis) is that with the release of Genesis v2.0, there have been structural changes and this shortcode has not been updated yet as it's still looking for a #wrap that does not exist.
Anyway, let's fix and in fact enhance this by making the scrolling to top action smooth using the method in this post. Another minor visual benefit is that after the go to top link is clicked, the URL of the page remains the same.
Create a file named say, sitewide.js having the following and upload it to child theme's
js (create, if not existing) directory:
To view the full content, please sign up for the membership.
Already a member? Log in below or here.
Love this, thank you Sridhar.
[…] you are looking to add a working ‘To Top’ link in the footer, see this […]
[…] Het kan ook nog mooier met deze tip: Add a working “Return to top of page” footer link in Genesis themes […]
What are you using on your to the top?
I am sorry, you have the arrow on the sidebar that takes you to the top, which is this?
I am using Dynamic “To Top” plugin. http://wordpress.org/plugins/dynamic-to-top/. I have it mentioned in http://www.sridharkatakam.com/favorite-plugins/.
Thanks Sridhar. Super helpful!
Thanks – worked a treat.
It worked fine when I added it to the theme functions file. Thanks for the very helpful post.
Just updated the post with the following:
“Note: All the code below goes in child theme’s functions.php.”
Hi Sridhar, thank you very much for your help with your brilliant article. Worked straight away, and then also noticed your bonus CSS, very nice touch! Hoping Sachin gets a 100 tomorrow!! 🙂
Thank you VERY much for this tutorial, I was going crazy trying to find a solution for this. Now I was wondering if it would be possible to do the same for a “Back to bottom” button. I can’t seem to find out what the new anchor for the footer is. Thanks again!
Here you go: http://www.sridharkatakam.com/set-go-bottom-link-scrolls-smoothly-wordpress/
[…] my Post titled Add a working “Return to top of page” footer link in Genesis themes, a user asked in the […]
Hi Sridar, I have used this technique a number of times now and I just wanted to say thanks again for writing this post. I have one general question about adding jQuery: I notice in this tutorial you did not enqueue jQuery to get the ‘scroll to top’ working. I have read a number of articles on using Genesis and jQuery. Some people say to use the Google CDN while others say to use jQuery that ships with WordPress. I am in my first year of web development but I would like to add elements of jQuery on my web projects. Can you give us your opinion on this subject? I have used Google CDN on a few projects, but it sometimes breaks other plugins like Nivo Slider or I have to rewrite the $ sign with ‘jQuery’. Most of what I have been doing seems like a bit of a hack. If you have any blog posts on this subject, could you add a link to them somewhere in your reply?
jQuery comes built-in with WordPress. There is no need to and in fact it is not recommended to use the one from Google CDN.
“Also, you’ll see I used the version of jQuery included in WordPress. So should you. You’re making a theme. Use the jQuery included with WordPress. It will always be up to date and compatible with core. It will always work. I’ve seen Otto argue with enough people about this (including me). He’s right.”
also note http://wpcandy.com/teaches/how-to-load-scripts-in-wordpress-themes/#comment-517876
Thanks Sridar. Could you answer one more question? The article you referenced is related to WordPress, as I am using The Genesis framework (which is WordPress, I know), but does all the code on that article work with genesis? Or are there any additions to the code when adding it to the Genesis Framework? That’s my last question, thanks for all your help.
Yes. The code in that article works in Genesis.
I personally just use wp_enqueue_script() instead of first using wp_register_script().
Also as we generally use a child theme, get_stylesheet_directory_uri() should be used instead of get_template_directory_uri().
For examples of using jQuery in Genesis, see http://www.sridharkatakam.com/tag/jquery/
Awesome bro. You are a star. Hopefully this will stop be breaking elements in future web projects. I will take a read today
That’s perfect article, however, I want to display a button “back to top” like on your blog. How can I do it? Thank you!
I believe Sridhar has answered that question in the comments above. It may be hard to find as there have been a lot of comments.
The back to top button he uses in his website can be downloaded here: http://wordpress.org/plugins/dynamic-to-top/ – it is very simple to set up.
You can also create a background image to the “back to top” div if you use the Genesis method. I did it on this website (you can see it below the footer) http://188.8.131.52/~av/
Hope that helps – Seb
[…] you can easily add back that ‘return-to-top’ link with another snippet from Sridhar or with plugins like ‘jQuery Smooth Scroll‘ as used here on […]
[footer_backtotop href=”#”] will work in the genesis_footer_creds_text filter
[…] inferior. Te muestro cómo hacerlo. El código lo obtuve visitando la página (en inglés) de Shridhar Katakam. Notas que apliqué a mi sitio y pude colocar dicho […]
I extended your awesome tutorial!
Inside the functions file in the add_shortcode code section I changed your code into this:
The arrow up is actually just a pasted in utf-8 code in which I removed all of the code except the arrow that showed up after I pasted it in from the keyboard symbols from my Mac, and it worked..:)
CSS that I used:
/* Code from http://www.webdesignerdepot.com/2012/11/how-to-create-a-simple-css3-tooltip/ */
margin: 0 0 0 10%;
padding: 0.9em 1.5em;
-webkit-transition: all .2s linear;
-moz-transition: all .2s linear;
-o-transition: all .2s linear;
transition: all .2s linear;
padding: 5px 5px;
border-color: #333 transparent;
border-width: 6px 6px 6px0 6px;
Perhaps you could just add it into your tutorial?
The html functions code was stripped so I am pasting without bracket start and end:
a href=”#” class=”tooltip” title=”Back to top”>⇪</a
Thank you, worked perfectly!
I can’t thank you enough for this detailed information. It has helped me immensely!
Very easy. Worked perfect. The hard part was finding this solution. Grrrrrrr!
Wow! I came to fix the “Return to top” problem of Genesis but I got a better solution. Thanks for mentioning the plugin Dynamic “To Top” Plugin.’
[…] http://sridharkatakam.com/add-working-return-top-page-footer-link-genesis-themes/ […]