How to Add a “Back to Top” Button to WordPress
November 17, 2009
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.
Related posts:
- Using WordPress for a full CMS Website Based on a comment I received earlier today, I thought...
- How to Add a Signature Graphic to Your BlogSpot or WP Blog Adding a Graphic Signature to Your Blogspot Blog I just...
- Removing the Words “Archive of…” from Category Pages Ok, so I’ve been googling this question for a while...
- Customized Blogger Theme I just created a completely customized blogger theme for someone...
- Free Tropical WordPress Theme Hafa adai from Guam! This tropical paradise WordPress theme was...
Related posts brought to you by Yet Another Related Posts Plugin.
Posted in Wordpress Tips and Tricks | 
Tags: blog design, blogger tricks, Design, quick designs, Wordpress Tweaks
6 Responses to “How to Add a “Back to Top” Button to WordPress”
Leave a Reply
not working dude !!
can u explain in detail plz mail me:
plzz
thnx in advance
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 !!
and 1 more thing your site looks gr8…i’ll subscribe to it !!
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.
[...] Read more: Adding Scrolling Back to Top Button In WordPress | http://www.reflectingthedesigner.com [...]