SavyCoder

Email: Hello@savycoder.com

savycoder logo
Menu
Request a Quote
3 mins read

How to Add a Back to Top Button WordPress Without Plugin?

The back to top button in WordPress helps visitors scroll to the top of the page instantly by clicking on the small button.

I always found it frustrating to scroll up manually while reading a documentary or lengthy articles. In a survey, while building a knowledge-rich website for a US client, I found that 85% of people felt the same and left the page.

Therefore, if you have long detailed web pages on your website, you must add a back-to-top button. In this blog tutorial, I’ll show you the simplest way to add a back to the-top button to your WordPress website.

back to top button wordpress without plugin

Back to Top Button WordPress without Plugin

Here’s a list of all the topics discussed in this post. Feel free to click on any of them to jump directly to the section you’re most interested in.

Why Add a Back to Top Button?

A “back to top” button might seem like a small extra button at the corner of every page on the website, but its impact on user experience can be substantial. It offers a quick and convenient way for visitors to navigate to the top of long pages without scrolling and only clicking on a small button, enhancing overall site usability.

This simple feature can significantly reduce bounce rates and improve engagement, as users are more likely to explore your content further when they can easily navigate your pages. So, adding a ‘back to top’ or ‘scroll to top’ button on your website is recommended, especially if you have lots of content on your pages.

How to Add a Back to Top Button WordPress?

There are many ways to add a back-to-top button in WordPress, here I’ve listed all the methods including my recommended simple way so you can choose one that suits you.

Method 1: Using Astra Theme

Astra theme gives you more control over the look and feel of your web pages and user experience. It’s lightweight, fast, and offers many useful features for free. Now here’s how to add a back-to-top button using Astra:

  • Login to your WordPress dashboard.
  • Go to Appearance and click on the Customize tab. The live customization screen will pop up. 
  • Click on the General Settings tab and scroll till you see the option for enabling the back-to-top button. Enable the option and that’s it. You will now see the back-to-top button on every page.

Many other themes like Zakra also provide this option by default. You can read the documentation of the theme you use on your WordPress website to see if it has the default ‘back to top’ button option.

However, if your WordPress theme does not offer this feature, you can always try other methods below.

Method 2: Using a Lightweight Plugin

Using a lightweight plugin is another good option to add a back-to-top button to your website. However, if you’re already using too many plugins on your website, then I recommend you try the other method of using Elementor website builder, explained below, or remove extra plugins because too many plugins might slow down your website.

Now the plugin I would recommend to use for this job is WPFront scroll top. This plugin is lightweight and highly customizable, allowing you to choose the button’s appearance, location to appear, and scroll speed. Let’s see how to quickly set it up: 

  • First login to your WordPress dashboard. 
  • Go to plugins, and click on Add New. Here in the search bar, type ‘wpfront scroll top’. 
  • Click Install then Activate it. 
  • Follow the steps as shown in the video below to do further settings.

Friendly Notice: You will find many videos and tutorials on how to add back to the top button using custom code, but trust me that has never been the right approach for me and my clients. I used this method on a few projects but after some time, the code seems misbehaving during site audit.

So, when you update a theme it will remove the code from the child theme and override the update if you have added it to the main theme resulting in malware issues.

Conclusion

Hence, adding a “back to top” button to your WordPress site enhances user experience. In this blog tutorial, I have shared the 3 simplest methods to add a scroll to the top button to your WordPress site and a notice on the not-recommended method that could harm your website. 

Remember, improving your site’s usability is always worth the effort, as it encourages visitors to stay longer and explore more of your content. Let me know which method works best for you. 

Have you tried adding a “back to top” button to your WordPress site using this guide? Share your experiences or any challenges you faced in the comments below. Need help with your WordPress website? Contact me today!

So, that’s all for this blog. All the methods explained in this blog are personally tested and approved by experts. I hope you will find these helpful. If you are stuck anywhere then SavyCoder is just a text away to help. Approach via contact us.

Leave a Comment

Your email address will not be published. Required fields are marked *

Recent Posts

Freelancing

Shopify

Scroll to Top