To add a back to top button to a WordPress theme, it’s WordPress best practice to create a child theme so that any changes you make will not be erased by future updates of the original theme. If you’re not sure how to do this, you can check out my article on how to create a child theme.
Copy and Upload the Script
If your theme doesn’t contain a js folder, then go ahead and create one.
In this folder, create a new file called topbutton.js.
Make a Button
Youll need a button for this project so you can create one in your image editing software or purchase one or find a free one with the correct license.
Upload your image to your sites image folder and take note of the link.
Edit the style.css File
Open your CSS stylesheet add the following code. If Your not sure where at the bottom is a good place.
The best place to add the following code is at the very end of the file, that way it will be less likely that it will interfere with other code.
Add the Button Link
The last step is to add the actual link to the pages of your site so the button will appear.
You could put this link in every page template you have or in the header.php file, but since the button will appear at the bottom of the page, let’s put it in your footer. It will keep things nice and simple in case you decide to make future changes.
The button is set to hover separately over all content of the page at the very bottom, right-hand corner so it doesn’t matter where you put the button link as long as it’s not smack dab in the middle of other code. Placing it between the footer or a div tag is usually a good spot.