How to Install a Back To Top Button on Your Blog

How to Install a Back to Top Button on Your Blog in WordPress | angiemakes.com

In today’s WordPress tutorial I wanted to share a handy little WordPress plugin that will leave your site so much more friendly for your site visitors. We’ll go over how to install a back to top button on your blog. What are they and why do you need one?

Well, if you’ve ever visited a blog page with a ton of vertical content (like a shop or blog page with lots of posts), you’ve no doubt gotten frustrated with the endless scrolling and scrolling and scrolling…. and, well, scrolling. If you’re toward the end of page, you need to give your users a quick way to easily land back at your main menu / important content at the top of your site.

SOLUTION: Enter the back to top button. Ah. So much better.

How to Add a Back to Top Button to Your Blog | angiemakes.com

PSST. We love Amy’s site that runs on our Meadowbrook theme. She’s got a killer back to top button installed. I’ve installed one on my own site too and I’m here to show you how you can easily install one as well.

Anyhow, here’s how to install a back to top button on your blog.

First, install the free plugin called WPFront Scroll Top. This plugin is well-coded and plays nicely with Angie Makes feminine WordPress themes. Basically, this plugin does what it says and allows for some nice customization options… including uploading some custom back to top image buttons. I’ve included a download of some of these FREE back to top buttons below. You’re welcome! :)

Here’s how to easily install this plugin with your own back to top images. You’ll need to make sure you have a self-hosted WordPress site with the ability to install free 3rd party plugins. Here’s how to get your back to top button installed in no time. Psst… scroll below for the video tutorial.

  1. First, download the free plugin.
  2. Upload and activate the plugin in the plugin section of your dashboard.
  3. Navigate to the new WPFront Scroll Top section in your WordPress dashboard.
  4. Now, make things look how you want them to! Here’s what the interface looks like.

screen-shot-2016-10-02-at-9-56-49-pm

screen-shot-2016-10-02-at-10-14-13-pm

screen-shot-2016-10-02-at-10-08-24-pm

There’s a bunch of confusing options and ugly back to top buttons. Ick. Leave the defaults set, then… scroll to the very bottom where it says custom url. This is where we’ll put the custom url for the custom image you upload via your WordPress media tab.

Here’s how!

Upload your back to top image under the media tab in your WordPress dashboard. Click the image after upload and copy the url. (Apple C to copy.)

screen-shot-2016-10-02-at-10-06-12-pm

Then, simply insert it the code you’ve copied (Apple V to paste) and save.

screen-shot-2016-10-02-at-10-08-24-pm

Viola! Your back to top product should appear in the bottom right of your site on the front end. Hooray! You’ve just installed your back to top button.
screen-shot-2016-10-02-at-10-18-42-pm

Here’s a quick video how-to.

And now for the buttons. Feel free to download some lovely back to top buttons below.

 

 

14 thoughts on “How to Install a Back To Top Button on Your Blog

  1. Hi!
    I love your buttons and your little video on how to install the plugin & the button itself. Thank you!
    The only problem is that when I click on the “download” button, there are no “back on top” buttons! The file is containing “freeswashes”.

    What am I doing wrong please???

  2. Hi Angie,
    Thanks for the free buttons! I followed the tutorial exactly, and even tried with two different button styles and it’s not showing. Could there be a step not listed? thanks

  3. Hi Angie,

    I found your nice blog on Pinterest and I immediately landed over here. I’m also a WordPress blogger and a passionate digital marketer.

    I unaware of this freebie, it seems fine. The back to top option is really useful for the mobile version and yours looks nice.

    Thanks for sharing the helpful information with us.

  4. I’ve used this plugin for a couple years now and love it, however, I recently tried to switch from Hello Bar to SumoMe’s Smart Bar and when I did my back-to-top button would “stick” to the bar in the top right instead of staying in the bottom right like I had in the settings. I contacted the help center but never heard back and asked in a few blogging forums but couldn’t ever get a response to how to fix it, so I switched back to Hello Bar for now and it’s working fine again. So apparently there’s a bug with the SumoMe plugin.

    Any advice on why it may be doing that with the SumoMe bar, or how to fix it?

Leave a Reply

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