How To Add Back To Top Button In WordPress

back to top button

To retain and expand your site’s readership, it is a must to maintain a good user experience. For example, if your page content is lengthy, you might want to add ‘back to top button’ on your page. 

Without this button, your visitor might get exhausted and leave your site instead of scrolling all way to the top. Fortunately, adding this button in WordPress is very easy and simple. 

In this article, I will show you how to add back top button in WordPress. I will show you two methods; then it’s up to you to choose one. 

Let’s dig in. 

What Is A Back To Top Button?

It is simply a button that comes with an arrow icon that allows you to scroll to the top of the page directly. When you are at the bottom of the page, you can use this button to scroll to the top immediately without even scrolling by yourself. This button is very much useful if your page is a little bit longer. 

When it comes to styling, you can style the button in the way you want, but it should be visible enough to catch the visitor’s eye. The button should not be too big or overemphasized, either. 

How To Add Back To Top Button In WordPress

You can add the Back to top button in two ways. One by using the plugin and the other is by adding code to your php.file. I prefer using a plugin, but in case you want the other way, I am providing both procedures. 

Add Back To Top Button Using Plugin

In the WordPress repository, you will found a couple of plugins like – To Top, Scroll Top, Simple Scroll to Top Button, WPFront Scroll Top, which will allow you to add ‘back to top’ button. Among these plugins, WPFront Scroll Top comes with all the customization options that you are going to ever need. 

This plugin is the easiest one to use. Therefore I suggest you use the WpFront Scroll Top plugin for adding back to the top button. 

First, Install the plugin and activate it. As soon as you activate the plugin, you will see the settings panel of the plugin. You can also access the settings from Settings -> Scroll Top. 

Now place a tick on the ‘Enabled’ field, and the plugin will be enabled. Now its time to set up different settings. All the settings come with a default value, but if you want to customize yourself, feel free to do it. 

Customize The Button:

You can set Scroll Offset(the number of pixels to be scrolled before the button appears), adjust the dimension. The opacity of your button should appear brighter; when it’s not active. This provides an elegant animation effect. 

You can hide the button automatically by placing a tick on the ‘Auto Hide’ then set the timer. In the eve of inactivity, this will help to disappear the button and will reappear when you move your cursor again. Then set your preferred button position; usually, everyone prefers it at the bottom right.

Select Pages:

From the Filter, menu choose the pages where you want to show your Back to top button. You can select all pages or custom pages. This plugin also allows you to exclude pages, therefore choose the way you prefer. 

Choose Logo:

Finally, choose the button logo and hit the Save Changes. Congrats! You have successfully added the Back to top button in your WordPress site. 

Add Back To Top Button Without Using Any Plugin

To add the Back to top button without using any plugin, first, you need to access your website’s files via FTP to locate your Javascript folder. You can use any FTP solution like Filezilla. 

After successful login, go to wp-content -> themes -> your theme -> js (‘your theme’ is the theme that you are currently using for your website.)

Now create a new file named topbutton.js in your js folder. Then open the file and paste the following code:

 jQuery(document).ready(function($){
    var offset = 100;
    var speed = 250;
    var duration = 500;
        $(window).scroll(function(){
            if ($(this).scrollTop() < offset) {
                      $('.topbutton') .fadeOut(duration);
            } else {
                      $('.topbutton') .fadeIn(duration);
            }
        });
     $('.topbutton').on('click', function(){
            $('html, body').animate({scrollTop:0}, speed);
            return false;
            });
});

If you wish, you can change the speed and duration of the button by increasing or decreasing the values.

Now you need an image for your button, create it, and upload it in the WordPress media library. Afterward, copy the URL of the image. 

This URL will be used in your style.css file. To access it, go to Appearance -> Theme Editor and click on the stylesheet tab. Paste the following snippet in the stylesheet. 

.topbutton {
     height:50px;
     width:50px;
     position:fixed;
     right:5px;
     bottom:5px;
     Z-index:1;
     background-image:url("https://example.com/wp-content/uploads/2015/01/topbutton.png");
     background-repeat:no-repeat;
     display:none;
}

Be sure to replace the URL that you copied before with the above URL in the code. Click on ‘Update File.’ 

Click on the Theme Functions (functions.php) tab and paste the following script.

function my_scripts_method() {
     wp_enqueue_script(
           'custom-script',
           get_stylesheet_directory_uri() . '/js/topbutton.js',
           array( 'jquery' )
     );
}

add_action( 'wp_enqueue_scripts', 'my_scripts_method' );

Now hit the ‘Update File’ button. 

Finally, its time to add your button to the footer of your page. Go to Theme Footer (footer.php) tab and paste the following snippet.

<a href="#" class="topbutton"></a>

Click on ‘Update File,’ and it’s all done. Now your back to top button should display on the pages of your WordPress website. 

Last Words

Both ways I have shown here are feasible, but I recommend using the plugin because it saves time and gives you a lot of customizations without any hassle. Feel free to tell your thoughts through the comment box below. 

Leave a Comment

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

Copy link
Powered by Social Snap