Back to top button for any WordPress Theme no plugin required

Home Back To Top
Back To The Top Button

The Issue:

We have a WordPress website that contains a lot of post content that we can find ourselves getting lost within as the menu for this particular website is not sticky. What we need to do is create a link or a button on our page to scroll us back to the very top.
Here is how to create the "back to the top" link without the use of a plugin or editing any of your WordPress Theme template files.
We will use a smooth scrolling effect with JQuery for a better user experience and to avoid the flash to the top as we normally see with a plain hyperlink.

The Solution:

No plugins required!
Add some code to the functions.php file in your current theme. (or child-theme if you have it activated.)

The Example:

Visit Avon Valley Contractors for an example of the code working for this child theme.

Step 1 - Creating a link in the footer

Let's create a link that will be located in your theme's footer.
Add the following code to your function.php file:


Step 2 - Adding Link Styles

Let's create some style for our hyperlink and place it to the bottom right of our theme's page. We will place the style in the WordPress header using wp_head. Place the code below just below the code in step 1 into our functions.php file.


Step 3 - Adding The Scrolling Effect

Let's add a scrolling effect by including the code below just under the code in step 2 in our functions.php file. The link will be displayed on your page if you scroll down more than 400 pixels from the top of the page and will remain hidden at the very top of our page.
Please Note: You can change the pixel height on line 6 of our code if you would like to set the link/button to display sooner or later on your page.




With 3 easy steps with including some code to your functions.php file within your WordPress Theme folder you're able to achieve the same results as other WordPress Scroll To The Top plugins.

Back To Top Button

How to add an image button?

FIND: In step 1 on line 3 locate the following line:

REPLACE: and replace it with the following code:

Please Note: In this example you will need to replace with your actual domain name and full path to your folder. We suggest uploading your own image or icon to your webserver and add the correct path to that image into the code above.

The Completed Code in Functions.php



Peter Lowen
Follow Me

Peter Lowen

Peter Lowen is an Entrepreneur, Website Developer, and Author. He holds Diploma and Certifications in Business, Multimedia and Marketing. Loves blogging about all things business, programming and marketing.
Peter Lowen
Follow Me
Share This Post