How To Create A Back To Top Button

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

Access your site’s files via FTP or cPanel and go to your theme’s JavaScript folder, which will be in wp-content > themes > your-theme > js. or something similar.

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.

Edit functions.php

In order for the JavaScript file you created to have any effect, you need to tell WordPress you want to use the file. You can do this by creating what’s called an enqueue script in your theme’s functions.php file.

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.