Add a Back to Top Button in WordPress

Jul 26, 2017 | WordPress Plugins, WordPress Wednesday

Simple (and free) solution to add a “Back to Top” button on your WordPress website. This gives your users a much better user experience on your longer pages.

Full Audio Transcript

Hey y’all, welcome to another WordPress Wednesday. My name is Kori Ashton, here in San Antonio, Texas. I have to say, I had an amazing time at WordCamp Boston 2017. It was so cool to see all of you amazing people in the Boston area and surrounding areas, come together for an incredible weekend. Thanks so much for having me as one of your speakers. I look forward to checking it out on WordPress.TV.

Alright, this video is all about how to add a back to top button to the bottom of your website so that users can very quickly get back up to either the navigation or to your logo or to your contact information. Whatever might be at the top. This is a great user experience to add and it’s a pretty lightweight plugin to include in your website.

So, let’s get to it. I’ll show you how to do that and which plugin, as of today, that I recommend. It’s called WPFront Scroll Top. I want you to always double-check, no matter what time it is, that you’re watching this video; I want you to be sure that this video is still up-to-date. It’s been updated recently. That it’s compatible to your current version of WordPress that you’re running and that it has really great reviews. And that’s for any plugin. As long as that’s in place, you should be okay to go ahead and install the plugin and try it out in your system. What we’re gonna do it we’re gonna go to plugins and we’re gonna say “Add New” and we’re gonna look for that specific plugin. WPFront Scroll Top.

This is what it looks like. Forty plus active installs, which is pretty spectacular. We’re gonna click “Install Now”. And of course, we’re gonna activate it. Once those things are in place, you’ve got an area on here called “Settings”. Right over here, so that’s where we’re gonna go next. And of course, the first step is just to enable it.

I want you to just slowly work down through all of these options, but for the sake of this particular tutorial, I’m just gonna show the ones that I pay attention to mostly. So, I am going to enable this so that it works. I am going to auto-hide after a few seconds so that you’re not constantly blocking other content. You can hide on small devices, but I highly recommend you leave it accessible on a cell phone. I think that would be cool. You probably don’t need it in the admin area, so you can go ahead and hide that.

I also want to go ahead and add in some alt text here. So back to top for some alt text on the image that it’s gonna allow me to use. If you want to use the text button instead, you can set all those options here. Your location. Very typically these sit in the bottom right. But, if you have something there that you don’t want covered up, you can apply it somewhere else. I’ll leave it at the bottom right for now. You can also hide it on certain pages or posts. That’s kinda cool. For now, we’re gonna go ahead and leave it on all pages.

You have some options of some default imagery that the authors give you. I’m gonna pick this one. I think that’s pretty cool and click “Save Changes”. That simple. You can also add in your own unique button if you want. So, scrolling down here, check it out “Back to Top”.

Kinda cool, y’all. I’ll see you next WordPress Wednesday.