- WordPress Tutorials
- Artisteer Tips
- Add Button Class to Widget
- Add Style to Text Widget
- Add a Sidebar in the Header
- Create Custom Post Header
- Create Unique Page Template
- Create Secondary Menu
- Create Styled Donate Button
- Create Widget Style – Part 1
- Create Widget Style – Part 2
- Hide Category Titles
- Styling Featured Image
- Styling Sheet Borders
- Using Theme Options
- Design Tips and Tricks
- Recent Projects
How to Add a “Back to Top” Button to WordPress
Adding a scrolling “Back to Top” button is a very nice feature for your blog so that people don’t have to keep scrolling to get back to the top of the page. I have already posted on how to do this for your BlogSpot blogs, and you can view that post on Blogger Scrapbook by clicking here.
Adding this button to WordPress takes a few more steps, but is still relatively easy. Now, I got the basic information from a site called instantShift, but they don’t have all of the information you need to actually add a button yourself. But, not to fear, I have been working and tweaking until I figured out exactly what you need to do in the simplest way! So, here goes!
- First of all, create and upload an image you want to use to your WordPress ftp, and save the url to it’s location.
- Secondly, log into your dashboard and click on Editor, then Header.php.
- Look for the following code:
</head>
<body> - If the body element already has an id, copy that id name, but if it does not, give it an id by changing it to the following and save your template:
<body id=”top”> - Now, go to your Footer.php and find the following code
<p> class=”art-page-footer”></p>
</div> - Directly after that code, add this code:
<div>
<a style=”display:scroll;position:fixed;bottom:10px;right:10px;” href=”#top“><img
src=”THE URL TO YOUR IMAGE HERE”/></a>
</div> - Change the URL to your actual image url, and you can change the position on the screen by changing the red elements above.
- Make sure, that if your Header.php already had an id associated with the body, that you replace “#top” to that id instead making sure to keep the # and quotation marks.
- Save your template, and you are all done!
- If you also want to add a text link to the bottom of your posts, all you need to do is add the code below to the bottom of each post that you write (just make sure that you are in HTML mode and not Visual):
<a href=”#top”>Back to Top</a>
I just did this for my own site, and it works great in IE, Firefox, and Safari. Hint: You can use this same trick to add buttons to your footer that link to your RSS feed, or other items. Simply change the “#top” to the http address where you want the image to link to, and of course, you’ll need to add the correct image and image url as well.
Please leave a comment if this was helpful or if you have any questions, and feel free to contact me if you are interested in any customized graphics or buttons. I do have some free pre-made and hosted back to top buttons available on my Blogger Scrapbook site.
© 2009 – 2010, Sarah Roberts – Reflecting the Designer. All rights reserved.
10 Responses to How to Add a “Back to Top” Button to WordPress
-
-
I thought I’d post a reply as well for the sake of others who may have run into this same issue. If you copied and pasted directly from my site, your problem may be as simple as the direction of the quotation marks (WP changed the front quotation marks to end ones). Make sure that you always put any pasted code into a Notepad or other Text editing program first before pasting it directly into your blog’s code. Also, I would go back through each of the quotation marks to make sure that they are correct even in your text editor.
Some other common errors would be mistyping the url to your image, the id name and your hint name being slightly different, etc. If you are still having trouble beyond that, I won’t be able to help you unless I can actually see your code.
Hope that helps!
-
-
ya it was the problem of direction of the quotation marks
….it worked gr8 and thnx for the reply !!
Thn i downloaded the plugin [SMOOTH SCROLLING LINKS IN WORDPRESS [SSL]]
from here:http://www.thechetan.com/smoothscrolllinks/#header
u can visit my blog….i have just started updating it !!VERY THNX FOR THE DIRECT REPLY !!
-
-
Thanks, and glad you got your back to top button working.
I did see that pluggin earlier, but I try to avoid adding pluggins if I can figure out how to edit the code myself. (just to save database space). However, I do like the way that one scrolls.
-
-
-
-
I have been using this and forgot where I originally found it. I LOVE that it is so much cleaner than typical buttons or links all over a page just to return to the top.
I may have one simplification. I use ‘ href=”#” ‘ and I do not have to rename, edit or use the ‘ body id=”top” ‘.
CODE:
CSS:
.float-scroll{
display:scroll;
position:fixed;
bottom:5px;
right:5px;}For my purposes, I have also placed the code in the main body of my page text so I can use it on a page by page condition (some pages are so small they won’t scroll much if any). Hope this is useful.
-
Thanks for the followup, and yes the pound sign works much better. I do use the “back-to-top” feature occasionally in specific pages for different sites, but usually only when I’m also using the name tag as well. (Like long FAQ info. that people don’t want to have to scroll up and down to find what they need.)
-
Leave a Reply
Like This Theme?
Make your own theme using Artisteer, then come back here for tips on how to make the most use out of this powerful design tool!
Best Image Resource
Recent Projects
